Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
下面介绍几种常用指令(v-if、v-show、v-else、v-for、v-bind、v-on)，看vue.js如何让将数据渲染进入DOM系统：
！注意 如果以下代码不好用，请注意页面是否引入了可用版本的vue.js。引入途径分为两种，一种是下载独立的vue.js官方下载地址。也可以使用CDN方法，但是目前国内的不太稳定，推荐下载到本地BootCDN(国内)、unpkg(国外)、cdnjs(国外)。
1. v-if
条件渲染指令，根据其后的表达式的布朗值判断是否渲染该元素。
<div id="view">
<p v-if="Male">男</p>
<p v-if="Female">女</p>
<p v-if="age>20">年龄:{{age}}</p>
</div>
<script>
var vm= new Vue({
el:"#view",
data:{
Male:true,
Female: false,
age:29,
}
})
</script>
页面效果如下：
查看页面元素，可以发现黄色标记区域是v-if指令渲染出来的页面元素,只渲染了符合条件的元素。
2. v-show
接着v-if直接说v-show，上面说v-if只渲染符合条件的元素，而v-show则会渲染全部的元素，让我们把代码中的v-if全部替换为v-show，看看有什么区别。
可以看到页面的显示与之前的是没有区别的，但是在页面代码中多了一个p标签，并且style='display=none'，这说明了虽然不符合条件，但v-show依然渲染全部元素。
3. v-else
v-else指令必须要和v-if、v-show指令搭配在一起才能使用，如果v-if、v-show指令的表达式为true，那么else元素不显示；如果v-if、v-show指令的表达式为false，则else元素显示；
<div id="view">
<p v-if="Male">我是个男人</p>
<p v-else>{{message}}</p>
</div>
<script>
new Vue({
el:"#view",
data:{
Male:false,
message:"我是个女人"
}
})
</script>
4. v-for
作用是遍历数组元素，“item in items”，items是数组，item是在数组中的元素。讲个一个数组中包含着很多的人的手机号码，那么就可以使用v-for遍历输出在页面中。
<div id="view">
<table>
<tr>
<th>姓名</th>
<th>号码</th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td>{{ user.num }}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#view',
data: {
users: [{
name: '张三',
num: 12345,
}, {
name: '李四',
num: 67890,
}, {
name: '王五',
num: 12345,
}, {
name: '赵六',
num: 3697810,
}]
}
})
</script>
以上的实例是在model层保存数据，然后再view层使用v-for方法去遍历model层的数组，遍历后将数据显示在页面。
5. v-bind
这个指令用于实时更新HTML元素中的属性，先看下面的实例：
<style type="text/css">
.red{
color: red;
}
</style>
</head>
<body>
<div id="view">
选中更改字体颜色<input type="checkbox" v-model='red'>
<div v-bind:class="{'red':red }">字体</div>
</div>
<script>
new Vue({
el: '#view',
data: {
red:false
}
})
</script>
点击checkbox时，字体会更改颜色，也就是添加.red类。view层的input使用了v-model绑定了.red类（v-model创建了双向数据绑定，这里先不细说v-model）。在view层，v-bind负责它所在元素的属性，是否添加red属性。在model层，默认这个.red类为false,即为不添加，当更改input中checkbox的布朗值，model层的属性也会随之更改。v-bind属性可以有很多应用的场景，如网页一些需要高亮提示的地方。
6. v-on
用来监听指定元素的DOM事件，比如说点击事件，下面的实例和我们平常onclick()触发某个函数是很相似的。
<div id="view">
<button v-on:click="helo">Helo</button>
</div>
<script>
var Data ={
message:'Hello World'
}
new Vue({
el:'#view',
data:Data,
methods:{
helo:function(){
alert(this.message);
}
}
})
</script>
常用的指令大概就是上面的这几个，在编写的时候要注意不要经常写分号。笔者习惯了写js代码，就一时有些改不过来。
希望大家喜欢这个系列，喜欢的话记得点击那颗小心心，会给我很多鼓励哦！
祝大家周末愉快。
网友评论