指令
使用’{{}}‘访问vue实例里data内的数据，’{{}}'称之为插值表达式，此方式访问数据会有数据闪烁的问题。
- v-text:作用与’{{}}'插值表达式类似，只是v-text会将html内容覆盖，v-text可以做类似的表达式计算，前提是i是数字，v-text=“i+1”
- v-cloak:解决能够解决插值表达式闪烁的问题
- v-html:可以把数据当作html内容解析，且也会覆盖绑定html元素的内容。
- v-bind:是用来绑定属性的，可以简写为冒号’:’
<input type="button" value="按钮" v-bind:title="title+'哈哈'">
可简写为：
<input type="button" value="按钮" :title="title+'哈哈'">
可以看到 引号里面也是可以写表达式的。
- v-on:类似于onclick事件 v-on:click="myEvent()"可以简写为：@click=“myEvent()”
v-on指令的事件修饰符:
a) .stop 阻止冒泡
b) .prevent 阻止浏览器的默认事件
c) .capture 添加事件监听器时使用事件捕获模式
d) .self 当事件在该元素本身触发时 触发回调
e) .once 事件只触发一次
- v-model:实现双向数据绑定事件，注意：v-model只能运用在表单元素上（input select checkbox textarea）
- v-for:迭代元素 注意：使用v-for循环的时候一定要加给绑定key属性,key属性绑定的值只能时string或number类型
v-for是用来做迭代的，有如下几种用法
a) 迭代数组
b) 迭代对象
c) 迭代数组对象
<h6 v-for="(array,i) in list">{{array}}----->{{i}}</h6> list:[1,2,3,4]
<h6 v-for="(obj,i) in objList">{{obj.id}}----->{{obj.name}}---->{{i}}</h6> objList:[{id:1,name:'dsx'},{id:2,name:'dsx2'}]
<h6 v-for="(val,key,i) in obj">{{val}}---->{{key}}---->{{i}}</h6> obj:{name:'dsx',age:12,sex:'男'}
<h6 v-for="x in 20">{{x}}</h6> //循环数字
- v-if: 表达式为true则显示元素
- v-show: 与v-if效果类似，但性能有差异
//如果某点击事件方法里只有一句话，则可以使用如下方式：@click="flag=!flag" 取反切换
<input type="button" name="" id="" value="toggle" @click="flag=!flag" />
<h3 v-if="flag">这是v-if控制的元素</h3>
<h3 v-show="flag">这是v-show控制的元素</h3>
数组的遍历
- 使用for遍历 :原始方式
- 使用array.forEach遍历 注意：这种方式无法强制终止循环,参数是一个函数，类似java的lambda表达式
this.a.forEach( item => {
if(item.title.indexOf(keyword)!=-1){
array.push(item);
}
})
- 使用array.filter过滤 会返回一个新的数组
return this.a.filter( obj => {
if(obj.title.indexOf(keyword)!=-1){
return obj;
}
})
- 使用array.some方式
this.a.some( obj => {
if(obj.title.indexOf(keyword)!=-1){
array.push(obj);
}
})
vue中的全局过滤器
vue中的过滤器是用来做数据格式化的
- 语法： Vue.filter(‘过滤器名称’，function(data){}) 参数function里的参数只能是管道前面的数据，
也即下面例子中的msg。function可以有多个参数, 过滤器也是进行链式调用 - 使用 可以在插值表达式和v-bind指令中用管道的方式使用 eg:{{ msg | Myfilter }}
<h3 :class="['red','big',{'active':flag}]">{{ b | myFilter('zz','cj')}}</h3>
Vue.filter('myFilter',function(data){
return data+' 邓绍祥';
})
使用vue中的全局过滤器做日期格式化
Vue.filter('dateFomat',function(dateString,pattern=''){ //pattern=''表示默认时为'',
var date =new Date(dateString);
var y=date.getFullYear();
var m=date.getMonth()+1;//月份从零开始的
var d=date.getDate();
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`;
}else{
var hh=date.getHours();
var mm=date.getMinutes();
var ss=date.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
})