vue小细节

最新推荐文章于 2024-03-31 16:17:29 发布

vcxiaohan2

最新推荐文章于 2024-03-31 16:17:29 发布

阅读量718

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/u011500781/article/details/52759421

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前情提要

这是我在学习vue过程中遇到的一些需要注意的细节点，在这里整理出来，防止以后遇到，避免踩不必要的坑

详细内容

props传递时，如果遇到驼峰式的参数，需要写成横杠形式

<body>  
    <div id="a">  
        <my-component m-n="a++"></my-component>  
    </div>  
</body>
<script>  
    var myComponent = Vue.extend({
        template: '<p>{{ mN }}</p>',
        data: function() {
            return {
            }
        },
        props: ['mN']
    });

    Vue.component('my-component', myComponent);

    new Vue({
        el: '#a'
    });
</script>

props传递时，加:和不加:是有区别的

不加
```
<my-component m-n="1"></my-component>
```
加
```
<my-component :m-n="1"></my-component>
```

测试用例

<body>  
    <div id="a">  
        <my-component :m-n="1"></my-component> 
    </div>  
</body>
<script>  
    var myComponent = Vue.extend({
        template: '<p>{{ mN }} {{ typeof mN }}</p>',
        data: function() {
            return {
            }
        },
        props: ['mN']
    });

    Vue.component('my-component', myComponent);

    new Vue({
        el: '#a'
    });
</script>

模板需要有一个父级元素(版本兼容问题)

错误

<template id="b">
    <p>{{ m }}</p>
    <p @click="add">{{a}}</p>
</template>

正确

<template id="b">
    <div>
        <p>{{ m }}</p>
        <p @click="add">{{a}}</p>
    </div>
</template>

data是对象还是函数

new Vue()的data正确格式

new Vue({  
   el: '#a',  
   data: {
       a: 111
   }
});

new Vue({  
    el: '#a',  
    data: function(){
        return {
            a: 111
        }
    }
});

Vue.component()的data错误格式

Vue.component('aaa', {
    template: '<p>{{ a }}</p>',
    data: {
        a: 222
    }
})

Vue.component()的data正确格式

Vue.component('aaa', {
    template: '<p>{{ a }}</p>',
    data: function(){
        return {
            a: 222
        }
    }
})

删除数组元素(版本兼容问题)

$remove()(vue1.0适用)

splice()(vue2.0适用)

示例

new Vue({  
    el: '#a',  
    data: {
        arr: [1, 2]
    },
    created: function() {
        this.arr.splice(0, 1);
    }
});

过滤器(版本兼容问题)

直接使用内置过滤器(vue1.0适用)

只能提前定义才能使用(vue2.0适用)

示例

<body>  
    <div id="a">  
        <p>{{ a | uppercase }}</p>
    </div>  
</body>  
<script> 
    Vue.filter('uppercase', function(value) {
        return value.toUpperCase();
    })

    new Vue({  
        el: '#a',  
        data: {
            a: 'abc'
        }
    });  
</script>

属性传参加字符串

<body>  
    <div id="a">  
        <input type="text" :placeholder="msg+'个'" />
    </div>  
</body>  
<script> 
    new Vue({  
        el: '#a',  
        data: {
            msg: 123
        },
    });  
</script>

v-if切换多个元素

示例

<template v-if="xxx"> 
    <div>1</div>
    <div>2</div>
</template>

computed里面的数据不能主动设置改变，只能通过别的值改变来引起它的变化

想引用state中的可变属性必须放在computed中，否则不生效

...
import store from 'store';

export default {
    data() {
        return {
            a: store.state.a// state中不变属性可以放在data中
        }
    },
    computed: {
        b() {// state中可变属性必须放在computed中，否则b变化后，获取不到变化后的值
            return store.state.b;
        },
    },
}

vcxiaohan2

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue小细节

前情提要这是我在学习vue过程中遇到的一些需要注意的细节点，在这里整理出来，防止以后遇到，避免踩不必要的坑详细内容传递props时，如果遇到驼峰式的参数，需要写成横杠形式 <body> <div id="a"> <my-component m-n="a++"></my-component> </div> </body><script>
复制链接

扫一扫