重学VUE——vue 常用指令有哪些?

vue

一、什么是指令?

vue 中,指令以 v- 开头,是一种特殊的自定义行间属性。指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上。只有v-for是一个类外,后边跟的不是表达式。

一个指令能够接收一个参数,在指令名称之后以冒号表示。例如:

<a v-bind:href="url">vue官网</a>

添加指令后,url 会被当作变量来解析。

二、常用指令

2.1、v-model 双向绑定数据

v-model 指令可以用在 input、textarea、select元素上创建双向数据绑定。他会根据控件类型自动选取正确的方法来更新元素。

使用语法:<input type="text" v-model="msg"/>

<!-- 修改input中的值,标签p元素内容随之改变 -->

<input v-model="content"/><p>{{ content }}</p>

data () {

return {

content: '我是双向数据绑定,可以有默认值',

}

}

 

2.2、v-for 列表渲染

作用:借助 v-for 把一个数据渲染成一个列表。

使用语法:<li v-for="item in list"></li>

其中 list 是源数据数组,item是被迭代的数组元素的别名。

<!-- 使用实例 -->

<ul>

<li v-for="item in list" :key="item.id">{{item.girl}}</li>

</ul>

data(){

return{

list:[

{ id:'1' , girl:'花花'},

{ id:'2' , girl:'草草'}

]

}

})

2.3、v-bind 动态绑定属性

作用:用来动态绑定属性,属性值有变动的时候及时对页面数据或样式等保持最新状态。

使用语法:

<div v-bind:attribute = " 变量 "></div>

<!-- 更改 url 图片地址,网页内图片也会实时更新 -->

<img v-bind:src="url" alt="">

data () {

return {

url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg'

}

}

2.4、v-on 绑定事件

作用:给元素绑定事件监听,触发事件后,执行 methods 里面对应函数。可以缩写为@。

使用语法:

<div v-on:click="fun"></div> 
//或
<div @click="fun"></div>

<!-- 点击按钮,调试器会打印出vue -->

<button @click="print">点击,打印vue</button>

methods:{

print(){

console.log('vue')

}

}

注意:上述 v-on 使用的时候没有传参,所以方法后的小括号可以省略。

v-on 传参时,必须添加括号,使用如下。

<!-- 点击按钮,调试器会打印出vue -->

<button v-for="item in list" @click="print(item)">点击{{item}}</button>

data () {

return {

list:[ 'one', 'two', 'three' ]

}

},

methods:{

print(item){

console.log('点击',item)

}

}

这是一个遍历的按钮组,点击的时候,打印当前元素内容。

 

2.5、v-if / v-else-if / v-else

作用:根据逻辑判断,控制元素的显示和隐藏。

使用语法:<div v-if=" boolean|表达式 " ></div>

注意:v-if / v-else-if / v-else 使用语法都是相同的,但是v-else-if 和 v-else 必须与v-if连用,不能单独使用。

<!-- 修改show的值,元素内容也会改变 -->

<div >

<span v-if="show">真</span>

<span v-else>假</span>

</div>

data () {

return {

show:true,

}

}

2.6、v-show / v-hide

作用:控制元素的显示和隐藏。

使用语法:

<div v-show=" boolean|表达式 " ></div> //表达式为真的时候显示

<div v-hide=" boolean|表达式 " ></div> //表达式为真的时候隐藏

<div >

<span v-show="show">真</span>

<span v-hide="show">假</span>

</div>

data () {

return {

show:true,

}

}

2.7、v-html 解析html标签

2.8、v-once 进入页面时 只渲染一次 不再进行渲染

2.9、v-cloak 防止闪烁

2.10、v-pre 把标签内部的元素原位输出

2.11、v-text 解析文本

三、v-if 与 v-show 的区别

相同点:都是控制元素的隐藏显示的。

区别:

  • v-if 是条件渲染,满足条件时,节点元素都会被渲染出来,包括事件绑定等,如果不满足条件,节点就不会被渲染出来,包括事件等。但 v-show 是借助 display:none 隐藏节点的显示,它的内容还有事件等始终都存在。
  • v-if 来回切换时,浏览器需要不停地渲染,损耗性能,所以成本很高。但是 v-show 只是隐藏显示,所以成本较低。
  • v-show 在页面初始化的时候,需要全部渲染,相对 v-if 成本要高。
  • 根据 v-if 的特性,适合用于加快初始化的渲染速度。而 v-show 适合用于频繁切换的场景。

以上是 重学VUE——vue 常用指令有哪些? 的全部内容, 来源链接: utcz.com/z/375698.html

回到顶部