VueJS教程4

参考：

官方文档：Vue API

15、Vue指令
- 15.1 全局配置（Vue.config）
  - silent（默认值：false），配置为true，取消Vue所有的日志与警告
  - optionMergeStrategies：自定义合并策略的选项
  - devtools：配置是否允许vue-devtools检查代码
  - errorHandler：指定组件的渲染和观察期间未捕获错误的处理函数。这个处理韩式被调用时，可获取错误信息和Vue实例
  - wareHandler：为Vue的运行时警告赋予一个自定义处理函数。注意这只会在开发环境下生效，在生产环境下会被忽略
  - ignoredElements
  - keyCodes：定义全局的键值，如给 v-on 自定义键位别名
  - performance：设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器上
  - productionTip：设置为 false 以阻止 vue 在启动时生成生产提示
- 15.2 全局API
  - （1）Vue.extend(options)：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
  - （2）Vue.nextTick([callback, context])：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
  - （3）Vue.set( target, propertyName/index, value )
  - （4）Vue.delete( target, propertyName/index )
  - （5）Vue.directive( id, [definition] )：注册或获取全局指令，如自定义指令中使用。
  - （6）Vue.filter( id, [definition] )：注册或获取全局过滤器。
  - （7）Vue.component( id, [definition] )：注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
  - （8）Vue.use( plugin )：安装 Vue.js 插件。
  - （9）Vue.mixin( mixin )：全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。
  - （10）Vue.compile( template )：在 render 函数中编译模板字符串。
  - （11）Vue.observable( object )：2.6.0 新增，让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
  - （12）Vue.version：提供字符串形式的 Vue 安装版本号。
- 15.3 选项 / 数据
- 15.4 选项 / DOM
  - （1）el
  - （2）template
  - （3）render
  - （4）renderError
- 15.5 选项 / 资源
  - （1）directives
  - （2）filters
  - （3）components
- 15.6 选项 / 组合
  - （1）parent
  - （2）mixins
  - （3）extends
  - （4）provide / inject
- 15.7 选项 / 其它
  - （1）name
  - （2）delimiters
  - （3）functional
  - （4）model
  - （5）inheritAttrs
  - （6）comments
- 15.8 实例属性
  - （1）vm.$data：Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
  - （2）vm.$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
  - （3）vm.$el：Vue 实例使用的根 DOM 元素。
  - （4）vm.$options：用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：
