新开篇关于vue

参考链接：http://cn.vuejs.org/v2/guide/instance.html

了解vue组件的生命周期：

1.beforeCreate 即将创建

2.created 创建

3.beforeMount  即将挂载

4.mount。挂载

5.beforeUpdate 即将更新

6.updated 更新

7.beforeDestory 即将摧毁

8.destoryed 消灭

上述方法都能够在 el 方法同层内进行重写

构造器方法  new Vue()  

扩展方法 Vue.extend()

属性以及方法

属性： 属性的任何设置都会影响到原始数据

对象.$属性 就等于其属性  只不过是用来防止混淆的

对象.$方法 也是同样

关于vue的模板语法

插值： 使用{{}}方法插入值

html: v-html 进行标签修饰即可

属性绑定 v-bind:需要绑定的属性 = “被绑定属性”

关于vue过滤器部分

该部分可以在filters方法内进行写入，

也能够在computed内使用计算属性（计算属性能够在后期进行了解）进行过滤

关于vue计算属性

计算属性在标签中也是实用{{}}来进行调用，然后在computed方法内进行实现，以及return进行过滤。此处的computed方法专门用于存储方法

*计算方法能够实现的，methods也能够实现。然而他们的不同在于计算属性是基于其依赖缓存，即传入参数不变，方法不会掉用，而是使用缓存进行返回

$watch方法 ，在watch内声明的属性在发生变化之后能够实现其后实现的方法，即属性变化，方法即被掉用，参见watch.html

关于计算属性setter

类似于oc内的get set方法，能够在方法的set get内进行数据处理

同时，属性也要在computed内进行方法的重写

关于观察watchers

用于监视设定的属性，属性改变后即会触发相关方法进行处理。

关于html与css,class的绑定

class

对象语法绑定：使用v-bind方法进行class绑定，可以与对象进行绑定，包括复杂对象

数组语法绑定:类似于对象绑定，只不过对象变为数组

组件绑定：即上述两种方式在组件上的应用

css

使用v-bind:style 方式进行绑定css属性

对象语法绑定<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

数组语法绑定<div v-bind:style="styleObject"></div>

styleObject对象由data内进行声明

自动添加前缀

关于条件渲染v-if

普通v-if <h1 v-if="ok">Yes</h1> ok需要返回布尔值

<template>中的v-if template标签酱整个需要条件 渲染的部分都包含起来进行判断，然后决定其内部的全部标签的渲染

v-else 使用后得到类似于if 的条件渲染效果

v-else-if 使用后得到类似于elseif条件渲染效果

key控制条件渲染的复用 ：key值设置成同样或者未设置，组件将被复用，ke设置成不一样时，组件将被重新初始化，并且无保存

v-show于v-if：show方法大体与if相同，但是不支持template标签。并且if为惰性，未执行部分时不会进行编译，但show的话，所有情况都会编译保留，对于不同的情况只是作出简单的css切换

关于列表渲染v-for

基本用法：<li v-for="todo in todoList" ><div>{{todo.message}}</div></li>

template用法：该用法类似于template的if版本，能将多个标签进行列表渲染

对象迭代：同样能够对对象内的各个属性进行for，参数能够包含参键值，键名与索引

整数迭代：for n in 10

组件使用 ： 暂时未能明白

另：数组更新检测办法：

变异方法会引起视图更新，非变异方法则不会引起视图的更新，（变异方法会引起原数据的变化，非变异方法则是对数据的副本进行操作），另外一种选择则是使用计算属性

关于事件处理器

监听事件  <button v-on:click="counter += 1">增加 1</button>

方法事件处理器:将处罚方法写在methods内

内联处理器方法：带有参数传值的方法事件处理器

事件修饰符：查看api

按键修饰符：查看api

按钮修饰符：查看api

关于表单控件绑定：v-model

基础用法

文本：直接使用{{}}方法

多行文本：将data属性设置为数组即可

复选框：v-model同值时，将data属性设置为数组就可以完成复选

单选按钮：input的type设置为radio，然后v-model相同就可以设置为单选按钮

选择列表

单选列表：data绑定bind到一个字符串类型

多选列表：data绑定bind到一个数组类型

动态选项：将data内的数组使用v-for方式在标签上列表渲染就可以得到，当然value也要进行数据绑定

绑定value：大致就是使用v-model 与value进行配合使用

复选框：进行复杂的数据绑定

单选按钮：同复选框

选择列表设置：即进行value的数据绑定，但是绑定的为对象

修饰符与组件：暂时未能明白

示例代码部分