文章目录

一、总览
二、DOM
- 2.1 el && template 选项
- 2.2 render 选项
- 2.3 renderError 选项
三、数据
- 3.1 data 选项
- 3.2 props 选项
- 3.3 propsData 选项
- 3.4 computed 选项
- 3.5 watch 选项
- 3.6 methods 选项
四、生命周期钩子函数——全部组件
- 4.1 简介
- 4.2 图示
- 4.3 辅助理解
- 4.4 使用
- 4.5 多组件生命周期关系
五、生命周期钩子函数——缓存组件
六、资源
- 6.1 directives 选项
- 6.2 filters 选项
- 6.3 components 选项
七、组合
- 7.1 parent 选项
- 7.2 mixins 选项
- 7.3 extends 选项
- 7.4 provide && inject 选项
八、其它
- 8.1 name 选项
- 8.2 delimiters 选项
- 8.3 functional 选项
- 8.4 model 选项
- 8.5 inheritAttrs 选项
- 8.6 comments 选项

一、总览

let vm = new Vue({/*** 各种选项（配置参数） * Vue 提供的选项的值如果是函数时，不可用箭头函数，因为箭头函数的 this 与父级上下文绑定，并不指向 Vue 实例本身*/// DOM// 要控制的 HTML 区域，源码会使用 document.querySelect('el的属性值')，所以 IE8 以下都不支持el,// 替换 el 选项挂载的元素为模板内容template,// 渲染函数，字符串模板的替代方案render,/*** 仅用于开发环境，在 render() 出现错误时，提供另外的渲染输出* 其错误将会作为第二个参数传递到 `renderError`。这个功能配合 hot-reload 非常实用*/renderError,// 数据// 声明的数据都被挂载到了 Vue 实例上data,// 接收父组件传过来的值props,// 创建实例时手动传递 props，方便测试 propspropsData,/*** 计算属性 * 依赖的数据（data 当中声明的响应式数据）缓存，一般用于管理表达式* 强调的是根据某个状态返回一个新状态*/computed,/*** 监测属性* Vue 实例化时会调用 $watch() 方法遍历 watch 对象的每个属性* 强调的是观测某个状态，根据状态的改变而做事情*/watch,// 定义可以通过vm对象访问的方法methods,// 生命周期钩子函数——全部组件一些特殊的时间点// 发生在 Vue 实例初始化之后，data observer 和 event/watcher 事件被配置之前beforeCreate,// 发生在 Vue 实例初始化以及 data observer 和 event/watcher 事件被配置之后created,// 挂载开始之前被调用，此时 render() 首次被调用beforeMount,// el 被新建的 vm.$el 替换，并挂载到实例上之后调用——等到页面加载完毕mounted,// 数据更新时调用，发生在 VDOM 重新渲染和打补丁之前beforeUpdate,// 数据更改导致 VDOM 重新渲染和打补丁之后被调用updated,// 实例销毁之前调用，Vue 实例依然可用beforeDestroy,// Vue 实例销毁后调用，事件监听和子实例全部被移除，释放系统资源destroyed,// 生命周期钩子函数——缓存组件（被 keep-alive 包裹的组件）// 组件激活时调用activated,// 组件停用时调用deactivated,// 资源// 包含 Vue 实例可用指令的哈希表，组件（局部）指令directives,// 包含 Vue 实例可用过滤器的哈希表，组件（局部）过滤器filters,// 包含 Vue 实例可用组件的哈希表，引入组件，组件可以写在别的文件中，也可以写在本文件中，需要赋值给变量components,// 组合//指定当前实例的父实例，子实例用 this.$parent 访问父实例，父实例通过 $children 数组访问子实例parent,// 将属性混入 Vue 实例对象，并在 Vue 自身实例对象的属性被调用之前得到执行mixins,// 用于声明继承另一个组件，从而无需使用 Vue.extend，便于扩展单文件组件extends,// 两个属性需要一起使用，用来向所有子组件注入依赖，类似于 React 的 Contextprovide && inject,// 其它// 允许组件递归调用自身，便于调试时显示更加友好的警告信息name,// 改变模板字符串的风格，默认为{{}}delimiters,// 让组件无状态(没有 data)和无实例(没有 this 上下文)functional,// 允许自定义组件使用 v-model 时定制 prop 和 eventmodel,// 默认情况下，父作用域的非 props 属性绑定会应用在子组件的根元素上。当编写嵌套有其它组件或元素的组件时，可以将该属性设置为 false 关闭这些默认行为inheritAttrs,// 设为 true 时会保留并且渲染模板中的 HTML 注释comments
});

