指令
- 指令是带有 v-前缀 的特殊属性,绑定在 dom 属性上
- Vue 中不允许直接操作 dom
- 指令用来操作 dom
- mustache语法 --------- 属性写法
- 属性值是直接写数据的,不需要使用 {{ }}
1、v-text
- 更新元素的 textContent。
- 如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
- 示例
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> <script> var vm = new Vue({ el: '#app', data: { msg: ' hello Vue.js ' } }) </script>
2、v-html
-
更新元素的 innerHTML 。
-
可以解析标签型数据。
-
示例
<div id="app"> <p v-html = "h"></p> </div> <script> var vm = new Vue({ el: '#app', data: { h: '<h3> hello Vue.js </h3>' } }) </script>
条件渲染:
3、v-show
-
根据表达式的 true 和 false 值,切换元素的 display CSS 属性;
-
不管初始条件如何,元素始终渲染。
-
v-show 无法用于 < template > 元素,也不能和 v-else 配合使用。
-
示例
<div v-show="flag">v-show</div> <script> var vm = new Vue({ el: '#app', data: { flag: true } }) </script>
4、v-if
- 根据表达式的值的真假条件渲染元素;
- 操作 dom元素(组件)的创建或是销毁;
- 示例
<div id="app"> <h2 v-if='ifFlag'>v-if 单路分支 </h2> </div> <script> var vm = new Vue({ el: '#app', data: { ifFlag: true } }) </script>
5、v-else
- 不需要表达式;
- v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。
- 示例
<div id="app"> <h2 v-if='ifFlag'>v-if 单路分支 </h2> <p v-else >双路分支</p> </div> <script> var vm = new Vue({ el: '#app', data: { ifFlag: false } }) </script>
6、v-else-if
- v-if 之后的“else-if 块”。可以多次链式地调用;
- v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。
- 示例
<div id="app"> <h2 v-if=" type === 'A' ">v-if 多路分支 </h2> <p v-if=" type === 'A' "> A </p> <p v-else-if=" type === 'B'"> B </p> <p v-else-if=" type === 'C'"> C </p> <p v-else > D </p> </div> <script> var vm = new Vue({ data: { type: 'A' } }) </script>
列表渲染:
7、v-for
- 将一个数组、对象或 json 数据渲染为列表项;
- v-for 指令需要限定格式为
v-for = " item in items "
的特殊语法;
- 数组
v-for = " (item,index) in arr "
item 是 arr 中每一个元素 - 对象
v-for = " (item,key,index) in obj "
item 是 obj 的属性值 - json 类型数据
- 嵌套类型数据
-
示例
<div id="app"> <div id="app"> <h3>数组</h3> <ul> <!-- item1 为数组 arr 中的每个元素, index 为索引 --> <li v-for=" (item1,index) in arr "> {{ item1 }} ,{{ index }} </li> </ul> <h3>对象</h3> <ul> <!-- item2 为对象 obj 中的每个属性值 ,key 为属性名,index 为索引--> <li v-for=" (item2,key,index) in obj "> {{ item2 }} </li> </ul> <h3>json</h3> <ul> <li v-for=" item3 in json "> {{ item3.task }} </li> </ul> <h3>嵌套</h3> <ul> <li v-for=" item4 in lists "> <p>{{ item4.id }}</p> <ul> <li v-for="todo in item4.todos"> {{ todo }} </li> </ul> </li> </ul> </div> </div> <script> new Vue({ el: '#app', data: { arr: [ 1 , 2 , 3 , 4 ], obj: { id: 1, name: "Bianca", age: 20 }, json: [ { id:1, task:"敲代码" }, { id:2, task:"睡觉" } ], lists: [ { id: 1, todos: { id: 1, name: '连城' } }, { id: 2, todos: { id: 2, name: '文武' } } ] } }) </script>
结果:
问题:
1. v-if 与 v-show 的区别
相同点:
- v-if 与v-show 都可以动态控制 dom 元素显示隐藏
不同点:
- v-show 操作的是 dom 元素的 display 属性,dom元素还在
- v-if 操作的是 dom 元素(组件)的创建或销毁
- v-show 只能写一个单路形式
- v-if 可以有多种使用形式
- 单路分支
- 多路分支
- 双路分支
注意:
- 当一个元素默认在 css 中加了display:none 属性,这时通过 if-show 修改为 true 是无法让元素显示的。原因是显示隐藏切换,只是会修改 element.style 为 display:" " 或者 display:none, 并不会覆盖掉或修改已存在的 css属性。
2. v-if 与 v-show 使用场景
- 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销;
- 因此,如果需要频繁地切换则使用 v-show 较好;
- 如果在运行时条件很少改变,则使用 v-if 较好。
key
-
给每一个循环列表添加一个唯一标识;
-
使用 v-bind 指令来绑定 key;
-
只有 json 数据才能用 id;数组和对象只能用 index ;
-
如果有 id ,那么我们就使用 id,如果没有,我们才会选择 index;
<div id="app"> <ul> <li v-for=" (item,index) in lists" v-bind:key="item.id"> </li> </ul> </div> <script> new Vue({ el: '#app', data: { lists: [ { id: 1, name: '连城' }, { id: 2, name: '文武' } ] } }) </script>
8、v-bind
- 单项数据绑定,将一个数据绑定在一个 dom 的属性上
- 动态地绑定一个或多个特性,或一个组件 prop 到表达式。
- 缩写 :
9、Vue 动态绑定类名 v-bind:class
- 将数据与元素的 class 列表绑定在一起;
- v-bind:class 指令也可以和普通 class 属性共存,不会覆盖原生类名;
- v-bind:class 接受三目运算;
绑定方式
-
对象形式
-v-bind:class= " { 属性名: boolean } "
- 属性名 这个 class 的存在与否,取决于 boolean 的 truthy 值。 -
数组形式 【 推荐 】
-v-bind:class= " [ 数据 ] "
-
示例
- 对象形式:
<style> .size{ width: 300px; height: 300px; } .bg{ background-color: red; } .active{ border-radius:10px; } </style> <div id="app"> <!-- 对象形式 --> <!-- data、style 里的属性名均为 size ,类名才会加上 --> <!-- bg1 是自定义属性,data 和 style 中没有定义,属性值为 undefined ,相当于 false,类名不会加上去 --> <p class="active" :class=" { size , bg1 } " ></p> <!-- bg ,size 是 style 里的自定义属性,必须和 style 里的属性名一致,属性值为 true ,类名才会加上--> <p :class=" { size:flag , bg:true } "></p> <!-- bg 是自定义属性,[bg] 为一个变量,[ ]里的属性名 必须和 data 里的一致,类名才会加上 --> <p :class=" { [size]:true , [bg]:true } "></p> </div> <script> new Vue({ el: "#app", data: { size: "size", bg: "bg", flag: true } }) </script>
- 数组形式:
<style> .size{ width: 300px; height: 300px; } .bg{ background-color: red; } .bg2{ background-color: green; } .active{ border-radius:10px; } </style> <div id="app"> <!-- 数组形式--> <!-- 1、字符串 string 格式,和 style 里的属性名一致 --> <p :class=" ['size' , 'bg'] "></p> <!-- 2、数据格式 ,和 data 数据里的属性名一致--> <p :class=" [ s , bg ] "></p> <!-- 3、三元表达式 【常用】--> <p :class=" [ flag ? bg : 'bg2', 'size' ] "></p> </div> <script> new Vue({ el: "#app", data: { s: "size", bg: "bg", flag: true } }) </script>
10、事件绑定 v-on:
-
v-on:eventType=" handleName "
-
简写 v-on: -----> @
-
示例
<div id="app">
<button v-on:click="handle">
v-on:
</button>
<button @click="handle">
简写@
</button>
<button @click="param(10)">
传参
</button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
handle(){
alert(2)
},
param(num){
alert( num )
}
}
})
</script>
事件对象 e :
<div id="app">
<button @click="event">
事件对象 e
</button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
event(){
console.log( e )
}
}
})
</script>
结果:
问题:
- 如果事件处理程序中有三个参数,第三个参数才是事件对象 e ,如何实现?
<div id="app">
<button @click="helloHandler( 10,20,e)" > 点击 </button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
event(a,b,e){
console.log( a )
console.log( b )
console.log( e )
}
}
})
</script>
分析:
- 我们发现事件处理程序中的第三个参数 e 不在是事件对象了,而是一个 undefined
解决:
- 在函数执行时,传入一个实际参数 $event 来代表事件对象
<div id="app">
<button @click="helloHandler( 10,20,$event)" > 点击 </button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
event(a,b,e){
console.log( a )
console.log( b )
console.log( e )
}
}
})
</script>