VUE的10个常用指令

VUE的10个常用指令
01 v-once

说明： 只渲染元素和组件一次。随后的重新渲染，元素 / 组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
This will never change: {{msg}}

comment

{{msg}}
{{i}}

02 v-text

说明： v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样

{{msg}}

03 v-html

说明： 帮助我们绑定一些包含 html 代码的数据在视图上，比如： “hello,vue” ，这个字符串包含了标签，要想 不被当作普通的字符串渲染出来，就得用 v-html

说明：

04 v-show

说明： v-show 指令的取值为 true/false ，分别对应着显示 / 隐藏它就是用来控制元素的 display css 属

性的 [display:none]

我是 true

我是 false

渲染后

05 v-if

说明： 设置为 true 的标签，成功渲染出来，而设置为 false 的标签，直接被一行注释代替了，并没有

被解析渲染出来。

v-show 和 v-if 两者的区别

如果需要频繁切换显示 / 隐藏的，就用 v-show ；

如果运行后不太可能切换显示 / 隐藏的，就用 v-if 。

我是 true

我是 true

let app = new Vue({

el:"#app",

data:{

if_1:true,

if_2:false

}

});

06 v-else

说明： 两个标签 : 第一个使用 v-if 指令，并取值为 false ，第二个使用 v-esle 指令 , 一旦第一个标签的

v-if 指令的值为 true ，被忽视的就是第二个
标签了。 v-if 和 v-else 只有一个会被渲染出来。

Now you see me

Now you don't

07 v-else-if:

用法同 js 原生中的 if…elseif…elseif…else

A

B

C

Not A/B/C

08 v-for

说明： 我们用 v-for 指令根据一组数组 / 对象的选项列表进行渲染。 v-for 指令需要使用 item in items 形

式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

08-1 基本用法

item in items ">{{item}}

data: {

items : [' 我 ', ' 是 ', ' 数 ', ' 组 ']

}

08-2 v-for 应用于数组

{{index}}.{{item}}

data:{

list:['Tom','John','Lisa']

}

08-3 v-for 应用于对象

{{index}}.{{item}}

data:{

list:['Tom','John','Lisa']

}

Eg2:

let vm = new Vue({

el:"#app",

data:{

list:[

{id:1,name:"a"},

{id:2,name:"b"},

{id:3,name:"c"},

{id:4,name:"d"},

{id:5,name:"e"},

{id:6,name:"f"}

],

id:"",

name:""

},

methods:{

add(){

this.list.push({id:this.id,name:this.name})

}

}

})

09 v-bind

'red' : isRed}">
布尔值绑定模式对象方式

isA ,'class-b': isB }">VUE

var vm = new Vue({

el: "#demo",

data: {

isA : true, isB : true

}

})

变量绑定模式：数组绑定

classA ,classB]>VUE

var vm = new Vue({

el: "#demo",

data: {

classA : "class-a",

classB: "class-b"

}

})

综合绑定模式

Be good at VUE

var vm = new Vue({

el: "#demo",

data: {

one: "string", // string--> 类名

classa: true,

classb: false

}

})

div
内嵌绑定

new Vue({

el: "#app",

data: {

size:60

}

})

直接绑定到一个样式对象

VUE

data: {

styleObject: {

color: 'red',

fontSize: '13px'

}

}

10 v-on

作用：

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的 自定义事件 。

修饰符：

. stop - 调用 event.stopPropagation() 。

. prevent - 调用 event.preventDefault() 。

. capture - 添加事件侦听器时使用 capture 模式。

. self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

. { keyCode | keyAlias } - 只当事件是从特定键触发时才触发回调。

. native - 监听组件根元素的原生事件。

. once - 只触发一次回调。

. left - (2.2.0) 只当点击鼠标左键时触发。

. right - (2.2.0) 只当点击鼠标右键时触发。

. middle - (2.2.0) 只当点击鼠标中键时触发。

. passive - (2.3.0) 以 { passive: true } 模式添加侦听器

API: https://v2.cn.vuejs.org/v2/api/?#v-on

comment