前言：这两天把vuejs官方文档都看了一遍（路由的文档还没看），现在回过头来再结合英文文档重新看一遍 ，为的是学下英文，然后总结性的写一下。尽管vuejs的官方文档写得详细又好，但是总觉得吧，知识这东西还是得自己跟着文档把代码手敲一遍，把要点写写，这样才能把别人的知识变成自己的。感觉自己要学的东西还有很多，长路漫漫，上下求索吧！
vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
1、声明式渲染
①vue.js的的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM:
<div id="app">
{{message}}
</div>
//js
var app=new Vue({
el:"#app",
data:{
message:"hello Vue!"
}
});
②绑定DOM元素属性
它们会在渲染的 DOM 上应用特殊的响应式行为。简言之，这里该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。
<div id="app">
<span v-bind:title="message">
将鼠标放到上面将看到title文字信息
</span>
</div>
//js
var app=new Vue({
el:"#app",
data:{
message:"U loaded this page on"+new Date();
}
});
2、条件和循环
① 控制切换一个元素的显示。
这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
//js
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
② v-for 指令可以绑定数组的数据来渲染一个项目列表(类似于for-in循环)
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
//js
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
});
3、处理用户输入
①我们可以用v-on指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。
注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码不需要关注底层逻辑。
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
//js
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
});
② v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{message}}</p>
<input v-model="message"/>
</div>
var app6=new Vue({
el:"#app-6",
data:{
message:"hello world!"
}
});
4、组件化应用构建
一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
属性能够将数据从父作用域传到子组件。
<div id="app-7">
<ol>
<todo-item
v-for="item in items"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
el: '#app-7',
data: {
items: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其他什么人吃的东西' }
]
}
})
