vue初学知识点整理

ref直接访问DOM元素或子组件元素

有时我们想要直接访问一个dom,这时候vue怎么办呢?使用ref.

在任何dom上使用ref属性后,即可将该元素注册到 vm.$refs这个对象中.

<div ref="demo_ref"></div>
vm.$refs.demo_ref 就表示如上的dom元素,

这个获取组件元素很重要

事件 v-on:click

事件实现了交互功能,vue除了基础的事件,还有事件修饰符来调整和控制事件的执行过程.

@click.prevent 阻止执行事件的默认行为,比如链接跳转
@click.stop 阻止事件传播,避免在父级元素上触发事件
@click.once 只在第一次触发事件的时候执行
@click.capture 捕获事件在传递到下级元素前触发
@click.self 只监听元素自身上触发的事件
@click.stop.self.once 可以串联使用
@scroll.passive 滚动行为触发事件,passive增强性能.
//按键修饰符
@keyup.enter 按键是enter时触发,其他的还有 .tab .delete .space .up .PageDown .ctrl 等等

vue绑定class的操作手法

vue使用v-bind:class="param"实现对class的控制.
param可以是数组,像这样:

<div v-bind:class="[param1,param2]"></div>

data:{
    param1:'for',
    param2:'bar',
}

<div class="for bar"></div>

param也可以是对象,显示的类名由对象元素值是否为true决定,像这样:

<div v-bind:class="paramObj"></div>

data:{
    paramObj:{
        for:true,
        bar:false,
        hel:true
    }
}

<div class="for hel"></div>

更复杂一点的就是,字符串/数组/对象的混用

<div v-bind:class="['p-r-30',mt20,{redbg:redbg}]"></div>

data:{
    mt20:'m-t-20',
    redbg:true,
}

<div class="p-r-30 m-t-20 redbg"></div>

侦听器watch

当监听的数据发生变化时进行的操作

watch:{
    inputText:function(val,oldval){//监听inputText数据是否发生变化
        this.watch_msg = '数据发生了变化 '+ oldval + ' ' + val;
    },
    'object.property':function(){//这里监听的是对象某个属性的变化;}
    object:function(){
        handle(val,oldval){},
        deep:true//这里进行的是深度监听,整个object任何一项属性变化都会监听到
    }
},

侦听器可以用在处理异步操作;
除了watch:data.value,还可以watch:data.object.property

计算属性computed

计算属性介于 data对象属性 与 函数方法之间:你可以像访问data属性那样去访问它, 但你需要像函数方法那样去定义它;

new Vue({
    el:'#app',
    data:{
        numbers:[1,2,3],
    },
    computed:{
        numberTotal(){
            return numbers.reduce((sum,val)=>sum+val); //方法式定义
        }
    }
});
vm.numberTotal //属性式访问

vue 操作内联样式style

内联样式使用一个对象来配置style.

<div :style="{fontWeight:'bold',color:'red'}"></div>

多组对象时使用数组整合到一起,相同的样式名会覆盖

<div :style="[styleObj1,styleObj2]"></div>

过滤器 对多个数据都进行同样的格式化处理的时候,过滤器很适用.

过滤器在 插值 和 v-bind 中使用

{{message | filterA | filterB}}
<div v-bind="message | filterA | filterB"></div>

//局部定义过滤器
new Vue({
    filters:{
        filterA: function(value){
            return value.trim();
        },
        filterB: function(value){
            return value.toUpperCase();
        }
    }
});
//全局定义,在 vue实例之前定义.
Vue.filter('filterA', function(value){
    return value.trim();
});

指令

1. v-if v-else-if v-else 这里可以使用表达式,比如 === > <;
2. v-for="(value,key) in arrOrObject", 这里for的对象可以是array object number string iterable;
3. v-bind:attrname,绑定属性. 可简写为 :attrname
4. v-on:eventname,事件属性绑定,简写为 @:eventname
5. v-model 将输入框的值绑定到data对象的对应属性上,双向数据绑定的关键
6. v-show 显示/隐藏元素
7. v-html 将html内容作为普通html载入,而不是vue模板进行编译
8. v-text 其实就是{{text}}

函数
vue中的函数被定义在methods属性中,所有的函数将作为vue方法在所有使用javascript的地方使用.

<div v-for="number in selfFunction(numbers)">{{selfFunction(other_numbers)}}</div>

const vm = new Vue({
    el:'#demo',
    numbers:[1,2,3,4,5],
    methods:{
        selfFunction(id){return id;},
        otherFunction(id){ return this.selfFunction(id);}
    }
});
vm.selfFunction(numbers);