vue2，官网：介绍 — Vue.js (vuejs.org)
例子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"><p>{{ message }}</p></div>
</body>
<script>// 定义vue组件new Vue({el: '#app', // Vue实例挂载到id为app的元素上data: {message: 'Hello Vue.js!' // 定义一个数据}})
</script>
</html>
常用指令
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置href，css样式 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件渲染元素 |
| v-else-if | 条件渲染元素 |
| v-else | 条件渲染元素 |
| v-show | 根据条件展示元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-bind
为HTML标签绑定属性值，如设置href，css样式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><a v-bind:href="url">v-bind</a><br><!-- 可以简写为： --><a :href="url">v-bind</a></div><script>new Vue({el: '#app',data: {url: 'https://www..baidu.com'}});</script>
</body>
</html>
v-model
在表单元素上创建双向数据绑定 。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><input type="text" v-model="value"></div><script>new Vue({el: '#app',data: {value:'yoyo'}});</script>
</body>
</html>
v-on
为HTML标签绑定事件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><input type="button" value="按钮" v-on:click="handle()"> <br><input type="button" value="按钮" @click="handle()"></div><script>new Vue({el: '#app',data: {value:'yoyo'},methods: {handle: function() {alert("点击！！");}}});</script>
</body>
</html>
v-if / else-if / else
条件渲染元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><span v-if="age < 35">年轻人</span><span v-else-if="age < 60">中年人</span><span v-else>老年人</span></div><script>new Vue({el: '#app',data: {age:333},methods: {}});</script>
</body>
</html>
v-show
根据条件展示元素，区别在于切换的是display属性的值。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><span v-if="age < 35">年轻人</span><span v-else-if="age < 60">中年人</span><span v-else>老年人</span><span v-show="age < 35">年轻人</span></div><script>new Vue({el: '#app',data: {age:33},methods: {}});</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><input type="text" v-model="age"> <br><span v-if="age < 35">年轻人</span><span v-else-if="age < 60">中年人</span><span v-else>老年人</span><span v-show="age < 35">年轻人</span></div><script>new Vue({el: '#app',data: {age:33},methods: {}});</script>
</body>
</html>
v-for
列表渲染，遍历容器的元素或者对象的属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><h1>Vue.js</h1><ul><li v-for="addr in addrs">{{addr}}</li></ul><ul><li v-for="(addr,index) in addrs">{{index}}:{{addr}}</li></ul></div><script>new Vue({el: '#app',data: {age:33,addrs:["北京","上海","广州"]},methods: {}});</script>
</body>
</html>
小例子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="app"><table><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>分数</th><th>等级</th></tr><tr v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td v-if="user.gender == 1">男</td><td v-else>女</td><td>{{user.score}}</td><td v-if="user.score >= 90">A</td><td v-else-if="user.score >= 80">B</td><td v-else-if="user.score >= 70">C</td><td v-else-if="user.score >= 60">D</td><td v-else>F</td></table></div><script>new Vue({el: '#app',data: {users:[{name:'Tom',age: 20,gender:1,score:78},{name:'Jerry',age: 22,gender:2,score:88},{name:'John',age: 25,gender:1,score:98},{name:'Marry',age: 21,gender:2,score:68}]},methods: {}});</script>
</body>
</html>
