vue 基础
vue数据
el 指定要绑定的元素 data用于存放数据 methods用于定义vue内部函数，每次调用都会执行。 computed函数在再依赖数据改变时才会执行。
Vue生命周期 ： 1、new Vue 传入配置对象 2、初始化配置属性 ,把传入的配置参数绑定到vm对象上 3、渲染模板，把数据渲染到页面中
vue指令
vue指令可以绑定表达式，调用函数,运算。
| 名称 | 作用 |
|---|---|
| v-text | 把指定数据填充为元素文本内容，v-text='数据名' |
| v-html | 将指定数据按照html进行解析，v-html='数据名' |
| v-bind | (单向数据绑定)给原生的html属性绑定数据（对html属性进行渲染，绑定事件时在vue对象methods中查找函数），v-bind:属性名='数据名'，指令缩写 :属性 ；样式绑定 :class=[''，''] |
| v-on | 在元素上绑定事件,v-on:事件='函数名',指令缩写 @函数名 |
| v-model | 表单数据双向绑定（只用于表单元素，用户修改表单，vue数据也被变更，相比以前js二次取数节省操作），v-model='数据名' |
| v-for | 遍历普通数组 ，kv,简单循环v-for="count in 6"; |
| v-if | false时通过dom操作删除元素 |
| v-show | false时隐藏元素style="display:none;"，（元素需要频繁显示与隐藏时v-if性能消耗高） |
| 自定义指令 Vue.directive('name'，function（el,binding）{}); | name指令名，el调用指令的元素，binding包含：binding.name是不含v-的指令名，binding.expression指令后绑定的表达式字符串，binding.value 指令绑定的表达式结果 |
钩子函数
在特定条件自动调用的函数。可以自定义钩子函数 Vue.directive('name'，{钩子函数对象}); //对象中可以存放多个钩子函数
bind :当指令绑定到元素时触发函数(在元素) inserted ：当元素已经追加到Dom树后触发
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
beforeCreate 在创建实例之前 new Vue之后，初始化设置之前,无法读取vue data 无法访问methods等数据
beforeCreate:function(){
}
created 钩子函数可以访问data数据 ，调用methods中的方法
beforeMount 钩子函数在数据渲染之前，在元素挂载到页面之前。
mounted 网页上的数据已经渲染完成
beforeUpdate 在数据更新之后，网页更新之前，触发的钩子函数
updated 在数据更新后，网页也重新渲染完成后，触发的钩子函数
事件修饰符
常用五种事件修饰符
| 修饰符 | 作用 |
|---|---|
| .stop | 阻止冒泡传递，v-on:事件.事件修饰符；@事件.事件修饰符 |
| .prevent | 阻止默认行为(常用在超链接) |
| .capture | 把事件的传递触发模式切换成捕获模式 |
| .self | 只允许事件由元素本身出发，不受其他传递冒泡事件影响，不影响自身冒泡传递 |
| .once | 触发一次 |
| v-model.lazy | 在input元素失去焦点时（用户输入结束）才会同步数据，节省性能 |
| v-model.trim | 去空，去掉数据两边的空格 |
| v-model.number | 数值转换，文本框默认的是str |
按键修饰符
如果一个按键事件只能被某个特定按键触发，使用按键修饰符
| 修饰符 | 作用 |
|---|---|
| .enter | |
| .tab | |
| .delete | 删除和退格键 |
| .esc | |
| .space | |
| .up | |
| .down | |
| .left | |
| .right | |
| .键盘码值 | |
| 自定义 Vue.config.keyCode.键盘修饰符 = 按键值 |
过滤器
过滤器不修改原始数据，只修改显示效果
{{原始数据 | 过滤器}}
过滤器实际上是一种函数，把左边数据作为参数传入函数，过滤器的返回值作为表达式结果。过滤器有作用域的分别，全局过滤器在vue实例化之前定义。
vue 通信
vue-resource文档 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md axios https://github.com/axios/axios axios的npm文档 https://www.npmjs.com/package/axios
组件
组件的作用：允许把一块网页元素当做模板，把它注册成组件，可以批量使用，提高重用性。
定义一个模板
var temp = Vue.extend({template:'...html代码...'});
注册成组件(定义好的组件名可以通过<组件名>使用) Vue.component(组件名，模板);
Vue.component(组件名，{ template："" })
动态组件使用：