1、 常用指令：
v-for v-bind v-on v-show v-if v-model
v-for {{$index}} => 索引值
{{$key}} => key值
$event 默认第一个参数就是咱们的事件对象
键盘事件 @keydown/up
@keyCode
@keydown.enter
@keydown.65.66.68
@keydown.left...
类型 v-bind:class="myDiv"
data:{myDiv:['red','shadow']}
data:{
myDiv:{
'red':true,
'shadow':true,
'animate':true
}}
样式 :style='[init,green]'
data:{
init:{
'width':'200px',
'height':'200px',
'background':'red'
},
green:{
"background":'green'
}
}
2、 只渲染一次 {{*msg}}
3、 阻止冒泡：
原生： event.stopPropagation(); event.cancelBubble = true;
vue: @click.stop
阻止默认事件：
原生： event.preventDefault(); event.returnValue = false;
4、 含有元素的转化 {{{ msg }}}
msg: <span>hello everyOne</span>
5、 选项卡 通过$index 和 index比较显示哪一个，通过点击将index赋值给全局变量进行比较
6、 前端包管理工具 bower npm install bower -g
bower 只是npm包管理器中的其中一个包 - 包管理器
bower info vue<->版本
如果直接下载 默认是 最高的版本
bower i 下载库的名字#版本号
7、 vue-resource
数据请求： this.$http.get({地址,{参数}})
.then(function(){})
.catch(function())\
this.$http.post({地址,{参数},{emulateJSON: true}})
.then(function(){})
.catch(function())
jsonp跨域： this.$http.jsonp({地址},{参数},{jsonp:"cb"})
.then(function(){},function(){})
百度跨域: this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
wd: this.wd
},{
jsonp: "cb"
}).then(function(data){
console.log(data);
this.arr = data.data.s;
},function(){
})
8、 过滤 filterBy toUpperCase toLowercase limitBy
自定义过滤器： Vue.filter("名称",fucntion(){
return "返回数据"
})
自定义双向过滤器： Vue.filter("名称",{
read: function(){
首次渲染读取
},
write: function(){
更改数据渲染
}
})
{{msg | 过滤器的名称}}
过滤器 就是 把原来的数据 加工一下变成 想要的
vue内置过滤器
capitalize - 首字母变大写
uppercase - 所有的英文字母变大小
lowercase - 所有的英文字母变小写
currency - 帮咱们变成货币形式输出
传参
过滤器名 "参数一" "参数二" "参数三"
第一个参数 就是货币符号 默认 $
第二个参数 就是 小数位 默认 2
pluralize
英文有复数 复数 + s
debounce
做等待处理 默认是300毫秒
也可以自己去 处理时间 传参
limitBy
截取
第一个参数 截取几个
第二个参数 从第几个开始
filterBy
过滤 -》 给出关键字 帮咱们 过滤掉 没有关键字的
orderBy 排序 生序降序
9、 自定义指令： 名称=val赋值
Vue.directive("名称",function(val){})
双向赋值： Vue.directive("名称",{
bind(){
初始化
},
update(val){
数据更改
}
})
10、v-cloak 解决闪烁的问题，自定义属性加在标签上，<div v-cloak></div>，当vue加载完成的时候会删除v-cloak属性，所以只需要再vue加载前将其模块隐藏即可，
c-cloak：{display：none;}
11、元素指令 <ele></ele
Vue.elementDirective("ele",{
bind(){
初始化
},
update(){
会报错提示使用组件
}
})
12、track for循环添加一样的数据会报错，添加track-by="$index"
13、侦听属性
var a = new Vue({
el:'body',
data:{
a:'',
b:'',
c:''
}
});
a.$watch('a',function(){
this.c = Number(this.a) + Number(this.b);
})
14、实例属性
$mount('') 这个级别没有el高
$data 就是data
$el 可以帮咱们获取原生的dom对象
$options 获取自定义属性/正常属性
$log 可以快速帮咱们看到data的内容
$destroy 销毁对象
15、this在声明周期上的指向es6
new Vue({
el:"body",
data:{
msg:"hello vue",
arr:["Mary","Hery","Jack","Lucy"],
arrObj: [{
info: "my name is Mary,age is 18"
},{
info: "my name is Hery,age is 16"
},{
info: "my name is Jack,age is 20"
},{
info: "my name is Lucy,age is 25"
}],
index: 0
},
ready(){
console.log(this);
var that = this;
setInterval(()=>{
console.log(this);// 指向这个vue对象
that.index++;
that.index == that.arr.length && (that.index = 0);
},1000)
setInterval(function(){
console.log(this);// 指向window
that.index++;
that.index == that.arr.length && (that.index = 0);
},1000)
setInterval(function(){
console.log(this);// 指向vue对象
that.index++;
that.index == that.arr.length && (that.index = 0);
}.bind(this),1000)
}
})
// setInterval，setTimeout里面的this在普通函数里面this指针发生改变指向window，
而在箭头函数上this指针不会发生改变还是指向vue对象