VUE基础学习

1、v-on和v-bind区别：
v-on:简写@ 绑定元素事件
v-bind: 简写： 绑定元素属性

2、class绑定：（1）:class=‘{‘classA’:isA,‘classB‘:isB}’
（2）:class=‘[classA,classB]‘
（3）:class=‘{classObj}‘

3、v-if和v-show区别：渲染的区别
v-if:只有条件成立时才会渲染元素；
v-show：不管条件是否成立都会渲染，条件不成立则display:none

4、v-for：遍历时输出多条标签
<ul>
<template v-for=‘(index,item) in arr‘>
<li>{{item}}</li>
<li>标签{{index+1}}</li>
</template>
</ul>

5、vue操作数组方法：
push、pop、shift、unshift、splice、sort、reverse

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
。
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个
元素的值。
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的
长度。
pop() 方法用于删除并返回数组的最后一个元素。
splice(index,num,"ele1,ele2...") 方法用于插入、删除或替换数
组的元素。
sort() 方法用于对数组的元素进行排序。
reverse() 将数组元素颠倒顺序。

6、Vue自带的过滤器（filter）
capitalize: 首字母大写

uppercase: 全部大写

lowercase: 全部小写

currency: 输出金钱以及小数点

debounce: 需在@里面使用,<button id="btn" @click="disappear
| debounce 10000">点击我,我将10秒后消失</button>

limitBy: 需在v-for(即数组)里面使用,
<ul v-for="item in lili | limitBy 10 3">
<!--输出 4 5 6 7 8 9 10 11 12 13-->
<li>{{item}}</li>
</ul>
lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

filterBy:需在v-for(即数组)里面使用,
第一个参数: {String | Function} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: {String} (可选,数组格式)

7、数据逻辑和事件逻辑隔离：
.prevent：阻止单击事件冒泡
.stop:提交后不再重载页面
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

8、按键修饰符：可以使用按键编码或者别名。
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
vue.js提供的别名包括：enter、tab、delete、esc、space、up、
down、left、Right。

vue基础