```
new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})
```
    　　输出结果：略。
  - （5）vm.$parent：父实例，如果当前实例有的话。
  - （6）vm.$root：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
  - （7）vm.$children：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
  - （8）vm.$slots：用来访问被插槽分发的内容。每个具名插槽有其相应的属性 (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。
  - （9）vm.$scopedSlots：用来访问作用域插槽。对于包括默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
  - （10）vm.$refs：一个对象，持有注册过 ref 特性的所有 DOM 元素和组件实例。
  - （11）vm.$isServer：当前 Vue 实例是否运行于服务器。
  - （12）vm.$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
  - （13）vm.$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
- 15.9 实例方法 / 数据
  - （1）vm.$watch( expOrFn, callback, [options] )
  - （2）vm.$set( target, propertyName/index, value )
  - （3）vm.$delete( target, propertyName/index )
- 15.10 实例方法 / 事件
  - （1）vm.$on( event, callback )
  - （2）vm.$once( event, callback )
  - （3）vm.$off( [event, callback] )
  - （4）vm.$emit( eventName, […args] )
- 15.11 实例方法 / 生命周期
  - （1）vm.$mount( [elementOrSelector] )
  - （2）vm.$forceUpdate()
  - （3）vm.$nextTick( [callback] )
  - （4）vm.$destroy()
- 15.12 指令
  - （1）v-text：预期：string
  - （2）v-html：预期：string
  - （3）v-show：根据表达式之真假值，切换元素的 display CSS 属性。
  - （4）v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
  - （5）v-else：不需要表达式。限制：前一兄弟元素必须有 v-if 或 v-else-if。
  - （6）v-else-if：限制：前一兄弟元素必须有 v-if 或 v-else-if。
  - （7）v-for：预期：Array | Object | number | string | Iterable (2.6 新增)
  - （8）v-on：预期：Function | Inline Statement | Object
  - （9）v-bind：预期：any (with argument) | Object (without argument)
  - （10）v-model：预期：随表单控件类型不同而不同。
  - （11）v-slot：预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
  - （12）v-pre：不需要表达式。跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
  - （13）v-cloak：不需要表达式。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
  - （14）v-once：不需要表达式。只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

　　接着VueJS教程3。

15、Vue指令

15.1 全局配置（Vue.config）

参考：全局配置

15.2 全局API

（1）Vue.extend(options)

　　使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
　　data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数。

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

　　1、第一种用法，挂在元素上

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="mount-point"> </div>
12 
13     <script>
14         // 创建构造器
15         var Profile = Vue.extend({
16             template: `<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
17             data: function () {
18                 return {
19                     firstName: "Walter",
20                     lastName: "White",
21                     alias: "Heisenberg"
22                 }
23             }
24         });
25 
26         // 创建Profile实例，并挂载在一个元素上
27         new Profile().$mount("#mount-point");
28     </script>
29 </body>
30 
31 </html>

　　输出结果："Walter White aka Heisenberg"

　　2、第二种用法，将组件注册到Vue.component全局方法里面

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="example">
12         <apple></apple>
13     </div>
14 
15     <script>
16         // 创建构造器
17         var Profile = Vue.extend({
18             template: `<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
19             data: function () {
20                 return {
21                     firstName: "Walter",
22                     lastName: "White",
23                     alias: "Heisenberg"
24                 }
25             }
26         });
27 
28         Vue.component('apple', Profile);
29 
30         var vm = new Vue({
31             el: "#example",
32             data: {
33             }
34         });
35     </script>
36 </body>
37 
38 </html>

　　输出结果：同上。

　　3、第三种用法，将组件注册为局部组件

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="example">
12         <apple></apple>
13     </div>
14 
15     <script>
16         // 创建构造器
17         var Profile = Vue.extend({
18             template: `<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
19             data: function () {
20                 return {
21                     firstName: "Walter",
22                     lastName: "White",
23                     alias: "Heisenberg"
24                 }
25             }
26         });
27 
28         var vm = new Vue({
29             el: "#example",
30             data: {
31             },
32             components: {
33                 apple: Profile
34             }
35         });
36     </script>
37 </body>
38 
39 </html>

　　输出结果：同上。

（2）Vue.nextTick([callback, context])

参数：

{Function} [callback]
{Object} [context]

　　在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

　　输出结果：略。

（3）Vue.set( target, propertyName/index, value )

参数：

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值：设置的值。

　　向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         <p>{{arr}}</p>
13         <p v-for="(item, index) in arr" :key="index">index: {{index}}, item: {{item}}</p>
14     </div>
15 
16     <script>
17         var app = new Vue({
18             el: "#app",
19             data: {
20                 arr: [1, 2, 3],
21                 msg: {
22                     age: 18,
23                 }
24             },
25         });
26     </script>
27 </body>
28 
29 </html>

　　输出结果：

（4）Vue.delete( target, propertyName/index )

参数：

{Object | Array} target
{string | number} propertyName/index

　　删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。

　　举例如上述所示。

（5）Vue.directive( id, [definition] )

参数：

{string} id
{Function | Object} [definition]

　　注册或获取全局指令。

// 注册
Vue.directive('my-directive', {
    bind: function () { },
    inserted: function () { },
    update: function () { },
    componentUpdated: function () { },
    unbind: function () { }
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
    // 这里将会被 `bind` 和 `update` 调用
})

　　输出结果：略。

（6）Vue.filter( id, [definition] )

参数：

{string} id
{Function} [definition]

　　注册或获取全局过滤器。

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

　　举例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My test page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{arr}}</p>
        <p v-for="(item, index) in arr" :key="index">index: {{index}}, item: {{item}}</p>
    </div>

    <script>
        // 注册
        Vue.filter('my-filter', function (value) {
            // 返回处理后的值
            if (!value) {
                return "";
            }
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        })

        // getter，返回已注册的过滤器
        var myFilter = Vue.filter('my-filter')

        var app = new Vue({
            el: "#app",
            data: {
                arr: [1, 2, 3],
                msg: {
                    name: "zhaoyichun",
                }
            },
        });
    </script>
</body>

</html>

　　输出结果：

（7）Vue.component( id, [definition] )

参数：

{string} id
{Function | Object} [definition]

　　注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponen

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         <p>{{arr}}</p>
13         <p v-for="(item, index) in arr" :key="index">index: {{index}}, item: {{item}}</p>
14         <my-component></my-component>
15     </div>
16 
17     <script>
18         // 注册组件，传入一个选项对象 (自动调用 Vue.extend)
19         Vue.component('my-component', {
20             template: `
21                 <p>I am a component.</p>
22             `,
23         })
24 
25         // 获取注册的组件 (始终返回构造器)
26         var MyComponent = Vue.component('my-component')
27 
28         var app = new Vue({
29             el: "#app",
30             data: {
31                 arr: [1, 2, 3],
32                 msg: {
33                     name: "zhaoyichun",
34                 }
35             },
36         });
37     </script>
38 </body>
39 
40 </html>

　　输出结果：

（8）Vue.use( plugin )

参数：

{Object | Function} plugin

　　安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

　　该方法需要在调用 new Vue() 之前被调用。
　　当 install 方法被同一个插件多次调用，插件将只会被安装一次。

（9）Vue.mixin( mixin )

参数：

{Object} mixin

　　全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

（10）Vue.compile( template )

参数：

{string} template

　　在 render 函数中编译模板字符串。只在独立构建时有效

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         <p>Haha</p>
13     </div>
14 
15     <script>
16         var res = Vue.compile('<div><span>{{ msg }}</span></div>')
17 
18         var app = new Vue({
19             el: "#app",
20             data: {
21                 msg: 'hello'
22             },
23             render: res.render,
24             staticRenderFns: res.staticRenderFns
25         })
26     </script>
27 </body>
28 
29 </html>

　　输出结果：

（11）Vue.observable( object )

　　2.6.0 新增

参数：

{Object} object

　　让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

　　返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }

　　在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 改变，所以如这里展示的，它和被返回的对象是同一个对象。在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行修改仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 Vue.observable 返回的对象，而不是传入源对象。

　　举例（创建了一个反映对象的 "状态" 。之后，更新对象将反映在模板中）：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         <button @click="increaseCounter">Test Vue.observable()</button>
13         <p>{{ state.count }}</p>
14     </div>
15 
16     <script>
17         let state = Vue.observable({ count: 0 })
18 
19         var app = new Vue({
20             el: "#app",
21             data: {
22                 msg: 'hello',
23             },
24             computed: {
25                 // dd() {
26                 //     return state;
27                 // }
28             },
29             methods: {
30                 increaseCounter() {
31                     state.count++;
32                 }
33             }
34         })
35     </script>
36 </body>
37 
38 </html>

　　输出结果：

（12）Vue.version

　　细节：提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用，你可以根据不同的版本号采取不同的策略。

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

　　输出结果：略。

15.3 选项 / 数据

参考：选项 / 数据

（1）data

类型：Object | Function
限制：组件的定义只接受 function。

　　实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12     </div>
13 
14     <script>
15         var data_1 = { a: 1 };
16 
17         // 直接创建一个实例
18         var vm = new Vue({
19             el: "#app",
20             data: data_1
21         });
22 
23         // Vue.extend() 中 data 必须是函数
24         var Component = Vue.extend({
25             data: function () {
26                 return { a: 1 }
27             }
28         })
29 
30     </script>
31 </body>
32 
33 </html>

　　输出结果：

（2）props

　　略。

（3）propsData

类型：{ [key: string]: any }
限制：只用于 new 创建的实例中。

　　创建实例时传递 props。主要作用是方便测试。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         msg: {{ msg }},  a: {{ a }}
13     </div>
14 
15     <script>
16         // Vue.extend() 中 data 必须是函数
17         var Comp = Vue.extend({
18             props: ['msg'],
19             template: `<div>{{ msg }}</div>`,
20             data: function () {
21                 return { a: 1 }
22             }
23         })
24 
25         var vm = new Comp({
26             el: "#app",
27             propsData: {
28                 msg: "Hello",
29             }            
30         });
31     </script>
32 </body>
33 
34 </html>

　　输出结果：

（4）computed

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12     </div>
13 
14     <script>
15         var vm = new Vue({
16             el: "#app",
17             data: { a: 1 },
18             computed: {
19                 // 仅读取
20                 aDouble: function () {
21                     return this.a * 2;
22                 },
23                 // 读取和设置
24                 aPlus: {
25                     get: function () {
26                         return this.a + 1;
27                     },
28                     set: function (v) {
29                         this.a = v - 1;
30                     }
31                 }
32             }
33         });
34     </script>
35 </body>
36 
37 </html>

　　输出结果：

（5）methods

　　略。

（6）watch

　　略。

15.4 选项 / DOM

（1）el

类型：string | Element
限制：只在由 new 创建的实例中遵守。

　　提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

　　在实例挂载之后，元素可以用 vm.$el 访问。

（2）template

　　略。

（3）render

　　Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12     </div>
13 
14     <script>
15         var vm = new Vue({
16             el: "#app",
17             data: { msg: "Hello, world!" },
18             computed: {
19             },
20             render: function (createElement) {
21                 return createElement('div', {
22                     attr: {
23                         id: 'app'
24                     },
25                 }, this.msg);
26             }
27         });
28     </script>
29 </body>
30 
31 </html>

　　等价于（没有render属性时）：

<div id="app">
    {{ msg }}
</div>

　　输出结果：

（4）renderError

参考：renderError

15.4 选项 / 生命周期钩子

参考：实例生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured

15.5 选项 / 资源

参考：选项 / 资源

（1）directives

（2）filters

（3）components

15.6 选项 / 组合

参考：选项 / 组合

（1）parent

　　指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

　　节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信。

（2）mixins

（3）extends

（4）provide / inject

15.7 选项 / 其它

参考：选项 / 其它

（1）name

类型：string
限制：只有作为组件选项时起作用。

　　允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

（2）delimiters

（3）functional

（4）model

（5）inheritAttrs

（6）comments

　　2.4.0 新增

类型：boolean
默认值：false
限制：这个选项只在完整构建版本中的浏览器内编译时可用。

　　当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

15.8 实例属性

参考：实例属性

15.9 实例方法 / 数据

（1）vm.$watch( expOrFn, callback, [options] )

　　略。

（2）vm.$set( target, propertyName/index, value )

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         <my-comp></my-comp> <!-- 这是一个注释测试 -->
13     </div>
14 
15     <script>
16         Vue.component("my-comp", {
17             props: ["aa"],
18             template: "<p>Hello paragraph.</p>",
19         });
20 
21         var vm = new Vue({
22             el: "#app",
23             data: { 
24                 msg: "Hello, world!",
25                 obj: {
26                     age: 15,
27                 }
28             },
29             computed: {
30             },   
31         });
32     </script>
33 </body>
34 
35 </html>

　　输出结果：

（3）vm.$delete( target, propertyName/index )

　　参考上述用例。

15.10 实例方法 / 事件

参考：实例方法 / 事件

（1）vm.$on( event, callback )

　　举例：

（2）vm.$once( event, callback )

　　监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

（3）vm.$off( [event, callback] )

　　举例：

（4）vm.$emit( eventName, […args] )

参考：vm.$emit( eventName, […args] )

15.11 实例方法 / 生命周期

参考：实例方法 / 生命周期

（1）vm.$mount( [elementOrSelector] )

（2）vm.$forceUpdate()

（3）vm.$nextTick( [callback] )

（4）vm.$destroy()

15.12 指令

参考：指令

（1）v-text

（2）v-html

（3）v-show

（4）v-if

（5）v-else

（6）v-else-if

（7）v-for

（8）v-on

（9）v-bind

（10）v-model

（11）v-slot

（12）v-pre

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>My test page</title>
 7     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="example">
12         <p>{{ msg }}</p>
13         <p v-pre>{{ msg }}</p>
14     </div>
15 
16     <script>
17         var vm = new Vue({
18             el: "#example",
19             data: {
20                 msg: "Hello, world"
21             },
22             components: {
23 
24             }
25         });
26     </script>
27 </body>
28 
29 </html>

　　输出结果：

VueJS教程4

15、Vue指令

15.1 全局配置（Vue.config）

15.2 全局API

（1）Vue.extend(options)

（2）Vue.nextTick([callback, context])

（3）Vue.set( target, propertyName/index, value )

（4）Vue.delete( target, propertyName/index )

（5）Vue.directive( id, [definition] )

（6）Vue.filter( id, [definition] )

（7）Vue.component( id, [definition] )

（8）Vue.use( plugin )

（9）Vue.mixin( mixin )

（10）Vue.compile( template )

（11）Vue.observable( object )

（12）Vue.version

15.3 选项 / 数据

（1）data

（2）props

（3）propsData

（4）computed

（5）methods

（6）watch

15.4 选项 / DOM

（1）el

（2）template

（3）render

（4）renderError

15.4 选项 / 生命周期钩子

15.5 选项 / 资源

（1）directives

（2）filters

（3）components

15.6 选项 / 组合

（1）parent

（2）mixins

（3）extends

（4）provide / inject

15.7 选项 / 其它

（1）name

（2）delimiters

（3）functional

（4）model

（5）inheritAttrs

（6）comments

15.8 实例属性

15.9 实例方法 / 数据

（1）vm.$watch( expOrFn, callback, [options] )

（2）vm.$set( target, propertyName/index, value )

（3）vm.$delete( target, propertyName/index )

15.10 实例方法 / 事件

（1）vm.$on( event, callback )

（2）vm.$once( event, callback )

（3）vm.$off( [event, callback] )

（4）vm.$emit( eventName, […args] )

15.11 实例方法 / 生命周期

（1）vm.$mount( [elementOrSelector] )

（2）vm.$forceUpdate()

（3）vm.$nextTick( [callback] )

（4）vm.$destroy()

15.12 指令

（1）v-text

（2）v-html

（3）v-show

（4）v-if

（5）v-else

（6）v-else-if

（7）v-for

（8）v-on

（9）v-bind

（10）v-model

（11）v-slot

（12）v-pre

（13）v-cloak

（14）v-once