更多关于Vue.js的系列文章请点击:Vue.js开发实践(0)-目录页
一、Vue指令
指令 (Directives) 是带有v-
前缀的特殊特性。在Vue.js中,指令的作用是代替一段JS表达式,帮助开发者快速地完成简单的Dom操作。
1.1、v-if\else\else if
v-if是一个根据条件进行渲染的组件,使用方法如下:
<div id="vue3" >
<div v-if='look == 1' v-html="message"></div>
</div>
new Vue({
el: '#vue3',
data: {
message: '<h1>Hello World!</h1>',
look: 1
}
})
还可以用 v-else 添加一个“else 块”:
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
1.2、v-for
基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键):
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
<div id="vue9">
<ol v-for='(person,index) in personList'>
<li>{{index}}:{{person.name}}:{{person.age}}</li>
</ol>
</div>
new Vue({
el: '#vue9',
data: {
personList: [
{name: 'arong',age: 12},
{name: 'lisa',age: 12},
{name: 'lucy',age: 12}
]
}
})
1.3、v-on
绑定事件监听器,事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
<div id="vue10">
<button v-on:click='func(123)'>提交</button>
</div>
new Vue({
el: '#vue10',
methods: {
func: function(text){
alert(text);
}
}
})
详细的使用:
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
1.4、v-model
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。
<div id="vue11">
<input type="text" name="t1" v-model='message1'>
<h1>输入的字符串为:{{message1}}</h1>
</div>
new Vue({
el: '#vue11',
data: {
message1: ''
}
})