5 November 2019 / Vue.js

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>

—

Vue.js 2.x 笔记