事件:
事件冒泡行为:
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>