基本使用
- 模板(插值、指令)
- computed和watch
- class和style
- 条件
- 循环
- 事件
- 表单
v-html
- v-html : 会有 XSS 风险,会覆盖子组件
示例
<p v-html="rawHtml">
<span>有 xss 风险</span>
<span>【注意】使用 v-html 之后,将会覆盖子元素</span>
</p>
data() {
return {
rawHtml: '指令 - 原始 html <b>加粗</b> <i>斜体</i>',
}
}
看下页面(localhost: 8080):
* computed 和 watch
- computed 有缓存,data 不变则不会重新计算。 (提高性能)
- watch 如何深度监听 (针对引用类型)
- watch 监听引用类型,拿不到 oldVal
computed
<div>
<p>num {
{num}}</p>
<p>double1 {
{double1}}</p>
<input v-model="double2"/>
</div>
data() {
return {
num: 20
}
},
computed: {
double1() {
return this.num * 2
},
// v-model 是双向数据绑定,所以一定要有 get 和 set,如果只有一个它就会报错。
double2: {
get() {
return this.num * 2
},
set(val) {
this.num = val/2
}
}
}
watch
data() {
return {
name: '酥梨',
info: {
city: '上海'
}
}
},