vue： 一个mvvm框架（库），和angular相似
比价容易上手，小巧
----------------------------------------------------------------
vue与angular 的区别：
vue——简单，易学
指令以v-xxx;
一片html代码，配合上json，再new出来vue示例
是个人维护项目
适合：移动端项目，小巧
vue的发展的势头很猛（github上）
angular——上手比较难
指令以ng-xxx;
所有的属性和方法都挂到$scope身上
angular由Google维护
适合pc端的项目
vue与angular的共同点：都不兼容低版本的IE(IE8以下不兼容）
----------------------------------------------------------------------
vue里的常见指令：
指令是指：扩展了html标签功能，
angular的指令：ng-model ng-controller
1）v-model: 一般用于表单元素（input） 双向数据绑定
2）v-for(循环)：
v-for='name in arr' {{name}} {{$index}}
v-for='name in json' {{$key}} {{name}} {{$index}}
关于循环的补充：
v-for="value in data"
但是在某些情况下循环会有重复的数据，v-for循环中重复数据默认是不能重复添加的
解决这个问题需要使用track-by="索引"即可
如：在下面的例子中如果没有track-by="$index"，当第一单击按钮时能够push进去数据，
从而使视图也更新，但是当第二次再点击按钮时，就不能更再添加数据了，
所以要使用track-by="$index"来添加重复数据
<div id="box">
<input type="button" value="按钮" @click="add">
<ul>
<li v-for="val in arr" track-by="$index">{{val}}</li>
</ul>
</div>
var vm = new Vue({
data:{
arr:['apple','pear','banana']
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
}).$mount('#box');
注：track-by="$index/uid" 索引可以是$index也可以是数据库的id等
3）v-text指令：可以防止花括号出现
在我们数据加载的过程中，由于数据加载需要一些时间，常常会出现模板{{}}闪现的不好体验，
而用v-text指令代替{{}}可以很好的解决这个问题。
使用模板的写法：<span>{{msg}}</span>
使用v-text指令的写法：<span v-text="msg"></span> 可以防止花括号出现
4）v-html指令：是一个转义指令，当我们的数据或者用户输入中，含有标签等可以转义的字符，
v-html就可以将里面的标签进行转义，不会原样输出，造成一些不好的用户体验。
a) <span v-html="msg"></span> --->v-html进行转义和防止花括号出现
b) {{{msg}}} <span>{{{msg}}}</span> --->另一种对数据进行转义的方法，与v-html的转义效果相同
补充：防止花括号闪烁的另外一种方法：
当访问响应慢时用户有时会看到花括号的标记，这时为最外层div加上v-cloak属性，
再为v-cloak属性写一个display:none的样式，防止看到花括号的出现
v-cloak：一般用在比较大的段落
<style>
/*css属性选择器*/
[v-cloak]{
display: none;
}
</style>
<div class="reply" v-for="item in msgData" v-cloak>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time|date}}</span>
<span class="handle">
<a href="javascript:;" class="top">{{item.acc}}</a>
<a href="javascript:;" class="down_icon">{{item.ref}}</a>
<a href="javascript:;" class="cut">删除</a>
</span>
</p>
</div>
5）自定义指令:
a)自定义属性指令：
Vue里面通过Vue.directive自定义属性
Vue.directive('名称',function(参数){ //默认调用的是bind,可以简写,
//操作;
//(this.el -->原生的DOM元素)
});
<div v-red="参数"></div> //可传参,参数可来自于vue里的data
指令名称：v-red -->red
*注意:指令名称必须以v-开头
示例1：自定义指令,改变背景色
<div id="box">
<span v-red="msg">11111111111</span>
</div>
<script type="text/javascript">
Vue.directive('red',function(){ //dom里面是v-red,这里是red
this.el.style.background='red';
});
var vm = new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
</script>
示例2：自定义指令,完成拖拽:
<div id="box">
<div class="box2" :style="{ 100px;height: 100px;background: blue;position: absolute;right: 0;top: 0;}" v-drag></div>
</div>
<script type="text/javascript">
Vue.directive('drag',function(){ //以下是完成拖拽效果的代码
var odDiv=this.el;
odDiv.onmousedown=function(ev){
var disX=ev.clientX-odDiv.offsetLeft;
var disY=ev.clientY-odDiv.offsetTop;
document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
odDiv.style.left=l+'px';
odDiv.style.top=t+'px';
};
document.onmouseup=function(ev){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
var vm = new Vue({
el:'#box',
data:{
}
});
</script>
b)自定义元素指令:(用的很少,了解即可)
Vue1.0通过Vue.elementDirective自定义元素指令
Vue.elementDirective('元素名称',{
bind:function(){ //这里不再遵循上面自定义属性指令的简写方式
//javascript语句;
}
});
示例：自定义元素指令
css:
zns-red{
100px;
height: 100px;
background: #ccc;
display: block;
}
html代码:
<div id="box">
<zns-red></zns-red>
</div>
vue代码:
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
var vm = new Vue({
el:'#box',
data:{
}
});
--------------------------------------------------------------------------------
事件:
1）基本的事件：v-on:click='show()' 推荐使用 @click='show()'
还有v-onmouseover v-onkeyup/down 等等
2）显示隐藏事件：v-show="false/true"
3）事件对象：@click="show($event,12)" //$event 包含了这个事件的所有的方法
例：methods：{
show:function(ev,b){ //可传一个参数，也可传两个参数，但是顺序不能弄颠倒
alert(ev.client.X)
}
}
4）事件冒泡：
阻止冒泡：在内层阻止，和事件对象$event一起使用
@click="show($event)"
methods：{
show:function(ev){ //可传一个参数，也可传两个参数，但是顺序不能弄颠倒
alert(ev.client.X);
ev.cancelBubble=true;
//ev.stopPropagation();
}
}
推荐使用：@click.stop="show($event)"
5）默认行为(事件)：
阻止默认行为：a) ev.preventDefault();
b) @contextmenu.prevent 推荐使用
6）键盘事件：@keydown/keyup $event ev.keycode(捕获任何一个键的键码)
常用键： 回车：a) if(ev.keycode)==13
b) @keyup.13="show()";
c) @keyup.enter="show()" 推荐使用
上、下、左、右
@keyup/keydown.left="show()"
@keyup/keydown.right="show()"
@keyup/keydown.up="show()"
@keyup/keydown.down="show()"
7）自定义键盘事件(键盘上的按键vue没有全部封装)
上面介绍的事件vue封装了：
@keydown.up/down
@keyup.up/down
@keydown.enter
@keydown.a/b/c........
有些键盘按键vue并没有完全封装：
@keydown.ctrl没有封装:
<input type="text" @keydown.ctrl="show()">
@keydown.17封装了(ctrl的键码为17)
<input type="text" @keydown.17="show()">
自定义键盘事件:
Vue.directive('on').keyCodes.ctrl=17;
<input type="text" @keydown.ctrl="show()">
<input type="text" @keydown.ctrl="show() |debounce 2000"> //延迟输出
------------------------------------------------------------------------------------
绑定属性：用v-bind绑定属性 v-bind:src="url" :width/height/src/title="wd"
1）不同绑定属性方法的优缺点：
<img src="{{url}}" alt=""> 效果能出来，但是在控制台会报一个404的错误
<img v-bind:src="url" alt=""> 效果能出来，不会出现404的错误
<img :src="url" alt=""> 推荐使用简写
2）特殊属性：class和style
1) :class="[red,b]" []括住，表示red和b都是data里的数据
2) :class="{red:true,blue:false}" {}括住，表示red和blue是class
:class="{red:a,blue:b}" red和blue的值可以是true或false，也可以是数据
3) :class="json"
data:{
json:{red:true,blue:false}
}
a) :style="[c]"
b) :style="[c,d]" 注意：复合样式采用驼峰命名法例如backgroundColor
c) :style="json"
-------------------------------------------------------------------
模板：
{{msg}} 数据更新，模板也更新
{{*msg}} 这个数据不会被绑定，数据更新时，模板不会更新
{{{msg}}} html转义输出
---------------------------------------------------------------------
Vue1.0常见的过滤器-->过滤模板数据
1）系统提供的一些过滤器
{{msg|filterA}} {{msg|filterA|filterB}}
{{'welcome'|uppercase}} 小写转换成大写
{{'WELCOME'|lowercase}} 大写转换成小写
{{'welcome'|capitalize}} 首字母转换成大写
{{a|json}} json过滤器,使json对象能够显示出来
{{'WELCOME'|uppercase|capitalize}} 多个过滤器同时使用
钱的标志：{{12|currency}} --->$12.00
传参：{{12|currency "￥"}} ----> ￥12.00
2）与事件配合使用的过滤器
debounce -->配合事件使用，表示延迟
<input type="text" @keyup="add|debounce 2000">
3）与数据配合使用的过滤器
a)limitBy -->限制几个数据，可接受两个参数
limitBy(取几个 从第几个开始取) 默认从0开始取,一般与数组结合使用
<li v-for="val in arr | limitBy 2">{{val}}</li> //显示两条数据1,2
<li v-for="val in arr | limitBy 2 1">{{val}}</li> //显示两条数据2,3
<li v-for="val in arr | limitBy 2 arr.length-2">{{val}}</li> //显示两条数据4,5
data:{
arr:[1,2,3,4,5]
}
b)filterBy -->过滤数据
filterBy接受的参数既可以是数据，也可以是变量
<li v-for="val in arr | filterBy 'o'">{{val}}</li> //显示含有'o'的数据
<input type="text" v-model="arr"> //显示含有文本框中内容的数据
<li v-for="val in arr | filterBy a">{{val}}</li>
data:{
arr:['with','height','background','oppo'],
a:''
}
c)orderBy -->对数据进行排序
<li v-for="val in arr | orderBy 1">{{val}}</li> //按正序进行排序
<li v-for="val in arr | orderBy -1">{{val}}</li> //按倒序进行排序
<input type="text" v-model="arr"> //按文本框中输入内容进行排序(输入1或-1)
<li v-for="val in arr | orderBy a">{{val}}</li>
data:{
arr:['with','height','background','oppo'],
a:''
}
4）自定义过滤器
如何自定义过滤器？
Vue.filter('名称',function(input){ //默认接收的第一个参数是input，是输入的意思
return 操作
});
示例1：
<div id="box">{{a | toDoch}}</div>
<script>
Vue.filter('toDoch',function(input){ //默认接收的第一个参数是input，是输入的意思
return input<10?'0'+input:''+input;
});
var vm = new Vue({
el:'#box',
data:{
a:9
}
});
</script>
示例2：时间转化器：
<div id="box">
{{a |date}}
</div>
<script type="text/javascript">
Vue.filter('date',function(input){ //自定义时间过滤器
var odate=new Date(input);
return odate.getFullYear()+'-'+(odate.getMonth()+1)+'-'+odate.getDate()+' '+
odate.getHours()+':'+odate.getMinutes()+':'+odate.getSeconds();
});
var vm = new Vue({
data:{
a:Date.now() //获取一个时间戳
}
}).$mount('#box');
</script>
示例3：过滤html标记
需要用-->双向过滤器(用的比较少)
数据-->视图 model-->view
视图-->数据 view-->model
<div id="box">
<input type="text" v-model="msg | filterHtml">
<br/>
<span v-html="msg"></span>
</div>
Vue.filter('filterHtml',{
read:function(input){ //view-->model
return input.replace(/<[^<]+>/g,''); //正则表达式，将html标签替换成空
},
write:function(input){ //model-->view
return input.replace(/<[^<]+>/g,'');
}
});
var vm = new Vue({
el:'#box',
data:{
msg:'<strong>welcome</strong>'
}
});