vue-day02插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染

目录

一、插值语法

1.1 mvvm演示

我们在vue语法中通过标签的id对它托管，我们可以在被托管的标签内协商{{ }}, 来使用插值表达式，但是不能跟django的模板语法一样写在标签的属性中

<div id={{name}}></div>
这样不行
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
 
<div id="app">
    姓名：{{name}}
    <br>
    <input type="text" v-model="name">
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {  // data中定义的变量，以后直接从vm实例直接可以拿到
            name: 'lqz',
            age: 19
        }
    })
</script>
</html>

1.2插值语法

在插值表达式中我们可以使用插值语法

# 插值语法中可以放
	-变量，对象取值，数组取值
    -简单的js语法
    -函数()

ps: 插值不能写在标签的属性上，只能写在标签内部

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好:{{hobby}}----->第一个爱好：{{hobby[1]}}</p>
<!--    这里因为hobby对应的是一个数组，所以要用中括号通过索引取值-->
    <p>信息:{{info}}----》年龄:{{info.age}}---{{info['age']}}</p>
<!--    这里的info是字典类型，因此可以用点的方式或是通过键来取值-->
    <p>运算:{{10*2+3*4}}</p>
<!--    这是进行数学运算-->
    <p>三目运算符【条件?'符合条件的结果':'不符合条件的结果'】:{{10>90?'大于':'小于'}}</p>
    <p>标签（默认不会渲染成标签）:{{myurl}}</p>
    <p>函数()</p>
<!--    这里的函数是<p>{{函数()}}</p>的形式来调用函数的意思-->
</div>
</body>
<script>
    var vv = new Vue({
        el: '#app',
        data: {
            name: 'wei',
            age:22,
            hobby:['打游戏','打球','赚钱'],
            info:{name:'wei',age:22},
            myurl:'<a href="http://www.baidu.com">点我看美女</a>'
        }
    })
 
</script>
</html>

image-20230214205134287

二、文本指令

指令 释义
v-html 让HTML渲染成页面
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示

指令系统

	-v-xx 写在标签属性上，任意标签
    -v-xx="name"  --->原来插值语法中能写的，他都能写 不用再加{{ }}
# 指令系统: vue提供的 都是 v-xx  写在标签属性上的，统称为指令，例如 a_url 必须是data中定义的变量
	<p v-text="a_url"></p>
    
    
# v-text直接把字符串内容渲染在标签内部 等同于
	<p v-text="a_url"></p>
    <p>{{a_url}}</p>
    
   
# v-html 把字符串的内容渲染成标签，写在标签内部
	<p v-html="a_url"></p>
   
 
# v-show 等于布尔值，该标签是否显示  样式控制显示不显示: style="display:none;"
# v-if   等于布尔值，该标签是否显示  整个标签直接删除，效率低，在dom中删除标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h2>v-text</h2>
    <p v-text="a_url"></p>
    <h2>v-html</h2>
    <p v-html="a_url"></p>
    <h2>v-show</h2>
    <img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt="" v-show="show"
         width="200px" height="200px">
    <h2>v-if</h2>
    <div v-if="show_if">
        <img src="https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg" alt="" width="200px"
             height="200px">
    </div>
</div>
</body>
<script>
    var vv = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我看美女</a>',
            show: true,
            show_if: true
        }
    })
 
</script>
</html>

打开浏览器的Console更改show_if的值为false就可以让图片消失

image-20230214213637103**

三、属性指令

# 标签上的属性可以绑定变量， 以后变量变化，属性的值跟着变化
	-href
    -src
    -name
    -class
    -style
    -height
    。。。
    
# 语法
	v-bind:属性名="变量名"
# 可以简写成 以后都用简写
	:属性名="变量名"
       
 # 小案例：点击按钮，随机切换美女图片
 # 小案例：每隔1s钟换一个美女图片
	-定时器

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
 
    <a :href="url">点击看美女</a>
    <br>
    <img :src="photo" alt="" :height="h" :width="w">
 
