vue的插值表达式
用模板引擎去渲染的,通过双大括号插值({{}}
),在标签内容中使用,传入变量显示Vue对象data中的值
可以直接插入字符串,数值,表达式,对象,函数等一切能想到的
v-text v-html
v-text:渲染普通文本,绑定在数据对象像上的msg属性值是什么样,v-text就显示什么样,不解析标签,仅渲染标签及内容。
v-html:输出标签解析过后的内容,不连标签一起显示。
v-if v-show
v-if:是动态的向DOM中添加或者删除DOM元素,切换有一个局部编译或卸载的一个过程具有更高的切换消耗,显示或者隐藏是将DOM元素整个删除或者添加。
v-show:是通过设置DOM元素的display
样式属性控制显示或隐藏,DOM元素还是存在。具有更高的初始渲染消耗。
v-bind
v-bind:用于绑定数据和元素属性的,绑定之后对应的值要去vue数据里面去找,可以绑定图片的src、超链接的class 。
<a v-bind:href="url">click me</a>
也可以传入一个对象,对象的名active表示要添加的类名,isActive是vue中的数据,表示在什么情况下添加这个类名,对应为真就添加,对应为假就不添加。
v-on事件
v-on用来绑定事件的,v-on可以绑定多个事件,可以简写@事件名(@click,@keydown.enter)。
Vue指令修饰符
vue.js为v-on提供了事件修饰符,通过(.)表示的指令后缀来调用修饰符。
.stop:阻止点击事件冒泡。
.prevent:提交事件不再重新加载页面。
.capture:添加事件侦听器时使用时间捕获模式。
.self:只当事件在该元素本身(而不是子元素)触发回调。
.once:只会触发一次。
注意,使用修饰符相应的顺序,相应的代码会以同样的顺序产生。
v-for列表渲染
v-for:是根据一组数组的选项进行渲染,数组可选的第二个参数为当前项的索引,尽可能在使用v-for时提供key。
<li v-for=(item,index) in items>
{{ item.属性名 }}
</li>
//变异方法
push() //添加到末尾
pop() //去除末尾数据
shift() //去除首位数据
unshift() //添加到首位数据
sort() //排序
reverse() //逆向
//例子
<ul id="example-1">
<li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
items: [{message: 'Foo' }, {message: 'Bar' }]
}
});
example1.$data.items.push({message : 'test'}); //push()添加元素
</script>
v-model双向数据绑定
v-mode:限制在<input>
、<select>
、<textarea>
、components
中使用,它负责监听用户的输入事件以及更新数据。另外在(<textarea>{{text}}</textarea>
)并不会生效,应用x-model来代替。
v-model的修饰符:
//.lazy:取代input监听change事件
<input v-model.lazy="msg" >
//.number:输入字符串转为有效的数字
<input v-model.number="msg">
//.trim输入时过滤首位空格
<input v-model.trim="msg">
侦听器watch的用法
监听的是当前数据的某个属性,watch监听器会监听data中的数据变化,只要一变化,就能执行相应的逻辑。监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值。
watch监听复杂数据类型(对象、数组)要深度监视 。
new Vue({
el:'',
data:{
stuse:[{name:'jack'}]
},
watch:{
"stus":{
deep:'true',
handler:function(newV,oldV){
console.log(newV[0].name);
}
}
}
})
computed
computed:默认只有getter方法。
computed:监听数据变化,生成新的值(改值不需要在data中定义),依赖缓存进行计算,也就是说只有数据发生改变时才计算,若数据没有变化则会直接取出缓存的值。
过滤器filters
filters:为数据添油加醋,vue过滤器分为全局和局部过滤器。
定义一个全局过滤器
<h3>{{msg|myReverse}}</h3>
Vue.filter('myReverse',(val)=>{
return val.split('').reverse().join('');
})
new Vue({
el:'',
data:{
msg:'hello 过滤器'
}
})
创建局部过滤器
<h3>{{price|myPrice('¥')}}</h3>
new Vue({
el:'',
data:{
price:10
},
filters:{
myPrice:function(price,a){
return a+price
}
}
})