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>