Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
拓展：MVVM 的工作流程
Model（数据层）
View（视图层）
ViewModel（逻辑层）从 Model 获取数据，并转换成 View 能直接使用的格式（如过滤、排序）。
<!-- View（模板） -->
<div id="app">
<p>{{ message }}</p> <!-- 数据绑定 -->
<button @click="reverseMessage">反转文本</button> <!-- 事件绑定 -->
</div>
<script>
// ViewModel（Vue 实例）
new Vue({
el: '#app',
data: { // Model（数据）
message: 'Hello, MVVM!'
},
methods: { // 视图逻辑
reverseMessage() {
this.message = this.message.split('').reverse().join(''); // 更新 Model
}
}
});
</script>
1.v-if 条件渲染（销毁 DOM）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true
}
})
</script>
</html>
2.v-show 切换显示（CSS 控制）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true
}
})
</script>
</html>
3.v-else v-if 的 else 块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 28
}
})
</script>
</html>
4.v-for 列表循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}]
}
})
</script>
</html>
5.v-bind 动态绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})
</script>
</html>
6.v-on 绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>
<!--click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
methods: {
say: function(msg) {
alert(msg)
}
}
})
</script>
</html>
如果前端感兴趣：添加微信: LarkMidTable2021 ，备注：前端 ，平时进行前端的学习交流使用。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。