目录
本质
指令就是标签的自定义属性(一个指令就是标签的一个自定义属性)；
作用
- 相当于给原生的html标签增加一些功能；
- 替代dom操作，提高开发效率；
语法
- 指令名=指令值；
- 指令都是以v-开头，支持简写；
- v-on:可以简写为
@; - v-bind:可以简写为
：; - v-slot可以简写为
#;
- v-on:可以简写为
分类
1.插值表达式
-
1.作用
- 将模型中的值(数据)交给视图，并且在模型值改变之后更新核心视图上的内容；
-
2.语法
- 写在html标签之间；
{{变量名(data中的属性名)}}
-
3.特点
- 支持三元运算；
- 支持对象取值、数组取值
- 支持二元运算 ： 算术、关系
- 不支持分支与循环语法（在vue中分支和·循环使用指令）
-
举例说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.导入vue.js文件,导入文件之后得到一个全局的构造函数Vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 2.创见视图 --> <div id="app"> <p>{{person.name}}</p> <p>{{person.age}}</p> <p>{{person.age>18?'欢迎进入网吧':'未成年人进制入内'}}</p> </div> <!-- 3.创建视图模型 --> <script> const mv=new Vue({ el:'#app', // 模型 data:{ person:{ name:'chaochao', age:'20', } } }) </script> </body> </html>
2.v-html与v-text
- 1.作用
- 将模型中的值(数据)交给视图，并且在模型值改变之后更改视图上的内容；
- v-text:设置元素的文本 innerText;
- v-html:设置元素的文本 innerHTML
- 2.语法
v-html=变量名(data中的属性名)- 相当于html标签的自定义属性
v-html与v-text与插值表达式的区别
- 插值表达式—字符串替换；只是替换
局部语法的位置，标签间原有的文本不会覆盖，不会解析html+css;会将html标签按照普通文本进行显示； - v-text指令：替换元素的innerText. 标签间的 原有的文本会被覆盖;不会解析html;会将html标签按照普通文本进行显示；
- 指令v-html:替换元素的 innerHTML. 原有的文本会被覆盖，可以解析内容中的标签，将标签以样式的形式解析出来
3.v-on
-
1.作用：给元素绑定事件
-
2.语法：
- 标准语法：
v-on:事件类型=‘methods中的方法名’ - 简单语法：
@事件类型=‘methods中的方法名’
- 标准语法：
-
4.注：事件方法定义在vue实例的mehods对象中；
-
5.举例说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 需求：设置按钮点击事件：按钮点击弹出点击一次288 设置盒子的鼠标移入移除事件，打印移入移除 --> <!-- 1.导入vue.js文件,导入文件之后得到一个全局的构造函数Vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .box{ width: 100px; height: 100px; border:1px solid red; } </style> </head> <body> <!-- 2.创见视图 --> <div id="app"> <button @click='btnClick'>点我呀</button> <div class="box" v-on:mouseenter='boxEnter' @mouseleave='boxLeave'></div> </div> <!-- 3.创建视图模型 --> <script> const mv=new Vue({ el:'#app', // 模型 data:{ person:{ name:'chaochao', age:'20', } }, methods: { btnClick(){ alert('点我一次288') }, boxEnter(){ console.log('移入'); }, boxLeave(){ console.log('移出'); } }, }) </script> </body> </html>
4.v-bind
- 1.前提
- HTML原生的属性无法访问vue实例中的成员(data,methods等)
- eg:src,href是不能够访问vue实例化对象的成员的；
-
- 若是想让HTML原生的属性访问vue实例中的成员，可以使用v-bind指令进行绑定；
- 3.语法
- 标准语法：
v-bind:html原生属性名=‘值’ - 简单语法：
:html原生属性名=‘值’
- 标准语法：
- 4.v-bind绑定
- [1]若是字符串，自动变为 数字 或 变量；
- [2]可以访问vue实例化对象中的成员；
- [3]添加类可以使用三元运算 或 对象 或 数组；
- 语法：:class=“{类名1:布尔值,类名2：布尔值}”
- 注：样式绑定的属性值为一个
对象 - 如果类名中存在-，需要加引号；
- 原因：js原生中定义属性名：只能是数字，字母，下划线，若多个单词采取驼峰命名所以有-会报错；
- 字符串不接受任何命名规则，所以加引号不会报错；
若加了引号vue会自动使用[]解析属性值；
- 注：样式绑定的属性值为一个
- 注意点：v-bind指令的属性与js原生的属性可以共存；
- eg:一个标签中class与:class是可以共存的；
class与style样式绑定
class原生一般直接使用字符串添加在class属性中；
<div class="box1 box2">111</div>
若是想去掉可以通过removeAttribute方法移除；
在vue中，我们可以有以下几种选择
[1]给class添加一个对象;
(1)在data中定义几个属性控制多个类的显示与隐藏
<div :class="{ box1, box2}">111</div>
data () {
return {
box1: true,
box2: false
}
},
(2)在data中定义一个对象通过data中的数据动态控制元素的样式，这样比(1)更加直观
<div :class="divClass">111</div>
data() {
return{
divClass: {
box1: true,
box2: false
}
}
},
[2]也可给class添加一个数组
<div :class="[num==1?'box2':'box1','box3']">111</div>
[3]给class添加一个三元表达式
<div :class="num==1?'box2':'box1'">111</div>
原生的行内样式书写与内嵌式书写方式相同
<div style="backgroundColor:aqua;color:red">111</div>
而在vue中我们有以下几种选择
[1]可以传入一个对象
<div :style="boxStyle">111</div>
data () {
return {
boxStyle: {
backgroundColor: 'aqua',
color: 'red'
}
}
[2]可以传入一个数组,数组的每个元素是一个样式对象
<div :style="[boxStyle1,boxStyle2]">111</div>
data () {
return {
boxStyle1: {
backgroundColor: 'aqua'
},
boxStyle2: {
color: 'red'
}
}
},
5.v-for
-
1.作用：渲染列表(渲染数组)
-
2.语法
-
[1]遍历数组
<!-- item表示每一个数组元素，index表示元素索引 --> <li v-for='(item index) in arr'></li><!-- item表示每一个数组元素--> <li v-for='item of arr'></li>[2]遍历对象
<!-- val表示元素属性值， key表示元素键值， index表示元素的索引--> <li v-for='(val,key,index) in obj'></li> -
[3]根据一个字符串进行遍历
<!--item 表示每一个字符 --> <li v-for='index of str'></li>
-
6.v-model双向数据绑定
- 作用： 双向数据绑定
- 修改表单元素的值，data中的数据自动变化；
修改data中的数据，表单的值也会自动变化
- 修改表单元素的值，data中的数据自动变化；
- 语法：
v-model='data中的值' - 注意事项
- 原生html中–>v-model只能用于表单元素！只能用于表单元素！只能用于表单元素！
- v-model的值必须要在data中声明
- 意义
- 可以快速 操作(获取|设置) 表单的值
7.v-if与v-show
v-if
-
作用
- 根据条件渲染数据；
(条件成立就将元素渲染到页面，若条件不成立就不将元素渲染到页面上)
- 根据条件渲染数据；
-
语法
-
v-if=‘布尔值’
v-else-if=‘布尔值’
v-else
-
- 注：必须以v-if开头，v-else-if,v-else可有可无；
v-show
- 作用
- 先将元素渲染在页面上，再根据条件设置元素的display的值；
- 语法
- v-show=‘条件(布尔值)’
- true–将该元素显示
- false–将该元素隐藏
- v-show=‘条件(布尔值)’
v-if与v-show的区别
-
两者都是控制元素的显示或隐藏，值为boolean类型；
-
也就是说若boolean值为false,v-if是直接将元素不加载在dom树上， v-show是将元素加载到dom树上，但是将其隐藏；
-
底层中 v-if是通过display实现的，v-show是通过visiblity实现的！
-
v-if有更高的切换消耗，v-show有更高的初始渲染消耗
-
使用场景
- 如果不是频繁切换，则用v-if；如果需要频繁切换，用v-show
为什么不建议在同一个标签上使用v-for与v-if
因为v-for比v-if的优先极高，当v-for与v-if在同一个标签上时，会先循环然后再进行if判断，会造成性能浪费；
8.v-cloak(了解)
作用：
设置元素vue渲染之前的样式(一般是隐藏)
语法
v-cloak
实质
属性选择器
注意点
[1]一定要写css样式
[2]vue会在数据完成渲染之后自动移除这个样式
eg:在渲染数据的时候，有时候网速慢，就会看到渲染成功之前的样式；即插件语法{{msg}}之类的
没加时数据没有渲染成功的显示：{{msg}}
加上此指令没有渲染成功的显示：空白
[v-clock]{
display:none;
}
9.v-once(了解)
作用
让这个元素只是在初始的时候渲染一次；(优化性能)
即vue只是加载这个元素将数据显示在页面上；
之后data数据发生/样式发生变化不会重新渲染；
语法
v-once
应用场景
点外卖左侧导航栏(页面左侧数据没有变化)
10.v-pre(了解)
作用
让vue不渲染这个元素
语法
v-pre
应用场景
博客类的网站
eg:vue官网(为了让学习的人看到vue语法)
扫一扫
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
