VUE常用指令

Posted web网站设计

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE常用指令相关的知识，希望对你有一定的参考价值。

1.vue术语解释

1.插值表达式

作用:会将绑定的数据实时的显示出来:

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换

{{js表达式、三目运算符、方法调用等}}

不能写 var a = 10; 分支语句 循环语句

<div id="app"> <!-- 在插值表达式中可以访问vm实例中data里面的属性 --> {{message}} <p>{{message}}</p> <p>{{message+'啦啦啦'}}</p> <p>{{age>18?'成年':'未成年'}}</p> <p>{{message.split("")}}</p> <!-- 在插值表达式中不能写js语句 --> <p>{{var a = 10}}</p> </div> <!-- 引入vue.js --> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { message: '我是data中的message属性的值', age: 20 } });</script>

插值表达式中不能写js语句, 如var a = 10;

2.指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

指令特性的值预期是单个 javascript 表达式(v-for 是例外情况，稍后我们再讨论)。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue框架提供的语法

扩展了html的能力

减少DOM操作

 <div id="app"> <p> {{message}}</p> <!-- v-on就是vue给标签元素提供的扩展-指令 v-on指令就是给标签绑定事件,这里是click, 当事件处于点击状态时,出发methods中的changeMsg方法 --> <button v-on:click="changeMsg">按钮</button> </div> <!-- 引入vue.js --> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { message: '我是data中的message属性的值', age: 20 }, methods: { changeMsg: function() { this.message += "啦"; } } });</script>

2.vue常用指令

vue扩展了html标签的功能，大部分的指令的值都是js表达式，使用指令取代dom操作

1.v-text和v-html指令

这两个指令很像js中的innerText和innerHTML

  • v-text:更新标签中的内容

    • v-text  更新整个标签中的内容

    • 插值表达式: 更新标签中局部的内容

    • v-text和插值表达式的区别

  • v-html:更新标签中的内容/标签

    • 可以渲染内容中的HTML标签

    • 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

<div id="app"> <!-- v-text指令的值会替换标签内容 --> <p>{{str}}</p> <p v-text="str"></p> <p v-text="str">我是p标签中的内容</p> <p v-text="strhtml">我是p标签中的内容</p> <p v-html="str"></p> <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 --> <p v-html="strhtml">我是p标签中的内容</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { str: 'abc', strhtml: '<span>content</span>' } });</script>

2.v-if和v-show指令

作用:根据表达式的bool值进行判断是否渲染该元素

<div id="app"> <!-- 如果isShow的值是true ,就显示p标签 --> <p v-if="isShow">我是p标签中的内容</p> <p v-show="isShow">我是p标签中的内容</p> <!-- 如果标签显示与隐藏切换频繁, 就使用v-show  v-show本质是通过修改标签的display值 --></div><script src="./vue.js"></script><script> new Vue({ el: '#app', data: { isShow: false } });</script>

效果

区别：

    v-if值为false时默认不初始化该元素

    v-show值为false时初始化标签默认添加display：none，只是让元素隐藏

因此，v-if有更高的切换开销，而v-show有更高的初始渲染开销。

如果需要非常频繁地切换，则使用v-show较好；

如果在运行时条件很少改变，则使用v-if较好。

3.v-on指令

  • 作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。

  • 语法:  @事件名.修饰符 = "methods中的方法名"  

  • 注意: $event  可以传形参

<div id="app"> <!-- v-on.xx事件名='当触发xx事件时执行的语句' --> <!-- 执行一段js语句:可以使用data中的属性 --> <button v-on:click="count += 1">增加 1</button> <!-- v-on的简写方法 --> <button @click="count += 1">增加 1</button> <!-- 执行一个方法 --> <button @click="add">增加 1</button> <!-- 执行一个方法、这种写法可以传形参 --> <button @click="fn1(count)">执行fn1方法</button> <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event --> <button @click="fn2($event)">执行fn2方法</button> <hr> <!-- 和v-for结合使用 --> <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button> <!-- v-on修饰符 如 once: 只执行一次 --> <button @click.once="fn4">只执行一次</button>

 <p>上面的按钮被点击了 {{ count }} 次。</p></div><script src="./vue.js"></script><script> new Vue({ el: '#app', data: { count: 0, items: ['a', 'b', 'c'] }, methods: { add: function() { this.count += 1; }, fn1: function(count) { console.log(count); console.log('fn1方法被执行'); }, fn2: function(e) { console.log(e); console.log('fn2方法被执行'); }, fn3: function(index) { console.log(index); console.log('fn3方法被执行'); }, fn4: function() { console.log('fn4方法被执行了'); } } });</script>

事件修饰符

  • .once - 只触发一次回调。

  • .prevent - 阻止默认事件 等同于 js的event.preventDefault()。

  • .stop - 阻止事件冒泡 等同于 js的event.stopPropagation()。

更多事件修饰符可去官网查看：https://cn.vuejs.org/v2/api/#v-on

简写: @事件名.修饰符 = 'methods中的方法名'

4.v-for指令

v-for指令类似于js中的for循环

根据一组数组或对象的选项列表进行渲染。

v-for 指令需要使用 item in items 形式的特殊语法，

items 是源数据数组 /对象

当要渲染相似的标签结构时用v-for

