Vue.js 2.x 笔记
v-* 指令
v-bind
对应标签属性,可简写成:
,如:herf=
v-on
对应标签事件,可简写成@
,如@click=
v-model
对应表单标签v-slot
用于插槽,具名插槽可以简写成#
,如 `#header``
组件
- 组件的
data
必须是一个function
,原因是每个组件被复用时都能保持其独有的 vue 实例; - 通过
Vue.component
注册的全局组件,可以在任何一个 vue 实例中被复用;
局部组件
局部组件通过 var
注册,在 vue 实例的 components
属性中调用。
<div id="ex1">
<mycard></mycard>
</div>
var card = {
template: `
<div uk-alert>
<a class="uk-alert-close" uk-close></a>
</div>
`
}
var ex1 = new Vue({
el: '#ex1',
components: {
'mycard': card
}
})
Prop
- prop 的数据流向总是自顶向下的单项数据流,父级(顶)的数据变化会传送到子级(下)。
将一个对象的所有属性都作为 prop 传入则直接使用不带参数的 v-bind
,例如:
post: {
id: 1,
title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>
等价于:
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>