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"来添加重复数据

　　

　　　　
　　　　

　　　　　　
• {{val}}

　　　　

　　

　　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指令代替{{}}可以很好的解决这个问题。
　　使用模板的写法：{{msg}}
　　使用v-text指令的写法： 可以防止花括号出现

4）v-html指令：是一个转义指令，当我们的数据或者用户输入中，含有标签等可以转义的字符，
　　v-html就可以将里面的标签进行转义，不会原样输出，造成一些不好的用户体验。
　　a) --->v-html进行转义和防止花括号出现
　　b) {{{msg}}} {{{msg}}} --->另一种对数据进行转义的方法，与v-html的转义效果相同

　　补充：防止花括号闪烁的另外一种方法：
　　当访问响应慢时用户有时会看到花括号的标记，这时为最外层div加上v-cloak属性，
　　再为v-cloak属性写一个display:none的样式，防止看到花括号的出现
　　v-cloak：一般用在比较大的段落

 

　　

 

　　

　　　　

{{item.content}}

　　　　

　　　　{{item.time|date}}
　　　　
　　　　　　{{item.acc}}
　　　　　　{{item.ref}}
　　　　　　删除
　　　　
　　

 

5）自定义指令:
　　a)自定义属性指令：
　　　　Vue里面通过Vue.directive自定义属性
　　　　Vue.directive('名称',function(参数){ //默认调用的是bind,可以简写,
　　　　　　//操作;
　　　　　　//(this.el -->原生的DOM元素)
　　　　});

　　

//可传参,参数可来自于vue里的data
　　指令名称：v-red -->red
　　*注意:指令名称必须以v-开头

　　示例1：自定义指令,改变背景色
　　

　　11111111111
　　

　　

示例2：自定义指令,完成拖拽:
　　

　　　　

　　

　　

b)自定义元素指令:(用的很少,了解即可)
Vue1.0通过Vue.elementDirective自定义元素指令
Vue.elementDirective('元素名称',{
　　bind:function(){ //这里不再遵循上面自定义属性指令的简写方式
　　　　//javascript语句;
　　}
});

示例：自定义元素指令
css:
zns-red{
　　width: 100px;
　　height: 100px;
　　background: #ccc;
　　display: block;
}

html代码:

　　

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没有封装:

@keydown.17封装了(ctrl的键码为17)

自定义键盘事件:
Vue.directive('on').keyCodes.ctrl=17;

//延迟输出
------------------------------------------------------------------------------------

绑定属性：用v-bind绑定属性 v-bind:src="url" :width/height/src/title="wd"
1）不同绑定属性方法的优缺点：
效果能出来，但是在控制台会报一个404的错误
效果能出来，不会出现404的错误
推荐使用简写

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 -->配合事件使用，表示延迟

3）与数据配合使用的过滤器
a)limitBy -->限制几个数据，可接受两个参数
limitBy(取几个 从第几个开始取) 默认从0开始取,一般与数组结合使用

{{val}}

//显示两条数据1,2

{{val}}

//显示两条数据2,3

{{val}}

//显示两条数据4,5
data:{
　　arr:[1,2,3,4,5]
}

b)filterBy -->过滤数据
filterBy接受的参数既可以是数据，也可以是变量

{{val}}

//显示含有'o'的数据
//显示含有文本框中内容的数据

{{val}}

data:{
　　arr:['with','height','background','oppo'],
　　a:''
}

c)orderBy -->对数据进行排序

{{val}}

//按正序进行排序

{{val}}

//按倒序进行排序
//按文本框中输入内容进行排序(输入1或-1)

{{val}}

data:{
　　arr:['with','height','background','oppo'],
　　a:''
}

4）自定义过滤器
如何自定义过滤器？
Vue.filter('名称',function(input){ //默认接收的第一个参数是input，是输入的意思
　　return 操作
});

示例1：

{{a | toDoch}}

示例2：时间转化器：

{{a |date}}

示例3：过滤html标记
需要用-->双向过滤器(用的比较少)
数据-->视图 model-->view
视图-->数据 view-->model

　　
　　

　　

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:'welcome'
　　}
});