View层 ---> html标签 | Model层 ---> data数据
一．v-for：
1.数组： (两种：数据数组，对象数组) 可选参数索引index
1.arr:['apple','banana','pear']
<li v-for="(item,index) in arr">{{ item+index }}li>
2.arrObj:[ {name:'hanna'},{name:'lsb'},{name:'bobo'} ]
<li v-for="(item,index) in arrObj">{{ item.name+index }}li>
push(); pop(); shift(); unshift(); splice(); sort(); reverse()
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
splice() 方法用于插入、删除或替换数组的元素。(改变原始数组
2.对象： 可选参数键名 key, 索引 index
obj:{ name:'haha', age:21, sex:'woman'}
<li v-for="(item,key,index) in obj">{{ item+"-"+ key+"-"+index }}li>
二．v-show / v-if :
布尔值
三．事件
1.事件对象：
中$ event 是事件对象
使用事件对象show(e) { alert(e.clientX) }
2.事件冒泡：
<div id="box" @click="alertion2">
<button @click="alertion1">冒泡button>
点击内部按钮，触发alertion1后，再触发alertion2
3.阻止事件冒泡：
1).事件对象（e.cancelBubble=true）
<div id="box" @click="alertion2">
<button @click="alertion1($event)">冒泡button>
alertion1(e) { alert("内部"); e.cancelBubble=true; }
2). vue自带的.stop（推荐！）
<div id="box" @click="alertion2">
<button @click.stop="alertion1">冒泡button>
4.事件默认行为：
1). 事件对象 ( e.preventDefault( ); )
<button @contextmenu="pre($event)">阻止默认行为button>
pre(e) { alert(11); e.preventDefault();}
2). Vue自带的.prevent（推荐！）
<button @contextmenu.prevent="pre1">prevent阻止默认行为button>
5. 键盘事件：
1). 事件对象 ( e.preventDefault( ); )
<input type="text" @keydown="enter($event)">
enter(e) { if (e.keyCode == 13){ alert("您按下回车键了");}}
2). Vue自带的（推荐！）
（.enter/.13、up、down、left、right）
<input type="text" @keydown.13="enter"> 或者
<input type="text" @keydown.enter="enter">
四．属性
1. 属性绑定：v-bind（ 简写成 ：）
效果与v-bind同，但会报404错(url是数据)
( url是data中的数据) ! ! * * * 推荐使用
2. class和style
1). class：
数组 : class=”[red,a,b,d]” 值为data中的数据red: ’red’类
对象 : class=”{ red：true, blue:false }” 值为布尔类型
: class=”json” json: { red:true, blue:false }
:disabled=isDisabled. // isDisabled是布尔值
2). style：
注意：复合样式，采用驼峰命名法
数组:style=”[ a,b,d]”值为data中的数据 a: {color: ’red’}
对象:style=”{color:‘#fff’,backgroundColor:’purple’}”
:style=”ajson” ajson:{ color:’#fff’,background:’#000’ }
五．模板
1. {{ msg}} 双向绑定：数据更新，模板会跟着更新
如果数据展示后，不需要更新，数据只绑定一次：
{{msg}}
2. v-html 转义模板
六．过滤器 (过滤模板数据)
1.系统自带的过滤器，例如转化大写：{{ ‘welcome’| uppercase }}等 ，全都被2.0废除了，过滤器需要自定义
eg：？？？？？？？？？？？？？？？？？？？？？？？？？？？？
2. 自定义过滤器：
Vue.filter(name,function(input){
});
如果带参数*{{date | formatDate('YY-MM-DD', timeZone)}}
eg：单位数字变成双位数字：
{{a |toDouble}}
window.onload=function(){
Vue.filter('toDouble', function(input){
returninput<10?'0'+input:input;
})
newVue({
el:'#box',
data:{
a:9
}
});
}
• 时间戳一般说成XXX的时间戳，是指XXX发生或者处理的时间，这个时间被记下来，存在某处备查。
3. 时间转换器：
4. 过滤html标记：
5． 双向过滤器：
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[ ^< ]+>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
七．交互(ajax)
1.引入vue-resource库, 相当于给new Vue添加了一个方法或对象
• vue-resource是交互(ajax)的前提
2.谷歌跨域：访问本地文件(非服务器文件)，Chrome会产生跨域问题
跨域：(面试)
https://segmentfault.com/a/1190000011145364
协议，域名，端口，但凡有一个改了，就是跨域
3.解决跨域问题： http://blog.csdn.net/sjohnny/article/details/70256172
1) chrome `右键`->`属性`->`快捷方式`处添加`--allow-file-access-from-files`
操作如下图: http://blog.csdn.net/sjohnny/article/details/70256172
2) 将本地文件转换成服务端的文件（解决访问本地文件跨域的问题）
sublime配置一个sublimeServer插件来使用
配饰sublimeServer来实现将本地.html文件以服务的形式打开
https://www.wenji8.com/p/353U26z.html
3)使用火狐浏览器
-------------------------------------------------------------------------------------------------------
4. 交互get ：（默认）
获取一个普通文本数据:
this.$http.get(‘a.txt’).then(function (res) {
alert(res.status);
alert(res.data);
},function () {
alert(res.status);
});
给本地服务器发送数据:（* ）-------à 跨服务器会产生跨域问题
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.status);
},function(){
})
-------------------------------------------------------------------------------------------------------
5. 交互post ：
给本地服务器发送数据 :（ * ） -------à 跨服务器会产生跨域问题
this.$http.post('post.php',{
a:1,
b:2
},{
emulateJSON:true
}).then(function(res){
alert(res.status);
alert(res.data);
},function(){
alert(res.status);
})
-------------------------------------------------------------------------------------------------------
5. 交互jsonp ：
给本地服务器之外服务器发送数据 :（ * ）-----> 不会跨域
eg1: (
360网站)
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
搜索a后，在network->js中拷贝link
address，结果如下:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a 接口
https://sug.so.360.cn/suggest 地址
word=a 数据
操作代码：
this.$http.jsonp('https://sug.so.360.cn/suggest',{
word:
'a' 数据}).then(function(res){
// alert(res.status);
alert(res.data.s);
},
function(res){
alert(res.status);
})
eg1: ( 百度)
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=25263_1439_24866_21126_17001_20240_25177_25145_20929&req=2&csor=1&cb=jQuery110204777080402977609_1512525981208&_=1512525981212
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su 地址
wd=a 数据
cb ---> callback 需要设置属性
操作代码：
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' // 重点：cb为callback的名字}).then(function(res){
alert(res.status);
alert(res.data.s);
},
function(res){
alert(res.status);
})
-------------------------------------------------------------------------------------------------------
6. 交互综合使用：(默认是get)
this.$http({
url： // 后台接口的地址
data: { //给后台提交数据
//根据后台接口文件发送数据
act：‘add’，
content：this.XX
}
methods：post / get / jsonp
jsonp: ’cb’ //cbName
}).then(function(res){
//返回成功后的json格式文件
var json=res.data;
if( ){
}
});
八．生存周期
1. 钩子函数：
a). created à 实例对象成功,new Vue创建以后执行
编译的两个阶段:
b). beforeCompile à 编译之前
c). compiled à 编译之后
d). ready à 数据插入到文档中 √
e). beforeDestroy à 销毁之前
f). destroyed à 销毁之后
v-cloak （一般用于一大段）
防止花括号中的数据闪烁，在样式表中设置 [v-cloak]
{ display: none }
九、计算属性
computed:{
b:function(){ //默认调用get
return 值
}
}
• 必须有return值
• 默认是getter方法，即—> 默认只能获取计算属性的值，如果想为计算属性直接赋值，则会报错。
十、VUE实例化用法
var vm=new Vue({})
• vm.$el à 获取了元素或节点(例如divElement)
eg： vm.$el.style.background='red';
• vm.$data à 获取了数据对象(就是data)
[if !supportLists]• [endif]Vm.$mount(‘#box’); à 手动挂载
new Vue({ }).$mount(‘#box’); à 手动挂载
[if !supportLists]• [endif]在new Vue({ aa:11 }) 中自定义的属性相当于静态属性 à 自定义属性,
若想访问自定义的属性, vm.$options.aa
(model层中的属性，即在data数据中自定义的)
[if !supportLists]• [endif]在new Vue({ show:function(){alert(); } })中自定义方法 à 自定义方法,
调用方法：vm.$options.show();
[if !supportLists]• [endif]vm.$log() à 打印现在data中的数据状态
十一、关于循环
v-for=”value in data”
循环如果有重复数据，vue1.0是不行的，需要加track-by
vue2.0可以有
十二、自定义指令
属性:(View层中的属性，即在html标签中自定义的)
Vue.directive(指令名称,function(参数){
this.el ->原生DOM元素
});
指令名称: 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}); //深度监视
------------------------------------------------
vue组件:
组件间各种通信
slot
vue-loader webpack .vue
vue-router
网友评论