<!DOCTYPE html><html lang="en">

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head>

 <body> <div id="app"> <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染 v-for="元素 in 容器(数组和对象)" v-for="数组中的元素 in data中的数组名" v-for="对象中的属性值 in data中的对象名" --> <!-- 数组 --> <p v-for="item in list">{{item}}</p> <hr> <p v-for="(item,index) in list">{{item}}----{{index}}</p> <!-- (v,i) in 数组 v:数组中的每个元素 i:数组中元素的下标 --> <hr> <!-- 对象 --> <!-- (v,k,i)in 对象 v:值 k:键 i:对象中每对key-value的索引 从0开始 注意: v,k,i是参数名,见名知意即可! --> <p v-for="value in per">{{value}}</p> <hr> <p v-for="(value,key) in per">{{value}}----{{key}}</p> <hr> <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>

 </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { list: ['a', 'b', 'c'], per: { name: '老王', age: 38, gender: '男' } }, methods: {

 } })</script>    </body></html>

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)

            <div id="app"> <!-- v-for  key属性: 值通常是一个唯一的标识 key是一个可选属性 养成好习惯:建议在写v-for时 设置:key="唯一值" --> <ul> <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li> </ul> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { list: ['a', 'b', 'c'] }, methods: {

 } });</script>

5.v-bind指令

作用: 可以绑定标签上的任何属性。

5-1.绑定src和id属性

<div id="app"> <!-- data中的属性值会替换为标签的属性值 --> <img v-bind:src="src" /> <p v-bind:id="idValue">内容</p></div><script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { src: './logo.png', idValue: 'b' } });</script>

5-2.绑定class类名

分为对象语法和数组语法两种

对象语法
如果isActive为true，则返回的结果为 <div class="active"></div>
<style>.active { color: red; } </style>  <div id="app"> <div v-bind:class="{active: isActive}"> hei </div> <button @click="changeClassName">点击切换类名</button> </div>  <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { isActive: true }, methods: { changeClassName: function() { this.isActive = !this.isActive; } } }); </script>

数组语法

渲染的结果 <div class="active text-danger"></div>

<div v-bind:class="[activeClass, dangerClass]"> hei</div> <script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { activeClass: 'active', dangerClass: 'text-danger' } });</script>

5-3.绑定style

分为对象语法和数组语法两种

对象语法

渲染的结果<div style="color: red; font-size: 18px;"></div>

<div id="app"> <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}"> 文本内容 </div></div><script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { redColor: 'red', font18: 18 } });</script>

数组语法

<div v-bind:style="[color, fontSize]">abc</div><script> var vm = new Vue({ el: '#app', data: { color: { color: 'red' }, fontSize: { 'font-size': '18px' } } });</script>

简化语法

<div v-bind:class="{active: isActive}"></div><!-- 可以简化为 :，简化语法更常用 --><div :class="{active: isActive}"></div>

6.v-model

作用: 表单元素的绑定

特点: 双向数据绑定

  • 数据发生变化可以更新到界面

  • 通过界面可以更改数据

  • v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值。

6-1.绑定文本框

效果:当文本框的值发生变化后，div中的内容也会发生变化

<div id="app"> <p>{{message}}</p> <input type='text' v-model='message'> <hr> <!-- v-model其实是语法糖,它是下面这种写法的简写 -->    <input v-bind:value='message' v-on:input='message = $event.target.value' /></div><script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { message: 'message默认值' } });</script>

6-2.绑定多行文本框

 <div id="app"> <textarea v-model="message"> 我是textarea内的插值表达式 无效 {{str}} </textarea> <div>{{ message }}</div></div><script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { message: 'message默认值', str: 'str字符串' } });</script>

注意：多行文本框中使用插值表达式 无效

6-3.绑定选择框

绑定一个复选框

checked是布尔类型的数据

<input type="checkbox" v-model="checked"><div>{{ checked }}</div>
绑定多个复选框

此种方式需要input标签提供value属性

v-model绑定的是数组

 <!-- 多个复选框 : 需要设置value属性值, v-model绑定的是数组--><div id="app"> <div> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div></div><script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { checkedNames: [] } });</script>

绑定单选框
需要input提供value属性的值

男<input type="radio" name="sex" value="男" v-model="sex">女<input type="radio" name="sex" value="女" v-model="sex">{{sex}}<script> var vm = new Vue({ el: '#app', data: { sex: '' } });</script>

绑定下拉框

<div id="app"> <!-- 下拉框 --> <select v-model="selected"> <option disabled value="">请选择</option> <option>北京</option> <option>上海</option> <option>深圳</option> </select> <span> 您选择的是: {{selected}}</span></div><script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { selected: '' } });</script>

7.v-cloak
问题:在使用vue绑定数据的时候，渲染页面有时会出现变量闪烁，例如

 <div id="app" v-cloak> <p>{{message}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script> var vm = new Vue({ el: '#app', data: { message: '我是data中message的数据' } });</script>

效果:  在页面加载时,有时会在页面中看到这个:

{{message}}

解决方案: 使用v-cloak

<div id="app" v-cloak> <p>{{message}}</p></div>

注意:要在css代码部分写如下代码

[v-cloak] { display: none;}

这样:就可以防止也页面闪烁

8.v-once

解决的问题:只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

<div id="app"> <p v-once>{{message}}</p> <input type="text" v-model="message"></div><script src="./vue.js"></script><script> var vm = new Vue({ el: '#app', data: { message: '我是data中message的属性的值' } });</script>

当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染

v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可

2019年过去了，2020年让我们更加努力吧，迎娶高富美不再是梦！！！

祝大家元旦快乐！！！




以上是关于VUE常用指令的主要内容，如果未能解决你的问题，请参考以下文章

vue2.0-常用的几个指令

8个非常实用的Vue自定义指令

8个非常实用的Vue自定义指令

Vue.js——常用的指令

Vue.js常用指令：v-for

Vue的十个常用指令