vue小细节

来源：互联网发布：淘宝双十二报名入口编辑：程序博客网时间：2024/04/19 16:22

前情提要

这是我在学习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里面的数据不能主动设置改变，只能通过别的值改变来引起它的变化

1 0