Vue.js之入门

1.What is Vue.js?

Vue.js（读音 /vjuː/, 类似于 view）
是一套构建用户界面的 渐进式框架,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.引入

<script src="https://unpkg.com/vue/dist/vue.js">

在页面文件头加入上述代码，即可将Vue.js引入

3、声名式渲染

1）

<div id="app">
{{ message }}
</div>

<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})；
</script>

这时候页面就会出现：

Hello Vue

注意：js代码必须在div的后面，否者js无法找到相应的节点对象，出现报错。

2）

<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>

var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
})；

当我们将鼠标放置于文段上面，就会出现相应的时文字。

4、条件与循环

1）

<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})；

加入我们将seen中设置为fasle，文字就会消失。

2）

<div id="app-4">
<ol>
<li v-for="e in List">
{{ e.text }}
</li>
</ol>
</div>

var app4 = new Vue({
el: '#app-4',
data: {
List: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});

效果：

Learn JavaScript
Learn Vue
Build something awesome

5、处理用户输入

1）通过v-on 来进行用户页面交互

<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})；

我们会发现，点击按钮后，文字会反转。主要是因而调用js方法，改方法使其返回。

2）Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>

var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})；

通过上述代码，在input输入的信息都会显示在<p>标签中。

6、总结：

Vue.js是一个非常好的框架，使数据与视图之间的交互变得更加容易，能较少程序员在实现细节上的思考，更加专注地编写业务逻辑代码。

虽然上述代码只是官方例子照搬，但融入了个人的理解与描述，相对只是简单学习，这种方式有更加深刻的印象。同时，当我们忘记的时候，我们可以翻看博客，温故知新。

Reference:

[1] 介绍, http://doc.vue-js.com/v2/guide/