前情提要
这是我在学习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>
-
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>
-
示例
<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; }, }, }