</div>
</body>
<script>
    var vv = new Vue({
        el: '#app',
        data: {
            url: 'http://www.cnblogs.com',
            photo: 'https://s1.ax1x.com/2022/12/02/zBbHdU.jpg',
            h:'200px',
            w:'200px'
        }
    })
 
</script>
</html>

四、事件指令

# 事件指令: 点击事件，双击事件，滑动事件。。。用的最多的是点击事件click
	v-on:事件名='函数'
   <button v-on:click="handleClick">点我看美女</button>
    函数必须写在methods的配置项中
    methods:{
        'handleClick':function (){
            // alert('美女')
            console.log(this)  //this 就是当前vue实例, 就是vm实例
            this.show=!this.show  // 取反赋值
        },
    }
   -点击button就会触发绑定函数(handleClick)的执行
 
 
# 可以简写, 以后都用简写
	v-on:事件名='函数名'
  可以简写成
   @事件名='函数名'
    
    
  
# 小案例: 点击按钮，随机切换美女图片
	-1 methods配置项中写成 这种形式 es6的对象写法
     handleClick(){}
       如果函数中再套函数，如果内部不是箭头函数,this指向有问题，需要在外部定义一下
      var _this = this
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
 
    <button @click="handlerClick">点我看美女</button>
    <div>
        <img :src="url" alt=""
             width="200px" height="200px">
    </div>
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://img2.baidu.com/it/u=1665230139,3573837695&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
            url_list: [
                'https://img2.baidu.com/it/u=480512667,309521494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=368',
                'https://img2.baidu.com/it/u=2574472557,2182587633&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                'https://img1.baidu.com/it/u=1545082701,659589256&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
                'https://img0.baidu.com/it/u=774110558,4154095832&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
            ]
        },
        methods: {
            'handlerClick': function () {
                // var i = Math.round(Math.random() * (this.url_list.length - 1))
                // this.url = this.url_list[i]
                // console.log(i)
 
                var _this=this
                setInterval(function () {
                    console.log(_this)
                    var i = Math.round(Math.random() * (_this.url_list.length - 1))
                    _this.url = _this.url_list[i]
                    console.log(i)
                }, 500)
            }
        }
    })
 
</script>
</html>

拓展

在es6的语法中可以简写methods中方法的代码

原本的

	'clicked':function (){
		var _this = this
		setInterVal(function() {
			var i = Math.round(Math.random() * (_this.rul.length - 1))
			console.log(i)
			_this.url = _this.myurl[i]
		}, 1000)
		
}

简写的

		clicked(){
			var _this = this
			setInterval(function () {
                    var i = Math.round(Math.random() * (_this.myurl.length - 1))
                    console.log(i)
                    _this.url = _this.myurl[i]
                },2000)
                this.con = !this.con
            }

五、class和style

# 本身它两都是属性指令， 但是他们比较特殊，应用更为广泛，单独再讲
 
# class: 推荐用数组
		:class='变量'
      变量可以是字符串，数组，对象
   
 
# style: 推荐用对象
	 :style='变量'
      变量可以是字符串，数组，对象
    
   
# 数组的方法: 很多，自己学
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js""></script>
 
    <style>
        .font {
            font-size: 60px;
        }
 
        .red {
            background-color: red;
        }
 
        .green {
            background-color: green;
        }
 
        .font-color {
            color: yellow;
        }
    </style>
 
</head>
<body>
<div id="app">
    <h1>clss</h1>
    <div :class="class_obj">我是div</div>
 
    <h1>style</h1>
    <div :style="style_obj">我是style-----div</div>
</div>
</body>
<script>
    var vv = new Vue({
        el: '#app',
        data: {
            // class_str:'font',
            // 当class属性使用的变量是一个字符串的时候，修改这个变量就需要重新写一遍，比较麻烦
            // class_list:['font'],   # 推荐
            // 当class属性使用的变量是一个列表的时候可以用push(),pop()对列表的内容进行增删
            class_obj: {font: true, green: false, 'font-color': false},
            // 当class属性使用的变量是一个字典的时候，内部的键可以不写引号，但是对于名称中有横杠的变量，不能省略横杠，会查找不到的
 
            style_str: 'color: green;font-size:80px',
            // style_list: [{color:'yellow'}, {'font-size':'90px'}],  //  style属性绑定的变量使用列表的时候需要内部套字典
            style_list: [{color: 'yellow'}, {fontSize: '90px'}],  // 可以用驼峰
            style_obj: {color: 'yellow', fontSize: '80px'}
            // style_obj: {color: 'yellow', 'font-size': '80px'}
        },
    })
 
