目录
Vue常用指令
实操
v-bind、v-model
v-bind
v-model
总结
v-on
总结
编辑
v-if、v-show
v-if
v-show
总结
v-for
总结
综合案例
编辑
Vue常用指令
Vue指令:在HTML文件或者HTML标签中涉及的带有v-..的指令都是Vue的指令。不同指令不同含义不同作用。v-for v-if。。。
实操
v-bind、v-model
v-bind
v-bind:为HTML标签绑定属性值，如设置href、css样式。
我们之前在定义一个超链接的时候通常就是使用a标签设置href属性为一个指定的link，现在可以使用v-bind来管理href。
首先还是在HTMl文件的head部分引入Vue.js文件，然后再script标签中创建Vue对象，设置好数据模型url:hrrps://www.baidu.com，然后设置视图id为el数值，区域内创建超链接，使用v-bind绑定，可以省略v-bind但是':'必须存在。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-常用指令-v-bind-v-model</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><a v-bind:href="url">链接1</a><a :href="url">链接2</a></div>
</body>
<script>new Vue({el:"#app",data:{url:"https://www.baidu.com"}})
</script>
</html>v-model
v-model:在表单元素上创建双向数据绑定 。
我在上面操作的区域中加入一个表单元素，使用v-model来绑定url，这样这个表单的内容就和url数据模型进行绑定了。
<div id="app"><a v-bind:href="url">链接1</a><a :href="url">链接2</a><input type="text" v-model="url"></div>双向绑定解释：
经过上面的操作，表单内容和数据项url进行了绑定，如果表单内容网址发生变化那么数据模型url也会发生变化，进而a标签中的href也会变化，如此就实现了一连串的对应绑定。比如我现在在表单中更改网址，那么链接1和2都会变。
Vue中数据模型必须定义数据模型否则上面的case就不会是link。
总结
v-on
v-on是为HTMl标签绑定事件的，比如单击、双击等等。
主要流程和上面一样，可以创建一个按键然后使用Vue指令绑定Vue事件操作，v-on:click="handle()"就是绑定handle方法，这个方法需要在Vue对象中定义case如下。
原指令（v-on:）可以直接使用@代替。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>V-on</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="点我一下" v-on:click="handle()"><input type="button" value="点我一下v-on:简化@click" @click="handle()"></div>
</body>
<script>new Vue({el:"#app",data:{},methods:{handle:function() {alert("你点了我一下");}}})
</script>
</html>总结
v-if、v-show
v-if
渲染（针对浏览器的称呼）就是展示的意思。
v-if v-else-if v-else都是条件渲染某元素，如果为true就渲染否则不渲染。
条件不满足的浏览器不会展示。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-常用指令-v-ifshow</title><script src="js/vue.js"></script>
</head>
<body><div id="app">年龄<input type="text" v-model="age">经判定,为：<span v-if="age <= 35">年轻人(35之下)</span><span v-else-if="age > 35 && age <=60">中老年人(35-60)</span><span v-else>老年人(60以上)</span></div></body>
<script>new Vue({el:"#app",data:{age:20 //默认值},methods:{}})
</script>
</html>
v-show
v-show则是通过控制css样式通过display决定是否展示。
<div id="app">年龄<input type="text" v-model="age">经判定,为：<span v-if="age <= 35">年轻人(35之下)</span><span v-else-if="age > 35 && age <=60">中老年人(35-60)</span><span v-else>老年人(60以上)</span><br><br>年龄<input type="text" v-model="age">经判定,为：<span v-show="age <= 35">年轻人(35之下)</span><span v-show="age > 35 && age <=60">中老年人(35-60)</span><span v-show="age > 60">老年人(60以上)</span></div>
v-if满足条件才会渲染，否则不渲染，但是v-show都会渲染，但是不满足条件的会通过控制display来不展示该内容。
总结
v-for
v-for用于列表渲染，遍历容器中的元素或者属性。
将数据模型的数据设置为一个数组，然后直接在视图使用v-for绑定然后遍历输出，可以使用index获取数据对应的数组的索引，当然也可以不用，最后可以使用插值表示的方式在HTML文件中展示出来遍历的数据。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><v-for></v-for></title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div v-for="(a,index) in arrs">{{index + 1}} : {{a}}</div><br><br><div v-for="addr in arrs">{{addr}}</div></div>
</body>
<script>new Vue({el:"#app",data:{arrs:['字节跳动','百度','华为','埃里巴巴','spaceX']},methods:{}})
</script>
</html>
总结
综合案例
code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通过Vue完成表格数据的渲染展示</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td ><span v-if="user.gender == 1">男</span><span v-else-if="user.gender==2">女</span></td><td>{{user.score}}</td><td><span v-show="user.score >= 85">优秀</span><span v-show="user.score > 60 && user.score < 85">及格</span><span style="color: red;" v-show="user.score < 60">不及格</span></td></tr></table></div>
</body>
<script>new Vue({el:"#app",data:{users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods:{}})
</script>
</html> 初始视图：
结果视图：
