Vue1.0学习总结(1)———指令、事件、绑定属性、模板、过滤器

Vue1.0学习总结(1)———指令、事件、绑定属性、模板、过滤器

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="{width: 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{
　　width: 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>'
　　}
});