1.指令
什么是指令?
指令 (Directives) 是带有 v-
前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
例如我们在入门案例中的v-on,代表绑定事件。
1.1.插值表达式
1.1.1.大括号
格式:
{{表达式}}
说明:
- 该表达式支持JS语法,可以调用js内置函数(必须有返回值)
- 表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1;
- 可以直接获取Vue实例中定义的数据或函数
示例:
HTML:
<div id="app">{{name}}</div>
JS:
var app = new Vue({
el:"#app",
data:{
name:"奇哥"
}
})
1.1.2.插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}}
,加载完毕后才显示正确数据,我们称为插值闪烁。
我们将网速调慢一些,然后试试看刚才的案例:
刷新页面:
1.1.3.v-text和v-html
使用v-text和v-html指令来替代{{}}
说明:
- v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
- v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
示例:
HTML:
<div id="app">
<span v-text="hello"></span><br>
<span v-html="hello"></span>
</div>
JS:
var vm = new Vue({
el:"#app",
data:{
hello:'大家好,我是奇哥'
}
});
效果:
并且不会出现插值闪烁,当没有数据时,会显示空白。
1.2.v-model
刚才的v-text和v-html可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。接下来学习的v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。目前v-model的可使用元素有:
- input
- select
- textarea
- checkbox
- radio
- components(Vue中的自定义组件)
基本上除了最后一项,其它都是表单的输入项。
1.2.1 input
Html:
<div id="app">
<input type="text" v-model="num">
<h2>{{num}}</h2>
<input type="button" value="+" v-on:click="num++">
<input type="button" value="-" v-on:click="num--">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num:1
}
});
</script>
效果:
1.2.2 checkbox
html:
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了:{{language.join(',')}}
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: []
}
})
</script>
- 多个
CheckBox
对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型 - radio对应的值是input的value值
input
和textarea
默认对应的model是字符串select
单选对应字符串,多选对应也是数组
效果:
1.2.3 radio
html:
<div id="app">
<input type="radio" value="male" v-model="sex">男
<input type="radio" value="female" v-model="sex">女
<h2>{{sex}}</h2>
</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
sex:'male'
}
});
</script>
效果:
1.2.4 textarea
html:
<div id="app">
<input type="radio" value="male" v-model="sex">男
<input type="radio" value="female" v-model="sex">女
<h2>{{sex}}</h2>
<textarea v-model="sex"></textarea>
</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
sex:'male'
}
});
</script>
效果:
###5.2.5 select
html:
<div id="app">
<input type="radio" value="male" v-model="sex">男
<input type="radio" value="female" v-model="sex">女
<h2>{{sex}}</h2>
<textarea v-model="sex"></textarea><br>
<select v-model="favor">
<option v-for="item in items" :value="item">{{item}}</option>
</select>
</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
sex:'male',
favor:'弹琴',
items:['唱歌','跳舞','弹琴']
}
});
</script>
1.3.v-on:基本用法
v-on指令用于给页面元素绑定事件。
语法:
v-on:事件名="js片段或函数名"
示例:
<div id="app">
<!--事件中直接写js片段-->
<button v-on:click="num++">增加</button><br/>
<!--事件指定一个回调函数,必须是Vue实例中定义的函数-->
<button v-on:click="decrement">减少</button><br/>
<h1>num: {{num}}</h1>
</div>
<script src="vue-2.5.17.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
decrement(){
this.num--;
}
}
})
</script>
效果:
另外,事件绑定可以简写,例如v-on:click='add'
可以简写为@click='add'
1.4.v-for
遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。
1.4.1.遍历数组
语法:
v-for="item in items"
- items:要遍历的数组,需要在vue的data中定义好。
- item:迭代得到的数组元素的别名
示例:ul显示
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
users:[
{name:"张三",gender:"男",age:21},
{name:"李四",gender:"男",age:22},
{name:"王二",gender:"女",age:23},
{name:"赵六",gender:"男",age:24},
{name:"孙七",gender:"男",age:25}
]
}
});
</script>
效果:
示例:表格显示
html代码:
<table border="1" cellpadding="0" cellspacing="0" width="300" height="200">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td>{{user.gender}}</td>
<td>{{user.age}}</td>
</tr>
</table>
效果:
1.4.2.数组角标
在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数:
语法
v-for="(item,index) in items"
- items:要迭代的数组
- item:迭代得到的数组元素别名
- index:迭代到的当前元素索引,从0开始。
示例
<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
效果:
1.5.v-if和v-show
1.5.1.基本使用
v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
语法:
v-if="布尔表达式"
示例:
<div id="app">
<!--事件中直接写js片段-->
<button v-on:click="show = !show">点击切换</button><br/>
<h1 v-if="show">
你好
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
效果:
1.5.2.与v-for结合
当v-if和v-for出现在一起时,v-for优先级更高。也就是说,会先遍历,再判断条件。
示例:
<div id="app">
<ul>
<li v-for="(user,index) in users" v-if="user.gender === '女'">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:"张三",gender:"男",age:21},
{name:"李四",gender:"男",age:22},
{name:"王二",gender:"女",age:23},
{name:"赵六",gender:"男",age:24},
{name:"孙七",gender:"男",age:25}
]
}
})
</script>
效果:
1.5.3.v-else
你可以使用 v-else
指令来表示 v-if
的“else 块”:
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。
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>
类似于 v-else
,v-else-if
也必须紧跟在带 v-if
或者 v-else-if
的元素之后。
1.5.4.v-show
另一个用于根据条件展示元素的选项是 v-show
指令。用法大致一样:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display
。
示例:
<div id="app">
<!--事件中直接写js片段-->
<button v-on:click="show = !show">点击切换</button><br/>
<h1 v-if="show">
你好
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
代码:
1.6.v-bind
1.6.1.绑定class样式
假如我们想动态的修改页面元素的属性,比如class属性,这样写是错误的:
<div class="{{isAcctive}}"></div>
因为插值表达式不能用在属性的值中。
Vue对class属性进行了特殊处理,可以接收数组或对象格式:
数组语法
我们可以借助于v-bind
指令来实现:
HTML:
<div v-bind:class="isActive"></div>
你的data属性:
data:{
isActive:['active','hasError']
}
渲染后的效果:
<div class="active hasError"></div>
对象语法
我们可以传给 v-bind:class
一个对象,以动态地切换 class:
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active
这个 class 存在与否将取决于数据属性 isActive
的 truthiness。
你可以在对象中传入更多属性来动态切换多个 class。此外,v-bind:class
指令也可以与普通的 class 属性共存。当有如下模板:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
和如下 data:
data: {
isActive: true,
hasError: false
}
结果渲染为:
<div class="static active"></div>
当 isActive
或者 hasError
变化时,class 列表将相应地更新。例如,如果 hasError
的值为 true
,class 列表将变为 "static active text-danger"
。
1.6.2.简写
v-bind:class
可以简写为:class