背景
这几周做了一个项目，前端都是使用的jQuery，涉及到大量的DOM操作。做完之后对其中操作的繁琐简直无力吐槽，于是来研究一下当前流行的前端框架angular和vue。angular和vue相比jQuery最直观的感受就是解决了数据模型与页面视图的双向数据绑定问题。jQuery每次更新了数据之后都需要手动更新页面视图，简直不能更闹心。而angular和vue只需要关注数据模型，只要数据模型改变页面视图就会自动刷新，不需要人工干预，解决了本次项目中最大的痛点。写了几个入门例子之后发现vue相比angular更容易入门，于是选中vue作为本次技术栈的扩展点。
本系列笔记基于vue官方教程写作，详细参考 https://cn.vuejs.org/v2/guide/installation.html
Vue简介
Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。Github主页：https://github.com/vuejs/vue
创建一个本地的 .html 文件，然后引入 Vue。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
浏览器渲染结果如图
此时可在浏览器console中执行以下命令
app.message = "Hello world!"
数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。执行后浏览器会重新渲染页面，如下图
除了以上文本插值，还可以用如下方法绑定DOM元素属性
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
});
</script>
鼠标停留时会显示绑定的message信息
条件与循环
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
</script>
执行后会在页面显示p元素里的内容，此时在控制台执行以下代码
app3.seen = false;
执行完之后p元素就消失了。
v-for指令可以绑定数组的数据来渲染一个项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
});
</script>
页面渲染如下
此时可以在控制台对todos进行操作
app4.todos.push({text: '新项目'});
app4.todos.pop();
可以看到页面会同步进行刷新显示最新结果。
处理用户输入
可以用v-on指令绑定一个事件监听器来处理用户的输入
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: '12345'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});
</script>
点击button之后就会执行reverseMessage方法。
Vue提供了v-model指令实现表单输入和应用状态之间的双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message" name="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello world'
}
});
</script>
在文本框中输入时p标签的内容也会同步更新