二、DOM

2.1 el && template 选项

<div id="app">hello</div><script>const vm = new Vue({el: '#app',template: `<div id="ceshi">xxx</div>`,})console.log(vm.$el); // <div id="ceshi">xxx</div>
</script>

2.2 render 选项

一种可以用 JS 来创建 HTML 的方案,如果该函数存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂在元素中提取出的 HTML 模板编译渲染函数，组件中的 template 会被编译成 render 函数。
因为 Vue 是 VDOM，所以在拿到 template 模板时也要转译成 VNode 的函数，而用 render 函数构建 DOM，Vue 就免去了转译的过程。当使用 render 函数描述 VDOM 时，Vue 提供一个函数，这个函数是就构建 VDOM 所需要的工具。官方名字叫 createElement，还有约定的简写叫 h。

render: (h ,params) =>{let that = this;// h => createElement("定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])return h('div', that.getHTML(h,params.row));
}getHTML ( h , row ) {let status = row.status;let that = this;let editButtonStyle = {props: {type: 'success',size: 'small',ghost: true},on: {click: () => {that.edit(row);}}};let editButton = h( 'Button' , editButtonStyle , '编辑' );let viewSourceButtonStyle = {props: {type: 'primary',size: 'small',ghost: true},style: {marginLeft: '20px'},on: {click: () => {that.viewSource(row);}}};let viewSourceButton = h( 'Button' , viewSourceButtonStyle , '查看' );let obsoleteButtonStyle = {props: {type: 'error',size: 'small',ghost: true},style: {marginLeft: '20px'},on: {click: () => {that.obsolete(row);}}};let obsoleteButtonButton = h( 'Button' , obsoleteButtonStyle , '作废' );let invalidButtonStyle = {props: {type: 'error',size: 'small',ghost: true,disabled: true},style: {marginLeft: '20px'},};let invalidButton = h( 'Button' , invalidButtonStyle , '已作废' );let data = [];if( status == 0 ){ // 正常data = [ editButton, viewSourceButton, obsoleteButtonButton ];}else { // 作废data = [ viewSourceButton,invalidButton ];}return data;
}

通过 render 函数实现 VDOM 比较麻烦，因此可以使用 babel-plugin-transform-vue-jsx 在 render 函数中应用 JSX 语法。

import Header from "./Header.vue"
new Vue({el: "#demo",render (h) {return (<Header level={1}><span>AI-fisher</span></Header>)}
})

2.3 renderError 选项

new Vue({render (h) {throw new Error('oops')},renderError (h, err) {// h => (createElement: () => VNode, error: Error) => VNodereturn h('pre', { style: { color: 'red' }}, err.stack)}
}).$mount('#app')

三、数据

3.1 data 选项

声明需要响应式绑定的数据对象，配合 {{}} 渲染可以实现面向数据编程，即数据变化后，框架会自动渲染（实现 DOM 操作），这样就会提高性能
【注】项目当中需要用函数返回该对象，理由：
1、不使用 return 这种方式的数据会在项目的全局可见，会造成变量污染
2、把 data 包裹成函数以后，变量只在当前组件中生效，不会影响其他组件

<div id="app"><!-- 平台：CSDN -->平台：<span>{{ blog }}</span><br/><!-- 用户：AI-fisher -->用户：<span>{{ username }}</span>
</div>
<script>let myVm = new Vue({el: '#app',data: {   blog: 'CSDN',username: 'AI-fisher'}  });
</script>

在 data 选项中自定义了两个属性：blog 和 username，然后通过一种古老的模板语法：mustach，把他们的值绑定到了页面上，下面来打印一下这个实例：

console.log(myVm);

控制台打印结果（部分）：

可以看到自定义属性被设置成了该实例的属性（$开头表示是系统自带），所以说页面才能拿得到 blog 和 username 这两个属性的值，既然是实例属性，那么用 this 来访问也是可以的了：

<div id="app"><!-- 平台：CSDN -->平台：<span>{{ this.blog }}</span><br/>  <!-- 用户：AI-fisher -->用户：<span>{{ this.username }}</span>
</div>
<script>let myVm = new Vue({el:'#app',data:{   blog: 'CSDN',      username: 'AI-fisher'    }  });
</script>

只不过，this 可以省略，我们直接通过双大括号包裹该实例属性的属性名就可以在页面绑定数据了。当然，该数据绑定还是响应式的，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新（也可以理解为数据同步）。
浏览器刷新页面的时候，计算机内存中会产生一个 JS 的对象树，里面做了相应的映射来描述整个 HTML 的结构，我们只需操作这个虚拟的 JS 对象，不用操作真正的 DOM，响应式系统在数据变化的时候，会去循环这个 JS 对象，在把要改变的内容上做标记。然后等整个循环完成之后，然后去逐个去操作 DOM 。一个标签有很多的属性，改其中一个属性并不会去替换整个元素，而是保留尽可能多的属性，只是替换器中某一部分，所以性能较高。

3.2 props 选项

props 选项用来接收父组件传过来的值（可读不可写），然后通过和访问 data 一样的方式：mustach 语法{{ 属性名 }}就可以访问到传递的数据

数组——无类型校验

props: ['test', 'count', 'flag', 'tip']

对象——有类型校验

为了检测数据的正确性，只能起到提示作用，并不会阻止程序的正常运行，因为类型的检测本就不是 JS 的强项

写法一：验证传递数据的有效性 ---- 如果数据类型不对，会报出警告，可以及时调整

props: {             test: String,             count: Number,             flag: Boolean,             tip: [String, Number, Object]
}

写法二：既要验证数据的类型，又要设定属性的默认值，如果默认值是对象或者是数组，值为一个函数

props: {    test: {      type: String,           // 数据类型default: '测试数据了',       // 默认值required: true,              // 是否必传validator: function(value){return value == 0       // 是否符合某种自定义的规则}}
}

3.3 propsData 选项

propsData 和属性无关，它用在全局扩展时进行传递数据

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>propsData属性</title><script src="../assets/js/vue.js"></script></head><body><header></header><script type="text/javascript">var demo = Vue.extend({template:`<p style="color:red">这是利用propsData传递数据-----{{demo}}---{{a}}</p>`,data() {return{demo:'这里采用了插值的方式'}},props:['a']});new demo({ propsData: { a: 'propsData设置值' } }).$mount('header')</script></body>
</html>

3.4 computed 选项

在 HTML 模板表达式中放置太多的业务逻辑，会让模板过重且难以维护。因此，可以考虑将模板中比较复杂的表达式拆分到 computed 属性当中进行计算。每个计算属性都是函数的形式，不过要求必须有返回值，所以就相当于用函数的返回值来模拟一个属性值。相对于 watch 和 filters，它更适合当模板中的某个值需要通过一个或多个数据计算得到（依赖这些数据）的场景，有缓存性（页面重新渲染的时候依赖的数据不变化，会立即返回之前的计算结果，而不必再执行函数）

<div id="app"><!-- CSDN——AI-fisher -->{{ information }}
</div>
<script>    new Vue({        el: '#app',        data: {            blog: 'CSDN',            username: 'AI-fisher'},        computed: {            information () {    return `${this.blog}——${this.username}`;}}})
</script>

计算属性只在相关依赖发生改变时才会重新求值，这意味只要上面例子中的 message 没有发生改变，多次访问计算属性总会返回之前的计算结果，而不必再次执行函数，这是 computed 和 method 的一个重要区别。
计算属性默认只拥有 getter 方法，但是可以自定义一个 setter 方法。

<script>... ... ...computed: {fullName: {// getterget: function () {return this.firstName + " " + this.lastName},// setterset: function (newValue) {var names = newValue.split(" ")this.firstName = names[0]this.lastName = names[names.length - 1]}}}... ... ...// 下面语句触发setter方法，firstName和lastName也会被相应更新vm.fullName = "John Doe"
</script>

3.5 watch 选项

通过 watch 属性可以手动观察 Vue 实例上的数据变动，当然也可以调用实例上的 vm.$watch 达到相同的目的。相对于 computed 和 filters，它更适合监听某个值发生变化后，需要进行一些逻辑处理的场景，无缓存性（页面重新渲染时，就算值不变化也会执行）

浅层描述
- 基本操作

<div id="app"></div>
<script>
let vm= new Vue({        el: '#app',        data: {            blog: 'CSDN'},        watch: {            blog () {    console.log('侦听的数据变化了！');}}})
</script>

在谷歌浏览器的控制台中作如下操作

>  vm.blog                        // 初始数据
<· "CSDN"
>  vm.blog='博客园'            // 修改观测的数据侦听的数据变化了！
<· "博客园"

获取变化前和变化后的值

<div id="app"></div>
<script>    new Vue({        el: '#app',        data: {            blog: 'CSDN',            username: 'AI-fisher'},        watch: {            blog (newValue, oldValue) {    console.log(`侦听的数据变化了！新的值为：${newValue},旧的值为：${oldValue}`);}}})
</script>

>  vm.blog                   // 初始数据
<· "CSDN"
>  vm.blog='博客园'       // 修改观测的数据侦听的数据变化了！新的值为：博客园,旧的值为：CSDN
<· "博客园"

侦听的属性发生变化后执行某项功能，这个情况下，侦听属性就比计算属性有优势了

<div id="app"></div>
<script>    let vm = new Vue({el:'#app',        data:{ipt:'bmw'        },        methods:{            show(){console.log('ipt属性的值发生改变了我才会执行！')}        },        watch:{            ipt:'show'        }    });
</script>

在谷歌浏览器的控制台中作如下操作

>  vm.ipt
<· "bmw"
>  vm.ipt='AI-fisher'            侦听的数据变化了！
<· "AI-fisher"

深层描述
之前的案例对侦听的属性进行的描述不够深，如果要进行深层次的描述的话，就要用到对象来进行描述，里面还要设置一些参数。
- 设置数据从无到有时也要执行（首次运行）

<div id="app"></div>
<script>    let vm = new Vue({        el:'#app',        data:{ipt:'bmw'        },        watch:{            ipt: {                handler(newValue, oldValue){                    console.log("ipt的值从无到有我就执行！",oldValue,newValue);                },                immediate: true            }        }    });
</script>

在谷歌浏览器运行，控制台出现的结果：

ipt的值从无到有我就执行！ undefined bmw

设置深度检测（监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，性能开销大，任何修改 obj 里面任何一个属性都会触发这个监听器里的 handler）

<div id="app"></div>
<script>    let vm = new Vue({        el:'#app',        data:{            json:{a:1,b:2}        },       watch:{            json:{                handler(newValue,oldValue){console.log('深度检测！',oldValue,newValue)                },                deep: true // 深度检测 复合数据类型            }        }    });
</script>

这里因为对象用到的是索引，这是打印本身的问题，不用去管它，我们只关心前后的值确实拿到了，而且是以对象的形式呈现的。

【注】：

方法：每次都调用，强制渲染
计算属性：必须在模板中调用才能执行，性能高:，适合做筛选，基于它们的响应式依赖进行缓存
数据观测：不用在模板中渲染，默认状态下数据的从无到有不会调用，只有后期观测的数据发生变化时才会执行

3.6 methods 选项

<div id="app"><button v-on:click="showMsg">无括号调用</button>  <button v-on:click="showMsg()">加括号调用</button>
</div>
<script>new Vue({  el: '#app', data: {    msg: 'AI-fisher'  },  methods: {showMsg () {alert(this.msg);   }  }})
</script>

点击页面上的两个按钮，控制台打印的都是 "AI-fisher" ，所以说这两种调用方式是相同的效果

四、生命周期钩子函数——全部组件

4.1 简介

生命周期钩子函数其实就是 Vue 实例的选项，这些选项的值全部都是函数，代表了该实例从出生到死亡这一生当中的各阶段，只要达到该阶段就会自动触发。生命周期的钩子函数都是同步执行的，不会有异步队列，也就是初始化实例的一瞬间全部执行完毕。

4.2 图示

当初始化实例的一瞬间，它内部会构建一些响应式事件监听的机制，然后所有的钩子函数就会生成，之后接纳用户定义的那些数据，比如 data、methods 之类的。
通过 el 选项或者 vm.$mount(el) 来匹配要控制的 HTML 区域，然后拿 template 模板中的 HTML 代码去编译，如果没有的话，就直接找外面的 HTML，之后通过 VDOM 去替换真实 DOM，然后真实 DOM 就会被挂载，接下来就会处于一种停歇的状态。
当用户更新 model 层的数据，VDOM 就会重新渲染，这种可更新状态一直持续到组件被 vm.$destory 卸载，卸载后数据观测以及里面的子实例身上绑定的相应式监听式事件会被全部取消，之后再来修改 model 层数据不会有任何效果。

4.3 辅助理解

初始化阶段

beforeCreate(){} // 准备怀孕
created(){} // 怀上了
beforeMount(){} // 准备生
mounted(){} // 生下来了

运行阶段

beforeUpdate(){} // 每天都在长大
updated(){} // 每次成长后

销毁阶段

beforeDestroy(){} // 即将舍弃肉身
destroyed(){} // 羽化登仙

4.4 使用

mounted 中能拿到所有的数据，是最安全的选择。当然，在***created*** 或者 mounted 中都可以请求数据，如果必须使用 DOM 操作，那么可以在 mounted 和 updated 中进行。以下对一些数据在各阶段进行了测试：

初始化阶段

beforeCreate
拿不到：data 数据、实例方法、ref 元素（真实的 DOM 元素）
能拿到：钩子函数、自定义选项

created
拿不到：ref 元素（真实的 DOM 元素）
能拿到：data 数据、实例方法、钩子函数、自定义选项

beforeMount
拿不到：ref 元素（真实的 DOM 元素）
能拿到：data 数据、实例方法、钩子函数、自定义选项

mounted
能拿到所有
当然，之后的钩子函数（除了销毁之后）肯定也能拿到所有，不用再做讨论

运行时阶段

beforeUpdate
能拿到所有
打印的是更新后的数据，但是当这个钩子打印的时候，数据并没有渲染到页面，也就是 VDOM 更新了，但真实 DOM 并没有更新

updated
能拿到所有
这个钩子是在真实 DOM 已经渲染完成后才执行函数中的业务逻辑

销毁阶段

beforeDestroy
能拿到所有

destroyed
拿不到：ref 元素（真实的 DOM元素）
能拿到：data 数据、实例方法、钩子函数、自定义选项

4.5 多组件生命周期关系

五、生命周期钩子函数——缓存组件

缓存组件包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。是一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
当动态组件在缓存组件内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

六、资源

6.1 directives 选项

该选项可以配置组件专属的指令

使用：在自定义的指令名称前面加上 v-前缀 使用即可
配置

directives: {"local-test": function(el, binding, vnode) {/** el 可以获取当前 DOM 节点，并且进行编译，也可以操作事件 **//** binding 指的是一个对象，一般不用 **//** VNode 是 Vue 编译生成的虚拟节点 **/el.style.border = "1px solid red"; //操作 style 所有样式console.log(el.value); //获取 v-model 的值console.log(el.dataset.name); // data-nam e绑定的值，需要 el.dataset 来获取console.log(vnode.context.$route); //获取当前路由信息}
},

6.2 filters 选项

该选项可以配置组件专属的过滤器，相对于 computed 和 filters，它更适合对自身数据进行一些处理，比如日期格式化，无缓存性

使用：现在只能在 mustache 插值和 v-bind 表达式中使用，用 | （过滤管道符）把需要过滤的值和过滤器连接起来

<!-- 在双花括号中 -->
{{ message | capitalize }}<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

配置

filters: {capitalize (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}
}

6.3 components 选项

<div id="app"><my-header></my-header>
</div><script>import MyHeader from './components/MyHeader'const vm = new Vue({el: '#app',components: {'my-header': MyHeader} })
</script>

七、组合

7.1 parent 选项

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

let parentVm = new Vue({el: "#app",data: {msg: "parent"}
});let childVm = new Vue({data: {msg_: "child"},methods: {getChildVmFunc() {console.log("the root data is: " + this.$parent.msg);   // parent}},parent: parentVm
});

7.2 mixins 选项

用来将指定的 mixin 对象复用到 Vue 组件当中

// mixin对象
var mixin = {created: function () {console.log("mixin 钩子")},methods: {foo() {console.log("foo")},conflicting() {console.log("mixin conflicting")}}
}// vue属性
var vm = new Vue({mixins: [mixin],created: function () {console.log("self 钩子")},methods: {bar() {console.log("bar")},conflicting() {console.log("self conflicting")}}
})// mixin 钩子
// self 钩子
vm.foo() // foo
vm.bar() // bar
vm.conflicting()    // self conflicting

同名组件 option 对象的属性会被合并为数组依次进行调用，其中 mixin 对象里的属性会被首先调用。如果组件 option 对象的属性值是一个对象，则 mixin 中的属性会被忽略掉。

7.3 extends 选项

Vue 的 extends 和 mixins 类似，通过暴露一个 extends 对象到组件中使用。
extends 会比 mixins 先执行。执行顺序：extends > mixins > 组件
extends 只能暴露一个 extends 对象，暴露多个 extends 不会执行

// 暴露两个 mixins 对象
export const mixinsTest = {methods: {hello() {console.log("hello mixins");}},beforeCreate(){console.log("混入的beforeCreated");},created() {this.hello();},
}export const mixinsTest2 = {methods:{hello2(){console.log("hello2");}},created() {this.hello2();},
}// 只能使用一个 extends 对象，多个无效，extends 会先于 mixins 执行
export const extendsTest = {methods: {hello3() {console.log("hello extends");}},beforeCreate(){console.log("extends的beforeCreated");},created() {this.hello3();},
}// vue组件
<template><div>home</div>
</template>
<script>
import {mixinsTest,mixinsTest2,extendsTest} from '../util/test.js'
export default {name: "Home",data () {return {};},beforeCreate(){console.log("组件的beforeCreated");},created(){console.log("1212");},mixins:[mixinsTest2,mixinsTest], // 先调用哪个 mixins 对象，就先执行哪个extends:extendsTest  // 使用extends
}
</script>
<style lang="css" scoped>
</style>

7.4 provide && inject 选项

实现跨组件传值，数据的流只能是向下传递，本身是非响应式的，但是可以通过传一个响应式数据来实现响应式

provide：根组件（指需要传递的数据所在的最外层组件，而非 App.vue）进行使用，用来给后代组件注入依赖（属性或方法）
inject：子组件进行使用，用来获取根组件定义的跨组件传递的数据

<template><div id="app"><h1>数据源的根组件</h1><ChildN /></div>
</template><script>
import ChildN from './components/ChildN'
export default {components:{ChildN,},// 方法模式 ( 推荐使用 )。// provide(){//  return{//   'userName': 'AI-fisher'//  }// }// 对象模式provide : {  "userName": 'AI-fisher',}
}
</script>

ChildN.vue

<template><div class="box"><h2>某一个后代组件</h2><h3>接受到根组件的传递的数据{{ userName1 }}</h3></div>
</template><script>
export default {// 数组接收// inject: ['userName']   // 对象接收// inject : {                   //   userName1: 'userName'// }inject : {                   userName1: { // 指定别名，为了避免和 props 之类的重名冲突from: 'userName', // 原名default : '默认值'  // 指定默认值}}
}
</script>

八、其它

8.1 name 选项

name 选项就是给该组件起一个唯一的名字，有如下作用：

项目中有缓存组件时，name 可以用作 include 和 exclude 的值
递归组件，顾名思义，就是在自己的内部实现需要调用自身
调试用，在 vue-tools 调试时，显示的就是 name 选项的值

8.2 delimiters 选项

作用是改变我们插值的符号，Vue 默认的插值是双大括号 {{ }} ，在一些特殊的情况下我们可能会用到其他的方式绑定插值，比如避免在一些使用 {{ }} 绑定数据的开发模式中和 Vue 冲突

// 将插值形式变成${}
delimiters : [ '${' , '}' ]

8.3 functional 选项

把组件变成只接受 prop 的函数组件，无状态（没有响应式数据），没有实例（ this 上下文），只用来展示

// template 写法
// props 父组件传递的数据
<template functional><div>{{props.name}}</div>
</template>// jsx 写法
Vue.component('my-component', {functional: true,// 可选props: {},render (createElement, context) {}
})

8.4 model 选项

该选项允许一个自定义组件在使用 v-model 时定制 prop 和 event。v-model 只是语法糖，默认情况下，一个组件上的 v-model 会把 value 用作 prop 属性值且把 input 用作 event 属性值，现在拆分一个例子

// 分解后 <my-input :value="foo" @input="val => { foo = val }"></my-input>
<my-input v-model="foo"></my-input>

Vue.component('my-input', {model: {prop: 'value',event: 'input',},props: {value: String,},template: '<input type="text" :value="value" @input="$emit($event.target.value)"/>',
})

通过上面的分析，默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用 v-model 并不能实现双向绑定，因为自定的组件并没有默认的 value 和 input 事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model 选项就派上用场了，在定义组件的时候，指定 prop 的值和监听的事件。
所以要想自定义 v-model，比如改为

<my-input :foo="foo" @change="val => { foo = val }"></my-input>

那么，可以这样实现

<my-input v-model="foo"></my-input>

Vue.component('my-input', {model: {prop: 'foo',   // 绑定值修改为 fooevent: 'change',  // 事件修改为 change},props: {foo: String,  // 此时父组件传递过来的变量就是 foo},template: '<input type="text" :value="value" @input="$emit($event.target.value)"/>',
})

8.5 inheritAttrs 选项

官方：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false

父组件

<template><div class="parent"><child-component user="AI-fisher"></child-component></div>
</template>
<script>
import ChildComponent from './child-component'
export default {components: {ChildComponent}
}
</script>

子组件（inheritAttrs: true）

<template><div class="child">子组件</div>
</template>
<script>
export default {inheritAttrs: true,mounted() {console.log(this.$attrs) // {user: 'AI-fisher'}}
}
</script>

渲染结果

<div ...... class="parent"><div ...... class="child" user="AI-fisher">子组件</div>
</div>

子组件（ inheritAttrs: false ）

<template><div class="child">子组件</div>
</template>
<script>
export default {inheritAttrs: false,mounted() {console.log(this.$attrs) // {user: 'AI-fisher'}}
}
</script>

渲染结果

<div ...... class="parent"><div ...... class="child"">子组件</div>
</div>

总结：
由上述例子可以看出，前提：子组件的 props 中未注册父组件传递过来的属性。

当设置 inheritAttrs: true（默认）时，子组件的顶层标签元素中（本例子的 div 元素）会渲染出父组件传递过来的属性
当设置 inheritAttrs: false 时，子组件的顶层标签元素中（本例子的 div 元素）不会渲染出父组件传递过来的属性
不管 inheritAttrs 为 true 或者 false，子组件中都能通过 $attrs 属性获取到父组件中传递过来的属性

8.6 comments 选项

这个选项只在完整构建版本中的浏览器内编译时可用。当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

new Vue({el: '#app',comments: true,...App
})

配置 Vue 实例（选项）相关推荐

Vue复习知识点（理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....）
Vue复习知识点一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
Vue 实例之全局API，实例属性，全局配置，组件进阶
文章目录写在前面 Vue 全局 API Vue.directive Vue.use Vue.extend Vue.set Vue.mixin Vue 实例属性 vm.$props vm.$optio ...
Vue01-创建Vue实例以及各选项含义
1.创建Vue实例 Vue实例:通过new关键字实例化Vue({})构造函数 <script>var vm = new Vue({//选项 }); Vue实例配置对象: data:Vue实 ...
vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？
大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue ...
Vue基础之Vue实例
构造器: 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的: 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项. ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

配置 Vue 实例（选项）

文章目录

一、总览

二、DOM

2.1 el && template 选项

2.2 render 选项

2.3 renderError 选项

三、数据

3.1 data 选项

3.2 props 选项

3.3 propsData 选项

3.4 computed 选项

3.5 watch 选项

3.6 methods 选项

四、生命周期钩子函数——全部组件

4.1 简介

4.2 图示

4.3 辅助理解

4.4 使用

4.5 多组件生命周期关系

五、生命周期钩子函数——缓存组件

六、资源

6.1 directives 选项

6.2 filters 选项

6.3 components 选项

七、组合

7.1 parent 选项

7.2 mixins 选项

7.3 extends 选项

7.4 provide && inject 选项

八、其它

8.1 name 选项

8.2 delimiters 选项

8.3 functional 选项

8.4 model 选项

8.5 inheritAttrs 选项

8.6 comments 选项

配置 Vue 实例（选项）相关推荐

最新文章

热门文章

配置 Vue 实例（ 选项 ）

文章目录

一、总览

二、DOM

2.1 el && template 选项

2.2 render 选项

2.3 renderError 选项

三、数据

3.1 data 选项

3.2 props 选项

3.3 propsData 选项

3.4 computed 选项

3.5 watch 选项

3.6 methods 选项

四、生命周期钩子函数——全部组件

4.1 简介

4.2 图示

4.3 辅助理解

4.4 使用

4.5 多组件生命周期关系

五、生命周期钩子函数——缓存组件

六、资源

6.1 directives 选项

6.2 filters 选项

6.3 components 选项

七、组合

7.1 parent 选项

7.2 mixins 选项

7.3 extends 选项

7.4 provide && inject 选项

八、其它

8.1 name 选项

8.2 delimiters 选项

8.3 functional 选项

8.4 model 选项

8.5 inheritAttrs 选项

8.6 comments 选项

配置 Vue 实例（ 选项 ）相关推荐

最新文章

热门文章

配置 Vue 实例（选项）

配置 Vue 实例（选项）相关推荐