Vue学习笔记

1，基本的实例化。使用vue的时候，首先要new 一个vue对象 New Vue(),每一个vue对象绑定一个dom，通过el : "#id"，其他基本的属性有data ，methods(和components一样有s)，computed，filters。下面介绍这属性：
（一）data：
<div id="server">
{{ info}}
</div>
vue直接通过{{}}取data里面的数据。

 new Vue({        el :'#server',        data :{            info : "this is a vue "        }            }    );

另： 在html中的v-model，v-bind是绑定data而言的，v-model我理解为value，v-bind可以是忽略这语句直接看紧接着的部分：<p v-bind :class="{change_color}"></p> 这实际上就是class = change_color ，如果后面有：check 实际上是访问data下面的check是否为true（v-bind是单向绑定的）。还有v-show=“check”，真的话就显示这个信息。v-if v-else 同理。下面对菜鸟学院的一个例子谈下看法。

v-for="item in sites" v-bind:todo="item"

props: ['todo'],template: '<li>{{ todo.text }}</li>'

data: {    sites: [      { text: 'Runoob' },      { text: 'Google' },      { text: 'Taobao' }    ]  }

for循环出来的对象存在item里面，又自定义属性之后，等价于todo = item,所以模板引用的是todo.text，虽然内容是一样的但是模板只能用“属性来引用属性”。

（二）紧接着介绍模板里面数据可以过滤，<span>{{fruit | fliter_null}}</span>，其实就是把fruit的值穿给fliter_null，注意只有 |
间隔。

filter : {            fliter_null : function (value) {                if(this.fruit.length=0){                    return '还没有选择水果哦'                }else {                    return '你选择的是'+value.toUpperCase();                }            }        },

filter和data同级，里面声明fliter_null函数，就是一个函数的声明，模板里面取得的是函数的名字。这里暴露了js的自带函数不熟悉。
（三）computed和methods的区别是computed是依赖缓存的，只要依赖发生改变，computed是会自动触发的。下面引用菜鸟学院的代码引出computed有get set

var vm = new Vue({  el: '#app',  data: {    name: 'Google',    url: 'http://www.google.com'  },  computed: {    site: {      // getter      get: function () {        return this.name + ' ' + this.url      },      // setter      set: function (newValue) {        var names = newValue.split(' ')        this.name = names[0]        this.url = names[names.length - 1]      }    }  }})// 调用 setter， vm.name 和 vm.url 也会被对应更新vm.site = '菜鸟教程 http://www.runoob.com';document.write('name: ' + vm.name);document.write('<br>');document.write('url: ' + vm.url);

对于methods来说，在html中代码为<button @click="click('hello world')">点击我</button>
也尝试了下event全局变量的多个属性，比如event.target.tagname，返回button.

var vm1 = new Vue({        el : '#eve',        methods :{            click : function (event) {                alert(event)            }        }    });

（四） components。自定义控件，比如<he info="hello "></he>
分为全局和局部，如果是全局的话，在该实例（el:”#id”）下都可以用。

 Vue.component('he',{        props : ['info'],        template : '<h1>{{info}}这是自定义组件hhh。</h1>'}    );

prop是通信方式，我的理解就是自定义一个属性，hello可以是绑定data动态变化。template是子类替换父类掉该自定义控件。
以上是父类对子类的通信，如果是子类对父类的通信，用$.on $.emit;

<button-counter v-on:increment="incrementTotal"></button-counter>

自定义组件里面有method，data和template同级，

template: '<button v-on:click="increment">{{ counter }}</button>',  data: function () {    return {      counter: 0    }  },  methods: {    increment: function () {      this.counter += 1      this.$emit('increment')    }  },

这里的声明函数是对template里面的increment声明，this.$emit('increment') 是触发父类当中v-on:increment="incrementTotal" 从而达到目的。

（五）自定义命令和路由明天继续 (●´∀｀●)