目录
本质
指令就是标签的自定义属性(一个指令就是标签的一个自定义属性);
作用
- 相当于给原生的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语法)