</script>
</html>

六、条件渲染

条件渲染也是添加在标签的属性中
 
 
# v-if=条件 放在标签上， 如果条件成立，该标签就显示，如果条件不成立，该标签就不显示
# v-else-if=条件 放在标签上，如果条件成立，该标签就显示，如果条件不成立，该标签就不显示
# v-else   放在标签上， 上面条件都不成立，显示这个标签

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
 
</head>
<body>
<div id="app">
    <h1>通过分数显示文字</h1>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80&&score<90">良好</div>
    <div v-else-if="score>=60&&score<80">及格</div>
    <div v-else>不及格</div>
</div>
</body>
<script>
    var vv = new Vue({
        el: '#app',
        data: {
            score: 99
        },
    })
 
</script>
</html>

七、列表渲染

列表渲染我们需要使用bootstrap的组件，因此我们需要导入它的cdn或者文件，然后再去官网上拿它的样式

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
 
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
 
 
                <div class="text-center">
                    <h1>v-if+v-for 显示购物车</h1>
                    <button @click="handleClick" class="btn btn-danger">点我显示</button>
                </div>
 
                <div v-if="show">
 
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in good_list">
                            <th scope="row">{{item.id}}</th>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vv = new Vue({
        el: '#app',
                data: {
            show: false,
            good_list: [
                {id: 1, name: '钢笔', price: '29'},
                {id: 2, name: '铅笔', price: '29'},
                {id: 3, name: '文具盒', price: '298'},
                {id: 4, name: '彩笔', price: '298'},
            ]
        },
        methods: {
            handleClick() {
                this.show = !this.show
            },
 
        }
    })
 
</script>
</html>

八、补充：

# 解释器
# ide: 集成开发环境 快速开发
	-pycharm
     -goland
     -vscode
    
   
# dtl:django template Language django的

九、作业

点击开始随机美女，点击美女停下（定时器停），弹出美女地址

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="clicked">点我看图</button>
    <div v-if="con">
        <img :src="url" alt="">
    </div>
    <div v-if="son">
        <p>{{infor}}</p>
    </div>
 
 
</div>
</body>
<script>
    var vv = new Vue({
        el: '#app',
        data: {
            score: 99,
            con:false,
            son:true,
            infor:'',
            url: 'https://s1.ax1x.com/2022/12/01/z0fuF0.jpg',
            myurl: ['https://s1.ax1x.com/2022/12/02/zBbHdU.jpg',
                'https://s1.ax1x.com/2022/12/02/zBbboF.jpg',
 
            ]
        },
        methods: {
            // 'clicked': function () {
            //     var _this = this
            //     setInterval(function () {
            //         var i = Math.round(Math.random() * (_this.myurl.length - 1))
            //         console.log(i)
            //         _this.url = _this.myurl[i]
            //     },2000)
            //     this.con = !this.con
            // }
            clicked() {
                var _this = this
                setInterval(function () {
                    var i = Math.round(Math.random() * (_this.myurl.length - 1))
                    console.log(i)
                    _this.url = _this.myurl[i]
                    _this.infor = _this.myurl[i]
                },2000)
 
                this.con = !this.con
                this.son = !this.son
            }
        }
    })
 
</script>
</html>
 
<!--点击开始随机美女，点击美女停下（定时器停），弹出美女地址-->
posted @   性格如此w  阅读(123)  评论(0)  编辑  收藏  举报
相关博文：
·  vue-day03
·  Vue-day01----前端发展历史、Vue的介绍和基本使用
·  vue基础：插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染、补充
·  vue_day02
·  vue 插值语法 文本指令 事件指令 属性指令 class和style 条件渲染 列表渲染
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae