Vue学习笔记

一、介绍

1.其实和Jquery一样，VueJs就是一个Js库，但是是面向前端的库，具体来讲叫做MVVM(Model-View-ViewModel)库.

2.理解Vuejs最关键的一句话叫做“数据驱动视图”，比如用Jquery来做一个列表，这个列表的数据是从Laravel来的，那么我们要遍历这个数据，然后把列表的html元素加到dom里面去， 要删除一个列表项的时候，先要在找到列表项在dom的位置，然后去除这个节点。Vuejs不用，数据在的时候，列表就在，数据减一，列表项就自动实时相应减一。
也就是说，你只要操作数据就够了，不用管dom。

这基本就是Vuejs的中心思想。

3.最爱的一句话哈哈哈哈哈：

友情提示

如果你以为前端真的这么简单，那么我只能呵呵的对你说，你已经走上了一条不归路，没关系，纵使前路千万坑，有哥陪你一起跳。

二、基础知识

1.v-on:click

    <div id="app">
      {{ message }}
      <button v-on:click="changeMessage">改变message</button>
    </div>

很明显，我们加了一个button元素。我们看到v-on:click这样的写法，不难理解，这就是vue定义的点击事件，以v-开头的这种写法叫做 directive ,后面我们还会遇到很多，它是vue（数据）控制html（视图）的连接点。

v-on:click 

点击触发事件

2.v-bind:title

<div id="app2">
    <span v-bind:title="message">来呀，怕你呀</span>
</div>

v-bind:title="message"  
会在鼠标悬停的时候显示message里的信息

3.v-model

    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

双向绑定，input里显示message内容，当input改变时，显示的message也立刻改变

    new Vue({
      el: '#app',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    })

    <div id="app">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

我们输入任意字符，奇妙的事情发生了，p标签中的message居然也发生了变化，input的value的变化改变了message，从而使视图发生了相应的变化。

其实我们知道，这背后肯定是input事件，只是在这里不需要再去定义input事件就可以同步数据了，这就是value和数据的双向绑定。

以后我们说双向绑定，都是指的是类似input这样的，自带change事件的表单项目。

4.v-for

    new Vue({
      el: '#app',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    })

    <div id="app">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

这里我们看到了第三个directive， v-for="todo in todos",其实和任何循环语句的意思差不多，把它写在需要循环的元素上。
todo.text可用按照对象的方法来读取属性值。

三、组件

1.介绍

组件就是把页面中的交互模块独立出来，变成一个个独立的部分，方便我们重复使用。比如我们常见的 data table，在很多地方都会用到，它就是一个组件。组件功能是Vue最牛X的特性，有了它，你可以开发大型复杂的应用。

2.全局注册

    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })

1）这样就在全局注册了一个组件，'my-component'是组件的名字，后面的{}里可以写参数，我们看到这里写了一个template，它是组件将会渲染的html内容；

2）有一个细节要十分注意，Vue组件注册要写在前面，Vue实例初始化要写在后面，否则会报错；显然，组件只能在Vue作用域内有效，必须写在<div id="example"> ...</div>里。

3.局部注册

    var Child = {
      template: '<div>A custom component!</div>'
    }
    var vm = new Vue({
      el: '#example',
      components: {
        'my-component': Child
      }
    })

4.组件在dom中放置的位置有讲究

我们知道，html中有些位置是特殊的。比如ul和li之间就不应该写入其他代码。比如table直接下级节点，也不能写入例如div这样代码。虽然你可以硬写，html由于不是一个编程语言，它只是一种格式，所以也不会报错，但是js会。

1. <table>
2. <my-row>...</my-row>
3. </table>

比如这样写组件是不行的，正确的做法你需要把<table></table>也包括到你的组件中去。

如果你硬要实现上面的这种写法，vue也提供了一个办法：

1. <table>
2. <tr is="my-row"></tr>
3. </table>

我们知道，html中有些位置是特殊的。比如ul和li之间就不应该写入其他代码。比如table直接下级节点，也不能写入例如div这样代码。虽然你可以硬写，html由于不是一个编程语言，它只是一种格式，所以也不会报错，但是js会。

5.组件的data属性

vue组件是vue对象的一种扩展，理论上它继承了vue对象的所有属性，Vue原本有data属性，因此vue组件自然也有data属性，你可能觉得大概是这样写的：

    Vue.component('my-component', {
      template: '<span>{{ message }}</span>',
      data: {
        message: 'hello'
      }
    })

然而这样写Vue会报错，正确的写法：

    Vue.component('my-component', {
      template: '<span>{{ message }}</span>',
      data: function(){
        return {message: 'hello'}
      }
    })

data 后面一定要跟一个回调函数，date的属性一定要return回来，别问为什么，记住在组件里一定要这样写。

6.一个关于data的例子

    var data = { counter: 0 }
    Vue.component('simple-counter', {
      template: '<button v-on:click="counter += 1">{{ counter }}</button>',
      data: function () {
        return data
      }
    })
    new Vue({
      el: '#example-2'
    })

    <div id="example-2">
      <simple-counter></simple-counter>
      <simple-counter></simple-counter>
      <simple-counter></simple-counter>
    </div>

    data: function () {
      return {
        counter: 0
      }
    }

官网举的这里例子信息量有点大，首先，我们观察template里面可以直接使用v-on这样的语句。其次我们注意到data是由外部传进来的。最后我们看到<simple-counter>可以多次使用，组件就是用来复用。

你点击任意一个计数器，三个组件都会累加1，这是因为点击的时候直接把外部的对象数据改变，而这个外部对象也被另外两个组件引用，因此所有数据都改了。

然而，这并不符合组件的思想，组件的数据应该是独立的，点击一个计数器不应该影响到另外两个。正确的写法：

    data: function () {
      return {
        counter: 0
      }
    }

data 这里不要从外部传，直接写进去，这样每个组件的数据就自己管自己了。因为每个组件其实都一个Vue的扩展实例。
点击一个组件，只会影响到自己的数据。

7. el属性

    Vue.component('simple-counter', {
      el:function(){
        return '#example'
      },
      template: '<button v-on:click="counter += 1">{{ counter }}</button>',
      data: function () {
        return data
      }
    })

组件里的el属性也要用闭包+return的写法。它定义组件的有效作用域。

8.组件的嵌套使用

组件里面当然可以放置更多的组件，这样就形成了父组件和子组件的关系。
由于组件内定义的数据只能在组件内使用，所以子组件想使用父组件的数据，就需要通过传参数的方式。
因此，我们也可以把组件抽象的理解为一个方法。

参数传递的顺序是 从上到下（从父组件向下传递到子组件）

另一个是事件的传递。我们大家都了解事件冒泡，事件是从子节点传递到父节点，一直传递到顶部的。
Vue组件也是这个原理，子组件一有点风吹草动（事件），父组件，父父组件就会一层一层的马上知道。

简而言之，参数往下传，事件往上传。