vue

Vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。

　　Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

　　Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用jQuery手工操作DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将DOM “绑定”到底层数据。

 简介：

1. npm install vue
2. 生成实例: var vue = new Vue({})
3. 属性和方法: 1,el:'#id',元素选择器. 2,data:'数据绑定' 。可以从外部通过vue.$el来访问el属性，通过vue.$data 来访问data属性 vue.$watch()通过监听属性data中的数据来进行某个操作

数据绑定语法:

1. {{data}} :在html中调用数据并且进行数据绑定,{{*data}}加上*只会加载初次的数据，后续更改的数据不会变化，不会解析html标签，还可以用于html标签的属性上面<div id="{{data}}"></div>,data可以是js表达式(s+b)
2. {{{data}}} : 会解析html标签
3. 过滤器 : {{|}},以管道符号 | 的方式表示 {{data | uppercase}} 过滤后data为大写,vue内置数个过滤器uppercase，capitalize...
4. 指令 : 特殊前缀 v- 表示 <div v-if='data'></div> ,判断data的值，来操作div是否显示，v-text指令 起作用同<div v-text='data'></div>等于<div>{{data}}</div>；v-html同v-text功能一致，会编译html标签； v-show 同v-if的功能类似，v-show不会对元素进行销毁，v-if会 ；v-else和v-else-if 必须跟随v-if ， v-for 对元素进行遍历
5. v-on ：简写为 @ , <p v-on:click='dosomething'>等于<p @click='dosomething'></p>
6. 计算属性 : computed,通过computed:{b:function(){return 2}}可以往data对象中添加属性

Class对象语法:

1. 通过v-bind:class'expression'来绑定css类,v-bind:class与普通的class属性能共存 <p class='b' v-bind:class'c'></p> 这样是没有问题的
2. v-bind数组语法: v-bind:class'[classA,classB,...]'
3. Style对象语法 : v-bind:style"{fontSize='12px'}"与v-bind:style"{font-size:'12px'}"效果一样，{}内部可以是两种命名方式1， camelCase驼峰式 2，kabab-case短横分隔式；
4. Style数组语法 : v-bind:style"[styleA,styleB]"，通过绑定到的styleA,和styleB进行样式解析

文本输入框:

1. 在<input type="text">标签上使用v-model='msg',创建双向数据绑定,new Vue ({data:{msg:'hello world'}})
2. 多选框 : 在<input type="checkbox" v-model='data'>上通过v-bind:true-value='a'和v-bind:false-value='b'，其中a，b是data中的值，v-model绑定一个值供外部使用并且响应v-bind的值
3. 单选框 : 在<input type = "radio" v-model='data'>使用 用法同上
4. 下拉菜单 : 单选下拉框<select v-model="selected"><option selected>a</option><option selected>b</option></selected>，多选下拉框<select v-model="selected" multiple><option selected>a</option><option selected>b</option></selected>
5. 多参数特性 : <input v-model='msg' lazy>只有当input的值发生改变后才会触发change事件，及输入完毕后按下enter才会触发； <input v-model='msg' number>自动将msg转化为数字 <input v-model='msg' debounce='delayTimes'>输入完毕后延迟多少时间出发事件

自定义指令 ：

1. 基础 : vue.js  允许用户自定义自己的指令通过 Vue.deirective(id,definition)来实现,在html中通过<p v-id:'expression'>来实现，其中id为定义的指令名称，definition内部定一些钩子函数，其中包含 bind只会调用一次，在初始化的时候调用;update含两个参数function(newValue,oldValue)通过绑定的值是否发生变化来调用(会在bind初始化完毕之后也会调用)；unbind只会调用一次，当元素解除绑定的时候调用
2. 指令实例属性 : 钩子函数内部的this指向dom对象 this.name 等于Vue.deirective 中参数id，this.el表示dom元素 this.expression是表达式但是不包括过滤器和参数，v-id:foo,this.args等于foo
3. 对象字面量 : <div v-demo="{id:'a',name:'b'}"></div>双引号中的内容回传给definition(value)中的参数value及value = {id:'a',name:'b'}
4. 字面修饰符 : 通过在自定义指令后面加 .literal ，<div v-demo.literal = 'foo ps as'></div>，definition的参数value= 'foo ps as',并且会调用update钩子函数但是只会执行一次
5. 元素指令 : 通过Vue.elementDirective('my-directive',{})来注册，用法<my-directive></my-directive>

