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: '随便其他什么人吃的东西' }
]
}
})
1、构造器
①每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的：
var vm=new Vue({
//选项
});
②在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板挂载元素、方法、生命周期钩子等选项。
③可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器。而且所有的Vue.js组件其实都是被扩展的Vue实例。
var myComponent=Vue.extend({
//扩展选项
});
var myComponentInstance = new MyComponent();
2、属性和方法
①每个 Vue 实例都会代理其 data对象里所有的属性：
var data = { a: 1 }
var vm = new Vue({
data: data
});
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
② 被代理的属性是响应的，也就是说值的任何改变都是触发视图的重新渲染。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
③ 除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
});
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
});
3、实例生命周期
①每个Vue实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测（data observer）、编译模板（complie template）、挂载实例到DOM（mounted）、然后在数据变化时更DOM（update）。在这个过程中，实例也会调用一些 生命周期钩子，这就给我们提供了执行自定义逻辑的机会。例如，created这个钩子在实例被创建之后被调用：
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log(this.a)
}
});
// -> "a is: 1"
②也有一些其它的钩子，在实例生命周期的不同阶段调用，如mounted/updated/destroyed等
