Vue基础

373 阅读4分钟

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
        }
    }
})