Vue.js入门(一)
目前我司的后端主要是用PHP来写,发现我们后端的html+js没有采用组件的方式来做，导致代码之间重复率非常高,很难维护，举一个简单的粟子，比如现在我们有两个页面，创建和修改页面,这两个页面都有一个选择时间的控件(datePicker),由于我们没有采用组件化，我们需要分别在两个页面的html+js+css里分别写两遍同样的代码
一旦我修改了创建页面的选择时间控件的逻辑，也必然要在修改页面copy同样的逻辑，这样的结果简单是灾难性的!正确的做法应该是用组件化的方式来做，这样代码可复用，安全,可维护!
而且我发现我们的后端现在还是用jQuery来做,但是很遗撼的是jQuery已经过时了，具体原因请看这里
简单的总结一下就是现代浏览器的API已经足够好用，加上vue,react等组件化框架的流行，直接操作DOM不再是好的模式!
我发现如果用当前大热的Vue来做组件化会是一个很不错的选择！
为此，今天花了一些时间学习了一下Vue,废话不多说，进入正题
什么是vue
Vue.js是一个构建数据驱动的 web 界面的库。Vue.js的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单,在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念，它用特殊的语法将DOM绑定到底层数据，这样我们只要操作数据，DOM便能相应地更新,避免了与DOM的直接操作,让我们的代码更容易撰写,理解与维护
如图所示,Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。我们操作上图的Model部分就相当于间接操作了DOM!
好了，知道了什么是Vue，我们就来学习一下它的使用方式吧
起步
由于是入门级选手，所以未采用vue-cli,直接采用了用scrip这种最简单的方式引入vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
好了，既然引入了vue.js,那我们来做一个最简单的粟子吧
//html
<div id="app">
{{ message }}
</div>
//js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
刷新一下，可以在界面上看到以下内容
Hello Vue!
现在数据和DOM已经被绑定在一起了，所有的元素都是响应式的,不信？打开控制台，并修改app.message,界面是不是也变了:)
我们还可以通过以下方式来绑定DOM元素属性
<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()
}
})
效果如下
以上所示的v-bind属性被称为指令，指令都带有前缀v-,以表示它们是vue.js提供的特殊的属性，它们会在渲染过的 DOM 上应用特殊的响应式行为，这个指令的简单含义是说：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。
条件与循环
我们可以通过v-if来控制切换一个元素的显示
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
在控制台里设置app3.seen = false我们会发现Now you see me消失了。
这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据，而且，Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。
我们也可以用v-for指令来绑定数据到数组来渲染一个列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
1.Learn JavaScript
2.Learn Vue
3.Build something awesome
在控制台里，输入
app4.todos.push({ text: 'New item' })
你会发现列表中多了一栏新内容。
处理用户输入
为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法：
<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('')
}
}})
效果如下
从以上可以看到,我们在没接触DOM的状态下更新了应用的状态,所有的DOM操作都由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!'
}
})
效果如下
用组件构建(应用)
组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：
在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：
// Define a new component called todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
定义好了组件之后，我们就可以在另外的组件模板中将此组件插入:
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
我们注意到todo-item的组件的template是写死的，这样明显不合理，我们应该将数据从父组件传给子组件，对此,vue提供了一个prop字段：
Vue.component('todo-item', {
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
现在我们就可以用v-bind指令将todo传到每一个重复的组件中了:
<div id="app-7">
<ol>
<!-- Now we provide each todo-item with the todo object -->
<!-- it's representing, so that its content can be dynamic -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
效果如下
1. Vegetables
2. Cheese
3. Whatever else humans are supposed to eat
我们已经将应用分割成了更小的单元，子元素通过props接口实现了与父元素的解藕,如果需要，我们还可以在不影响父元素的基础上进一步为todo组件改进更多复杂的模板和逻辑
在大型应用中，组件化无疑是解决藕合问题的良药，通过组件化，不仅能有效实现与外界的藕合，还能做到很好的复用，回到开头的问题，如果用组件化解决多个页面重复写多次相同控件的问题？
我们先定义一个datePicker组件
Vue.component('date-picker', {
props: ['xxx'],
template: 'xxx'
})
定义好了之后，我们就可以在创建和修改页面插入同样的date-picker组件了
//创建页面
<div id="app-7">
<date-picker></date-picker>
</div>
var app7 = new Vue({
el: '#app-7',
data: {
}
})
//修改页面
<div id="app-7">
<date-picker></date-picker>
</div>
var app7 = new Vue({
el: '#app-7',
data: {
}
})
可以很清楚的看到这种方式，我们只需要维护date-picker即可，后续如果要用其添加比如初始显示日期时，我们只需要从父元素传给它即可,有效地实现了解藕
与自定义元素的关系
我们注意到以上的date-picker组件的制定非常类似于Web组件规范中的自定义元素，实际上Vue的组件就是参考了该规范，但仍有几个关键的不同:
1.Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js 组件也可以放在原生自定义元素之内。
2.Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。
如有兴趣，请关注我的公众帐号:)
