简介
官网介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
个人观点：（刚刚从React过来）
区别：
react在每更新一个组件之后，都会以这个组件为根，向上或向下将整个组件树都更新一遍。如果不需要，则需要手动配置shouldComponentUpadate。
而vue非常明确的更新你需要更新的那个组件。
react使用的渲染语法为JSX，偏向逻辑。
Vue使用的渲染语法为模板字符串，偏向最原始的html。
向上向下扩展做的规模很大。
学了一周Vue，在学的很浅的时候，感觉还是React爽，希望一个月后我会对Vue有不同的感受。
来自一个月后的我：vue真香了
声明式渲染
允许采用模板语法：
1
2
3
<div id="app">
</div>
1
2
3
4
5
6
var app = new Vue({
el: '#app', //el相当于一个选择器，里面放置#+id
data: {
message: 'hello Vue'
}
})
同时可以在页面通过 .来更改其值。
除了模板语法插入文本，还可以通过vue特有的标签v-bind来绑定元素。
1
2
3
4
5
<div id="app-2">
<span v-bind:title="message">
鼠标悬停以查看时间信息
</span>
</div>
1
2
3
4
5
6
var app2 = new Vue({
el: '#app-2',
data: {
message:'页面加载于'+new Date().toLocaleString()
}
})
类似于v-bind Attribute 被称为 指令。指令带有前缀 v- ，以表示他们式Vue提供的特殊标签：会在渲染DOM时使用特殊的响应式行为。
条件与循环
条件v-if
1
2
3
4
5
<div id='app-3'>
<p v-if='seen'>
现在你看到我了
</p>
</div>
1
2
3
4
5
6
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
在控制台输入： app3.seen = false，可以发现文字消失了。
循环v-for
1
2
3
4
5
6
7
<div id='app-4'>
<ol>
<li v-for='todo in todos'>
</li>
</ol>
</div>
1
2
3
4
5
6
7
8
9
10
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: 'text1', id:';lskajf'},
{text: 'text2', id:';lsdskajf'},
{text: 'text3', id:';lsdfskajf'},
]
}
})
同样的：在控制台中输入 app4.todos.push({text: ‘新项目’,id:’sdlkfja;})，可以发现列表中会增加一行。
用户输入处理
按钮交互v-on
1
2
3
4
5
6
7
8
<div id='app-5'>
<p>
</p>
<button v-on:click='myOnClick'>
反转消息
</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
var app5 = new Vue({
el: '#app-5',
data: {
message: 'hello Vue.js'
},
methods: {
myOnClick: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
和react不同的是，虽然更新了状态，但是我们没有触碰到DOM——所有的DOM都有Vue来处理，我们只需要关注逻辑层。
表单与应用状态间的双向绑定v-model
1
2
3
4
5
6
<div id='app-6'>
<p>
</p>
<input v-model="message" />
</div>
1
2
3
4
5
6
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue'
}
})
组件化应用构建
和React一样了，组件系统也是Vue的另一个重要概念，组件是一种抽象，允许我们使用小型、独立和通常可以复用的组件构建大型应用。
一个组件本质上是有一个拥有预定义选项的一个Vue实例。
1
2
3
4
5
6
7
8
<div id='app-7'>
<ol>
<todo-item
v-for='item in groceryList'
v-bind:todo='item'
v-bind:key='item.id'
</ol>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Vue.component('todo-item',{
//todo-item 组件现在接收一个prop，类似于一个自定义Attribute
//所要接收的prop名填在后面的数组中。
props:['todo'],
template: `
<li></li>
`
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{id: 0, text: '蔬菜'},
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})