vue

vue初学知识点整理

发布于 2021-01-13 15:19:07

初学vue,对一些知识点进行整理

查看更多

关注者
0
被浏览
34
7 个回答
猫哥
猫哥 2021-01-13
更多问题咨询,可直接加QQ(632906391)与我取得帮助解决.

指令

  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}}
猫哥
猫哥 2021-01-13
更多问题咨询,可直接加QQ(632906391)与我取得帮助解决.

函数
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);
猫哥
猫哥 2021-01-13
更多问题咨询,可直接加QQ(632906391)与我取得帮助解决.

计算属性computed

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

new Vue({
    el:'#app',
    data:{
        numbers:[1,2,3],
    },
    computed:{
        numberTotal(){
            return numbers.reduce((sum,val)=>sum+val); //方法式定义
        }
    }
});
vm.numberTotal //属性式访问
猫哥
猫哥 2021-01-13
更多问题咨询,可直接加QQ(632906391)与我取得帮助解决.

侦听器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

猫哥
猫哥 2021-01-13
更多问题咨询,可直接加QQ(632906391)与我取得帮助解决.

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

过滤器在 插值 和 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();
});

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览