v-text
标签中显示的内容。
与双大括号写法类似，区别是没有双大括号灵活，如<div v-text="'Text:' + text"></div>，双大括号<div>Text: {{text}}</div>
import Vue from 'vue'
new Vue({
el: '#root',
template: `
<div v-text="text"></div>
`,
data: {
text: 1,
active: false
}
})
v-html
把内容作为 HTML 插入标签中。
new Vue({
el: '#root',
template: `
<div v-html="html"></div>
`,
data: {
html: '<span>this is html</span>'
}
})
v-show
是否显示节点。
原理：在对应节点添加样式 display:none;
new Vue({
el: '#root',
template: `
<div>
<div v-show="active">{{text}}</div>
</div>
`,
data: {
text: 1,
active: false
}
})
v-if
是否把节点放在文档流中。
new Vue({
el: '#root',
template: `
<div>
<div v-if="active">{{text}}</div>
</div>
`,
data: {
text: 1,
active: false
}
})
如果只是控制显示与隐藏，使用 v-show；如果使用 v-if，会动态增删节点，引起重绘和重排，影响性能。
v-else
与 v-if 配合并列使用。
new Vue({
el: '#root',
template: `
<div>
<div v-if="active">{{text}}</div>
<div v-else>else content</div>
</div>
`,
data: {
text: 1,
active: false
}
})
v-else-if
与 v-if v-else 配合并列使用。
new Vue({
el: '#root',
template: `
<div>
<div v-if="active">{{text}}</div>
<div v-else-if="text === 1">else if content</div>
<div v-else>else content</div>
</div>
`,
data: {
text: 1,
active: false
}
})
v-for
遍历显示。
new Vue({
el: '#root',
template: `
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
`,
data: {
arr: [1, 2, 3]
}
})
index
拿到 index
new Vue({
el: '#root',
template: `
<ul>
<li v-for="(item, index) in arr">{{item}}:{{index}}</li>
</ul>
`,
data: {
arr: [1, 2, 3]
}
})
遍历对象
new Vue({
el: '#root',
template: `
<ul>
<li v-for="(val, key) in obj">{{val}}:{{key}}</li>
</ul>
`,
data: {
obj: {
a: '123',
b: '456',
c: '789'
}
}
})
遍历对象时的 index
和遍历数组一样，也是0，1，2...
JS 的逻辑：通过 Object.keys() 得到对 key 值的数组，从而得到 index
new Vue({
el: '#root',
template: `
<ul>
<li v-for="(val, key, index) in obj">{{val}}:{{key}}:{{index}}</li>
</ul>
`,
data: {
obj: {
a: '123',
b: '456',
c: '789'
}
}
})
key
使用 v-for 时，需要给每一项加 key值。
一般情况下，我们 使用 v-for 做数据列表，这对应后台的数据，数据一般有自己的 id，把唯一的 id 作为 key 值。由于数据经常变动，vue 会重新渲染列表，并放入 DOM 中，性能开销比较大。如果指定 key，在下一次遍历中，vue 从缓存中拿到相同的 key，就会复用 key 所在的节点，不需要重新生成，从而节省性能开销。
推荐不要使用 index 作为 key，因为数组元素顺序的变化，和数组内容是没有关系的，可能导致错误的缓存。
// 这里把 item 作为 key，正常使用 id值
new Vue({
el: '#root',
template: `
<ul>
<li v-for="(item, index) in arr" :key="item">{{item}}:{{index}}</li>
</ul>
`,
data: {
arr: [1, 2, 3]
}
})
v-on
事件监听
简写，@
v-on 其实是在 vue 对象实例上绑定事件，方便我们在 template 中使用，对应着vm.$on()的操作；可以理解成拿到 vue 组件对象后，通过 $on 绑定事件。如果是 div 节点，它并不是 vue 的实例，v-on 会进行判断，如果是 dom 节点，会使用 addEventListener 的方式添加事件，如果是 vue 组件，使用 $on添加事件
new Vue({
el: '#root',
template: `
<div @click="clickDiv">click this div</div>
`,
methods: {
clickDiv () {
console.log('clicked')
}
}
})
v-bind
v-model
默认用在 input 上。
给自定义组件加上 v-model。
给表单绑定数据。
绑定 input
new Vue({
el: '#root',
template: `
<div>
<div>{{text}}</div>
<input type="text" v-model="text"/>
</div>
`,
data: {
text: 1,
}
})
绑定 checkbox
显示数组中的一列值，勾选 arr 中有，不勾选 arr 中没有。
new Vue({
el: '#root',
template: `
<div>
<input type="checkbox" :value="1" v-model="arr"/>
<input type="checkbox" :value="2" v-model="arr"/>
<input type="checkbox" :value="3" v-model="arr"/>
</div>
`,
data: {
arr: [1, 2, 3]
})
绑定 radio
new Vue({
el: '#root',
template: `
<div>
<input type="radio" value="one" v-model="picked"/>
<input type="radio" value="two" v-model="picked"/>
</div>
`,
data: {
picked: ''
}
})
修饰符
.number
把输入的数据转换成 number 类型。
new Vue({
el: '#root',
template: `
<input type="text" v-model.number="text"/>
`,
data: {
text: 1
}
})
.trim
去除首尾空格。
<input type="text" v-model.trim="text"/>
.lazy
监听方式不同，input 输入过程，并不会改变数据，点开一次性改变。
<input type="text" v-model.lazy="text"/>
v-pre
使用 v-pre 后，div 中的内容都不会被解析，也就是原样显示。
<div v-pre>{{text}}</div>
v-cloak
webpack开发的项目都用不到。
使用唯一场景：直接在页面上，引入了 vue 的库代码，在页面上写 vue 的代码，模板是写在 body 的 html 中，浏览器原样显示，用户体验差，这时使用 v-cloak，在 vue 代码没有加载完成前，给 vue 代码加一个隐藏样式（display:none:），当 vue 代码加载完成后，vue 第一时间会把这个隐藏样式去掉。
基本用不到。
<div v-clock>{{text}}</div>
v-once
数据绑定的内容只执行一次。
使用场景：对应节点内容都是静态内容，没有动态数据。
作用：节省性能开销，vue 不会再次检测，不会进行虚拟 DOM 的对比。
new Vue({
el: '#root',
template: `
<div>
<div v-once>{{text}}</div>
<input type="text" v-model="text"/>
</div>
`,
data: {
text: 1,
}
})
网友评论