1.基本格式
以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。
new Vue({
el:'#box',
//数据
data:{
key:'welcome vue',
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
//方法
methods:{
add:function(){
//push 添加元素
this.arr.push('tomato');
}
}
//计算属性
computed:{
//默认为get方法
b:function(){
//业务逻辑代码
return 2;
}
//内部可以实现set、get两个方法
c:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val-2;
}
}
},
components:{ //局部组件---详见组件
'my-aaa':Aaa
}
});
//钩子函数(生命周期)
created:function(){
alert('实例已经创建');
}
//自定义过滤器
Vue.filter('toDou',function(val,a,b){
return val<10?'0'+val:''+val;
});
//自定义指令
Vue.directive('red',function(){
this.el.style.background='red';
});
2.常用指令
双向数据绑定v-model:"key"
<input type="text" v-model="key">
将{key:value}于input双向绑定。
改动时其余部分的{{key}}也会随之替换。
循环v-for
<li v-for="value in arr">
{{value}}
</li>
value为内容、$index为索引、$key为字典(json)独有。
//针对json格式的数据还有以下写法
<li v-for="(k,v) in json">
{{k}} {{v}}
</li>
k为key、v为value
重复数据有事不予展示:track-by="$index/uid"添加索引
<li v-for="(k,v) in json" track-by="$index">
{{k}} {{v}}
</li>
显示隐藏v-show
data:{ //数据
a:true
}
<input type="button" value="按钮" v-on:click="a=false">
<div style="width:100px; height:100px; background: red" v-show="a">
v-show:true/false
false显示
条件渲染v-if
<div id="app" >
<p v-if='ture'>{{message}}</p>
</div>
v-if:true/false
true显示
区别
v-if是真实的条件渲染、当进行条件切换时、它会销毁和重建条件块的内容，并且它支持<template>语法
v-show的条件切换时基于css的display属、所以不会销毁和重建条件块的内容
当你频繁需要切换条件时，推荐使用v-show；否则使用v-if；
v-else
v-else必须与v-show/v-if连用
当其处在非渲染状态下执行v-else中的代码块
事件绑定v-on:
<input type="button" value="按钮" v-on:click="show()">
click可以换成任意事件
v-on:click与@click等价
自定义指令:directive
声明为red、调用时调用v-red
无参数
v-red
Vue.directive('red',function(){
//此处的this.el与vm.$el为同一个DOM元素。但是写法不同需要区分
this.el.style.background='red';
});
有参数
v-changeColor="'blue'"/"myColor"
Vue.directive('changeColor',function(color){
this.el.style.background=color;
});
元素指令
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
<div id="box">
<zns-red></zns-red>
</div>
事件对象
<input type="button" value="按钮" @click="show($event)">
$event结构体内部与原生相同
阻止事件冒泡
a).方法内部： ev.cancelBubble=true; (原生js)
b).@click.stop (vue功能)
阻止默认行为
a). ev.preventDefault(); (原生js)
b). @contextmenu.prevent (vue功能)//contextmenu为右键点击
键盘事件
- 默认
@keydown ------ $event ev.keyCode
@keyup
回车 (a). @keyup.13(b). @keyup.enter - 自定义键盘事件Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; <input type="text" @keydown.myenter="show">
- 属性
普通属性
<im src="{{url}}" alt=""> 数据双向绑定，但是会报一个404错误
<im v-bind:src="url" alt="">属性绑定，不会发404请求
v-bind:src="url"可以简写成:src="url"
1、
:class="[red]" red是数据 :class="[red,b,c,d]"
2、
:class="{red:a, blue:false}" a=true
3、
:class="json" data:{ json:{red:true, blue:false} }style :style="json" backgroundColor:'gray' //复合样式，采用驼峰命名法
模板
{{msg}}----数据更新模板变化
{{*msg}}----数据只绑定一次
{{{msg}}}----HTML转意输出(< h3>aaa</ h3>)
过滤器
过去模板中的内容并加以改变
{{msg| filterA}} {{msg| filterA | filterB}}
uppercase --- 大写
lowercase --- 小写
capitalize --- 首字母大写
currency --- 美元符号
currency "人民币:" --- 自定义参数
debounce 2000--- 配合事件，延迟执行
- 数组配合使用过滤器:
limitBy 取几个/取几个 从哪开始
filterBy'关键词' 过滤数据
orderBy 排序
json 展示json全部数据
1 -> 正序
-1 -> 倒序 自定义过滤器
Vue.filter('toDou',function(val,a,b){ return val<10?'0'+val:''+val; }); {{a | toDou 1 2}}
禁止{{花括号}}显示
- v-cloak<style> [v-cloak]{ display:none; } </style> <div v-cloak> </div>
- v-text:直接输出 <span v-text="msg"></span>
- v-html:转译输出 <span v-html="msg"></span>
交互
get
获取普通文本数据
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据
this.$http.get('url',paramsDic).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
jsonp采用的get方式
this.$http.jsonp(''https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'',{
word:'a'
},{
//callback名字，默认名字就是"callback"
jsonp:'cb'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
简写
this.$http({
url:地址
data:给后台提交数据,
//method默认为get
method:'get'/'post'/'jsonp'
//如果method改为jsonp、需要声明cbName
jsonp:'cb' //cbName
}).then(function(res){
//成功
},function(res){
// 失败
});
生命周期(钩子函数)
1.0
created -> 实例已经创建
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
2.0
beforeCreate ->实例初始化之后。
created -> 实例已经创建。
beforeMount -> 编译之前
mounted -> 编译之后 √
activated -> keep-alive 组件激活时调用。
deactivated -> keep-alive 组件销毁时调用。
beforeUpdate -> 数据更新之前
update -> 数据更新之后
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
通常在√时、vue.js已可以使用
created:function(){
alert('实例已经创建');
}
计算属性:computed
computed:{
//默认为get方法
b:function(){
//业务逻辑代码
return 2;
}
//内部可以实现set、get两个方法
c:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val-2;
}
}
}
{{b}}
计算属性必须有返回值
vue实例简单方法
vm.$el -> 获取元素
vm.$el.style.background='red';>
vm.$data -> 获取data数据对象
console.log(vm.$data.a);
vm.$mount -> 手动挂载vue程序
vm.$mount('#box');
vm.$options -> 获取自定义属性
vm.$options.customMethods.show();
vm.$destroy -> 销毁对象
vm.$destroy
vm.$log(); -> 查看现在数据的状态
vm.$watch ->监听数据变化
浅度监听
vm.$watch('a',function(){
this.b=this.a+100;
});
深度监听
vm.$watch('json',function(){
alert('发生变化了');
},{deep:true});
登录 | 立即注册