自定义过滤器 ：

1. 通过Vue.filter(id,function(value){return newvalue})来全局注册一个过滤器,id为过滤器的名字，value为需要过滤的数据 ,返回一个处理后的数据；Vue.filter('my-filter',function(value){return 1}); <div {{msg | my-filter}}></div>过滤后返回1
2. 双向过滤 : Vue.fileter(id,{read:function(val){},write:function(val,oldval){}})，<input v-model='msg | my-filter'><p>{{msg}}</p>,当触发input时及修改input的value后触发my-filter的read方法,其中read的val参数为msg，之后又调用write方法其中参数val位input中的值,oldval为read方法返回后的值
3. 动态参数 : <input v-model='msg | my-filter another'><p>{{another}}</p>,那么Vue.filter(id,function(value,anothervalue){})其中anothervalue代表another

方法与事件处理器:

1. 通过v-on指令监听dom，<button v-on:click='fn'></button>触发new Vue({methods:{fn:function(value){return value}}})中的fn方法,还可以穿入参数<button v-on:click="fn(1)"></button>
2. event.preventDefault() : 阻止默认动作，如果event.cancelable = falsed 该方法无效,js自带的方法
3. event.stopPropagation() : 阻止事件向上冒泡，js自带的方法
4. 事件修饰符 : v-on:click.stop 同event.stopPropagation()一样,v-on:click.prevent 同event.preventDefalut()
5. 按键修饰符 : v-on:keyup.enter='someMethod',keyup.enter表示按下enter后触发事件,常用的按键别名enter,delete,esc,tab,space,up,down,left,right

过渡效果 :

1. Vue.transition(id,{beforeEnter:function(){},enter:function(){},afterEnter:function(){},enterCancelled:function(){},beforeLeave:function(){},leave:function(){},afterLeave:function(){}，leaveCancelled:function(){}})来注册过渡事件，必须要有对应的css样式，及id-leave{//样式}id-enter{},id-transition{},<div transition='id'></div>来绑定对应的过渡效果注册对象
2. 过渡的css类名 : 

   1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

   2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。

   3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

   4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

3. 过渡流程详解 : <div v-if='show' transition='expand'></div> 当show变成true的时候.1,调用beforeEnter；2，在元素中添加类名v-enter；3，插入DOM；4，调用enter；5在元素中添加
4. 渐进过渡 : <div v-if='show' transition='expand' stagger='1000'></div>增加延迟stagger-enter 延迟进入 ，stagger-leave延迟离开

组件 :

1. 通过var myComponent = Vue.extend(constructer)创建组件构造器,tag为组件的名字，constructer为{},通过Vue.component(tag,myComponent)来注册全局组件
2. props 传递数据 : 组件之间作用域是封闭的，可以通过props来获取父组件的数据，例如Vue.component(my-component,{props:['msgMsg']},template:"<span>{{msg}}</span>"),html中使用自定义组件<my-component msg-m></my-component>解析成<span>//msg对应的数据</span>
3. 动态props: 通过v-bind:msgMsg="msg" ,msg为data绑定的值{{msg}}
4. Prop绑定类型 : v-bind:msgMsg = "msg",默认为绑定类型;v-bind:msgMsg.sync="msg"为双向绑定;v-bind:msgMsg.once="msg"为单向绑定；
5. 自定义事件 : new Vue({events:{}}),this.$on监听,this.$dispatch()派发事件,this.$broadcast()广播事件,this.$emit()在上面出发事件