Vue 常用指令
使用了 vue 的指令后,表达式是 JS 表达式,变量是 VUE 实例中的数据属性。
1 常用指令
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-model
- v-on指令
- v-text指令
1.1 v-if
是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:
v-if="expression"
expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。例如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) </script> </html>
显示结果如下、
注意:v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
1.2 v-for指令
v-for
指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
v-for="item in items"
items是一个数组,item是当前被遍历的数组元素。
示例代码:
<body> <div id="app"> <table style="width: 400px; height: 600px;" border="1" cellspacing="0"> <thead> <tr> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr v-for="item in items"> <td align="center"> {{item.name}}</td> <td> {{item.age}}</td> </tr> </tbody> </table> </div> </body> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ items:[{name:'well',age:'20'},{name:'good',age:'19'},{name:'nice',age:'18'},{name:'ok',age:'17'},] } }) </script>
1.3 v-bind 指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class
v-bind:argument="expression"
1.4 v-model
v-model(表单元素设置了之后会忽略掉value,checked,selected),常用在表单 <input> 及 <textarea>
让表单元素和数据实现双向绑定(映射关系)
示例代码
<div id="app"> <p v-text="message"> </p> <input type="text" v-model="message"> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ message:"nice to meet you" } }) </script>
1.5 v-on 指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:
<a v-on:click="doSomething">
有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。
Greet按钮将它的单击事件直接绑定到greet()方法,而Hi按钮则是调用say()方法。
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。Vue.js 为 v-on
提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
Vue.js为最常用的两个指令v-bind
和v-on
提供了缩写方式。v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。
<!--完整语法--> <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a> <!--缩写语法--> <a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a> <!--完整语法--> <button v-on:click="greet">Greet</button> <!--缩写语法--> <button @click="greet">Greet</button>
1.6 v-text指令主要是防止页面首次加载时 {{}} 出现在页面上。将对象中数据变量值显示在绑定的标签内容上。
v-text="expresstion"
参考文献:
官网:https://cn.vuejs.org/v2/guide/
如果觉得有用,想赞助一下请移步赞助页面:赞助一下