**vue生命周期:
钩子函数:
created -> 实例已经创建
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
new Vue({
el:'#box',
data:{ //数据
},
methods:{//方法
},
created:function(){
alert('实例已经创建');
},
created:function(){
alert('编译之前');
},
created:function(){
alert('编译之后');
},
created:function(){
alert('插入到文档中');
},
created:function(){
alert('销毁之前');
},
created:function(){
alert('销毁之后');
}
});
常用指令:
v-model 一般表单元素(input) 双向数据绑定
循环:
当会循环的数组需要重复显示动态插入的相同的数据的时候使用track-by="索引"
track-by='索引' 提高循环性能
<li v-for="name in arr" track-by="{{index}}">
{{$index}}
<li>
<li v-for="name in json">
{{$index}} {{$key}}
<li v-for="(k,v) in json">
{{k}} {{v}} {{index}} {{key}}
事件:
v-on:click="函数"
@click="函数"
@click/mouseout/mouseover/dblclick/mousedown.....
new Vue({
el:'#box',
data:{ //数据
show:true
},
methods:{
show:function(){ //方法
this.show = false
}
}
});
显示隐藏:
v-show=“true/false”
事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop="函数" 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown
@keyup
<button @keyup="key($event)">键盘事件</button>
new Vue({
el:'#box',
data:{},
methods:{
key:function(ev){
ev.keyCode //键盘的值
}
}
});
常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
属性:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来,但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来,不会发404请求
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是data里的数据
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
data:{
json:{red:a, blue:false}
}
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式,采用驼峰命名法 例backgroundColor
:style="json"
模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} 可以转意输出HTML
<span>{{msg}}</span> = <span v-text="msg"></span>
{{{msg}}} = <span v-text="msg"></span>
ajax交互
如果vue想做交互需引入: vue-resouce.js文件
有两种写法
this.$http.get().then(function(){},function(){})
this.$http({
url:地址,
data:给后台提交数据,
method:'get'/post/jsonp,
jsonp:'cb' //cbName,
}).then(function(){},function(){});
get:获取一个普通文本数据:
new Vue({
el:'#box',
data:{ //数据
},
methods:{
getData:function(){
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
get数据给服务
new Vue({
el:'#box',
data:{ //数据
},
methods:{
getData:function(){
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
post数据给服务器:
new Vue({
el:'#box',
data:{ //数据
},
methods:{
postData:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true //用post需加上这一句
}).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
new Vue({
el:'#box',
data:{ //数据
},
methods:{
getData:function(){ 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);
});
}
}
});
计算属性的使用:
* computed里面可以放置一些业务逻辑代码,一定要return
new Vue({
el:'#box',
data:{ //数据
a:1
},
computed:{
b:{
get:function(){ //return 返回的就是b的值
return a+1
}
set:function(val){ //可设置其他属性的值,val就是b
return this.a = val
}
}
}
});
vue实例化后自带的一些简单方法:
var vm = new Vue();
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序
vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
过滤器:-> 过滤模板数据
系统提供一些过滤器:
vue自带的过滤器
uppercase 过滤为大写
lowercase 过滤为小写
capitalize 过滤为首字母
{{msg| filterA}}
{{msg| filterA 参数}}
{{msg| filterA | filterB}}
currency 钱
参数:
第一个参数 {String} [货币符号] - 默认值: '$'
第二个参数 {Number} [小数位] - 默认值: 2
配合事件,延迟执行 debounce 2000
<input type="button" @click="show | debounce 2000">
数据配合使用过滤器:
limitBy 参数(取几个) 取多少个
limitBy 取几个 从哪开始 取从哪开始的多少个
filterBy ‘谁’ 取包含哪个字母的
orderBy 排序 按参数排序
orderBy 取哪个 1/-1 取哪个字母的正序或倒序
1 -> 正序
2 -> 倒序
<li v-for="val in arr | limitBy 2"></li>
new Vue({
el:'#box',
data:{ //数据
arr:[1,2,3,4,5]
}
});
自定义过滤器: model ->过滤 -> view
Vue.filter(过滤器名,function(input){
//过滤逻辑
});
时间转化器
过滤html标记
双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
数据 -> 视图
model -> view
view -> model
自定义指令:
属性:
Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
});
<div v-red="参数"></div>
指令名称: v-red -> red
* 注意: 必须以 v-开头
自定义元素指令:(用处不大)
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
@keydown.up
@keydown.enter
@keydown.a/b/c....
自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
监听数据变化:
vm.$el/$mount/$options/....
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视**