事件：
事件冒泡行为：
1、@click="show($event)"
show:function (ev) {
ev.cancelBubble=true;
}
2、@click.stop="show()"
事件捕获行为：
<div v-on:click.capture="doThis">...</div>
连用：<a v-on:click.stop.prevent="doThat"></a>
事件默认行为：
1、ev.preventDefault();
2、@contextmenu.prevent
键盘事件行为：
1、@keydown 可以有 $event ev.keycode
2、@keyup
3、回车键@keyup.13或者@keyup.enter;@keydown.13,@keydown.enter
同理有上下左右键up,down,left,right.还有space,esc,delete,tab
属性：
v-bind:src="" width/height/title等
简写：：src=""
<img :src="url" alt=">
class与style:
:class v-bind:class=""
:style v-bind:style=""
:class="[r,b,c]" r,b,c是data中的数据
:class="[r]"
:class="{r:true}"添加上class
:class="{r:false,b:true}"没添加上class r,只添加了b
模板：
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转义输出
过滤器：
在1.0中系统提供一些过滤器：
capitalize,uppercase,lowercase,currency 表示钱，debounce:配合事件,延迟执行 ，json:转化为json格式。
在2.0中内置过滤器全部删除了。
例： new Vue({
el:'#box',
data:{
a:{name:'strive',age:'18'}
}
});
<div id="#box">
{{a |json}}
</div>
例： {{'welcome'|capitalize}} {{'welcome'|uppercase}} {{'WELCOME'|lowercase|capitalize}}
{{ message | filterA }}
{{ message | filterA | filterB }}
{{msg|currency '参数' }}
例： {{12|currency '￥'}} 结果 ￥12.00
{{12|currency}} 结果 $12.00
例： <input type='text' @keyup="show | debounce 1000">表示1000毫秒后执行函数show();
数据配合使用过滤器：
limitBy:限制几个
使用：limitBy 参数 ------>一个参数表示限制几个
limitBy 参数 参数 ------>两个参数，第一个表示限制几个，第二个表示开始位置
例：<li v-for="val in arr |limitBy 2">{{val}}</li>//显示前两个
<li v-for="val in arr |limitBy 2 1">{{val}}</li>//从第二个开始显示到第三个
filterBy 参数 过滤数据
<li v-for="val in arr |filterBy 'a'">{{val}}</li>//如果arr数组中包含["background","blue","apple","red"],则会输出 background,apple
orderBy 参数 排序
orderBy 1从小到大排序 即正序
orderBy -1倒序
自定义过滤器1.0：
Vue.filter('名称',function(input,a,b){
return ;
});
例：{{input| toDo a b}}
Vue.filter('toDo',function(a,b){});
Vue.filter('date',function (input) {
var oDate=new Date(input*1000);
return oDate.getFullYear()+'-'+oDate.getMonth()+1+'-'+oDate.getDate()+' ''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
自定义过滤器2.0：
{{input| toDo (a, b)}}
交互：
需要引入vue-resource.js, ajax php
this.$php.get()/post()/jsonp()
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
this.$http({
url:地址
data:给后台提交数据
method:默认'get',可以添加'post'/'jsonp'
jsonp:'cb' //cbName
});
vue的生命周期：
钩子函数：1.0
create：实例已经创建
beforeCompile:编译之前
compiled:编译之后
ready:插入到文档中
beforeDestroy:销毁之前
Destroyed:销毁之后
在2.0中变化：
beforeCreate 组件刚刚被创建，属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 编译模板之前
mounted 编译模板之后
beforeUpdate 组件更新之前
updated 组件更新之后
beforeDestroy 组件销毁之前
destroyed 组件销毁之后
用户会看到花括号：
1、 v-cloak ：防止闪烁。比较大的段落中使用。添加到标签中类似属性
在style中将v-cloak属性 display:none;
2、用v-text代替{{}}
3、用v-html代替{{{}}}
----------------------------------------------------------------------------
计算属性的使用：
data:{
t1:'',
},
computed:{
t2:function () {//默认为get方法
return t1+"bbbb";
}
},
t2也是属性，computed中放置业务逻辑代码，return 值很重要
computed:{
t2:{
get:function(){
return t1+"bb";
},
set:function(){
this.t1='aaaa'
}
}
},
---------------------------------------------------------------------
vue实例：
var vm=new Vue({});
vm.$el：元素
vm.$data：就是数据data
vm.$mount:手动挂载vue程序
vm.$options.aabb:aabb为自定义属性，options专门调用自定义属性
vm.$destroy:销毁对象
vm.$log():查看现在数据的状态
--------------------------------------------------------
关于循环：
v-for="value in data"
在vue 1.0中value会有重复数据 ，当需要加载重复数据是，需要加track-by='索引' 可以提供循环性能
例如<li v-for="(value，index) in arr" track-by="index">
在2.0中for循环默认会把重复数据加载出来。
自定义指令：
Vue.directive(指令名称(red)，function(参数el){
this.el:原生的DOM元素
});
<div v-red="参数"></div>
指令名称：v-red ----->写成red
自定义元素指令:用处不大
Vue.elementDirective(元素名称，{bind:function(){}});
自定义键盘指令1.0中：
Vue.directive('on').keyCodes.ctrl=17//自定义ctrl键，通过@keyup.ctrl=""来使用
在2.0中：Vue.comfig.keyCodes.ctrl=17;
监听数据变化：
vm.$el/$mount/$options/...
vm.$watch(name,fncb);浅度
vm.$watch(name.fncb,{deep:true});//深度监视
---------------------------------------------------
vue过渡动画：
本质是css3：transition，animation
<div id="div1" v-show="bSign" transition="fade"></div>
动画：
名称规定： .fade-transition{
transition: 1s all ease;
}
进入动画： .fade-enter{
opacity:0;
}
退出动画： .fade-leave{
opacity:0;
}
-----------------------------------------------
vue组件：
全局组件：
组件里面放数据，函数必须返回一个对象json。注意要确保在初始化根实例之前注册了组件：
Vue.component('my-component',{
data(){
return {msg:'A custom component!'}
},
methods:{
change(){
this.msg='hello';
}
}
template: '<div @click="change" v-text="msg"></div>'
});
new Vue({
el:'#box'
})
使用：<my-component><my-component/>
局部组件： 通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
new Vue({
el:'#box',
components:{
'my-component':Child
}
});
-------------------------------------------------------
配合模板使用：
方式一：
<script type="x-template" id="aaa">
<h2 @click="change" v-text="msg"></h2>
<ul>
<li>1111</li>
<li>1111222</li>
<li>111333</li>
li>4444</li>
</ul>
</script>
方式二：
<template id="aaa">
<ul>
<li v-for="value in arr"></li>
</ul>
</template>
new Vue({
el:'#box',
components:{
'my-component':{
data(){
return {
msg:'A custom component!',
arr:['aa','bb','cc']
}
},
methods:{
change(){
this.msg='hello';
}
},
template: '#aaa'
}
}
});
动态组件：
<component :is="组件名称"></component>