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

如图所示,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()
  } 
})

效果如下

vbind-demo

以上所示的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('')
  }
}})

效果如下

click-demo

从以上可以看到,我们在没接触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!'
  }
})

效果如下

input

用组件构建(应用)

组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：

component

在 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 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。

如有兴趣，请关注我的公众帐号:)

weex