Vue.js - 渐进式 JavaScript 框架 | 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="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{ message }}
</div>
</body>
<script>
new Vue({
el: "#app", // 接管区域
data: {
message: "Hello Vue";
}
})
</script>
</html>常用指令：
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置href,css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if/v-else-if/v-else | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-bind
<body>
<div id="app">
<a v-bind:href="url">链接</a>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
url: "http://www.baidu.com";
}
})
</script>v-model
<body>
<div id="app">
<input type="text" v-model="message">
{{ message }}
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
message: "Hello Vue";
}
})
</script>v-on
<body>
<div id="app">
<input type="button" value="按钮1" v-on:click="handle()">
<input type="button" value="按钮2" @click="handle()">
</div>
</body>
<script>
new Vue({
el: "#app",
methods: {
handle: function() {
alert("click");
}
}
})
</script>v-for v-if
<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-if="user.gender == 2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score >= 85">优秀</span>
<span v-else-if="user.score >= 60">及格</span>
<span style="color: red;" v-else>不及格</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
}]
}
})
</script>