vue进阶学习01

v-pre指令用来标注这个标签内部及其子不会被编译

过滤器可以串联也可以加入参数 例如:{{ message | filter1 |filter2}}  {{ message | filter('arg1', 'arg2') }}arg1和2分别传给过滤器的第二和第三个参数因为第一个是数据本身

computed属性的data默认使用了getter,实际它会在数据改变时候调用setter,所以在需要的情况下,我们可以重写setter。应用场景:1文本改变 2动态class名称和style属性3开发组件的时候经常用来动态传递props

computed属性可以实现的method也可以实现,之所以用computed是应为computed属性依赖的数据发生变化时才会触发重新取值的操作。所以在大量计算的情况下用computed

:class可以和原来的class共存

:style内联样式属性使用驼峰命名,编译后会自动转换为font-size...

v-if条件渲染时候,如果不想复用元素,可以在不想复用的元素上加key值,

例如

<h1 v-if="ok" key="ok">Yes</h1>
<h1 v-else key="no">No</h1>
v-show不能再template上面使用
v-for可以用在template上进行渲染,iterm in iterms 可以写成 item of items
v-for有两个可选参数,键名和索引 <div v-for="(val, key, index) in object"></div>
数组更新
vue包含的可以观察的数组编译的方法
push() pop() shift() unshift() splice() sort() reverse()
vue不包含的方法,这些方法不会改变原始数组
filter() concat() slice()
vue检测到数组变化时候,不会渲染整个列表,而是最大化复用dom元素,含有相同元素的项不会被重新渲染,因此可以大胆的用新数组替换原来的旧数组
vue不会检测到并更新视图的情况
1通过索引设置项,比如 app.book[8] = {}
2修改数组长度,比如app.book.length = 8
解决第一个问题可以用vue的内置set方法:
Vue.set或者this.$set、也可以
app.book.splice()
解决第二个问题可以
app.book.splice()

















zhumiao
原文地址:https://www.cnblogs.com/zhumiao/p/9117746.html