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>
