vue进阶学习01

Posted 2020-11-09 玲珑塔

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()