<p><strong>后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失,最后变得像挨了锤的牛一样。</strong><br /><strong>                                         ——王小波</strong><br /><strong>三、组件对象</strong><br />在组件中被<code>&lt;script&gt;</code>包裹的代码可以看成是一个对象,也就是vue实例。下面将简单介绍vue实例的属性:</p> <p><strong>1. 数据</strong><br />这里的数据可以看做是<strong>MVVM</strong>中的<strong>model</strong>层,用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。<br />关于<strong>MVVM</strong>,可阅读此文章:<br /><a href="http://www.cnblogs.com/SanMaoSpace/p/3215490.html" rel="nofollow noreferrer" target="_blank">http://www.cnblogs.com/SanMao...</a><br />按照vue官网的归类,可将以下属性归类到数据类属性当中:</p> <li> <ul> <li> <p><strong>data</strong><br /> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 实例的数据对象。<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。(是通过getter和setter来修改和获取数据的)。</p> </li> </ul> <p><strong>注意:angular中双向数据绑定的实现原理是对<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>或xhr事件做了定制,在里面触发digest(脏检查)流程,去检查所有的watcher,从而更新数据。VUE则是使用ES5提供的Object.define<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>erty() 方法,监控对数据的操作,从而可以自动触发数据同步,更加的精准,省事。</strong></p> </li> <ul> <li> <p><strong>props</strong><br /> props 可以是<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>或对象,用于接收来自父组件的数据。也就是之前说过的父传子的prop方法。</p> </li> <li> <p><strong>propsData</strong><br /> 此属性只用于 new 创建的实例中。在创建实例时传递 props。主要作用是方便测试。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/*通过VUE实例创建一个子类Comp,这个子类有一个props属性*/ var Comp = <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.extend({<br /> props: ['msg'],<br /> template: '</p> <div>{{ msg }}</div> <p>'<br /> })<br /> /*new一个Cmop对象的时候,我希望把props传过去(模仿父级的操作),但是又没有父级,就可以以下面的方式实现*/<br /> var vm = new Comp({<br /> propsData: {<br /> msg: 'hello'<br /> }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">/*通过VUE实例创建一个子类Comp,这个子类有一个props属性*/</span> <span class="hljs-keyword">var</span> Comp = Vue.extend({ props: [<span class="hljs-string">'msg'</span>], template: <span class="hljs-string">'&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;{{ msg }}&lt;/div&gt;'</span> }) <span class="hljs-comment">/*new一个Cmop对象的时候,我希望把props传过去(模仿父级的操作),但是又没有父级,就可以以下面的方式实现*/</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Comp({ propsData: { msg: <span class="hljs-string">'hello'</span> } })</code></pre> </li> <li> <p><strong>computed</strong><br /> 计算属性,此属性是一个对象,用于定义对data中的数据进行操作的方法。分为读取和设置,也就对应了data的getter和setter。这个对象的方法中的<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>都是指向vue实例的data属性。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取,值只须为函数 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { // get方法返回处理后的数据,不会改变原本的data return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // -> 2<br /> vm.aPlus = 3<br /> vm.a // -> 2<br /> vm.aDouble // -> 4" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ data: { a: <span class="hljs-number">1</span> }, computed: { <span class="hljs-comment">// 仅读取,值只须为函数</span> aDouble: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.a * <span class="hljs-number">2</span> }, <span class="hljs-comment">// 读取和设置</span> aPlus: { <span class="hljs-keyword">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-comment">// get方法返回处理后的数据,不会改变原本的data</span> <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.a + <span class="hljs-number">1</span> }, <span class="hljs-keyword">set</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(v)</span> </span>{ <span class="hljs-keyword">this</span>.a = v - <span class="hljs-number">1</span> } } } }) vm.aPlus <span class="hljs-comment">// -&gt; 2</span> vm.aPlus = <span class="hljs-number">3</span> vm.a <span class="hljs-comment">// -&gt; 2</span> vm.aDouble <span class="hljs-comment">// -&gt; 4</span></code></pre> </li> <li> <p><strong>methods </strong><br /> methods和computed都是用来提供操作数据的方法的属性,两者的区别在于computed中有在相关的数据发生改变时才会再次触发computed,而在模版重新渲染时,而相关数据没有变化时并不会触发。methods在重新渲染时就会触发,在应用场景中提现:<br /> 比如当需要求和时,使用计算属性更加贴切,在<strong>angula</strong>r中,通常都是直接在html中以<code>{{a+b+c}}</code>的形式来展示和,vue的计算属性可以说就是为了让模版中不该出现逻辑而提供的属性。<br /> methods主要是事件触发方法,表单提交,页面控制等场景时使用。</p> </li> <li> <p><strong>watch</strong><br />watch属性用于监听数据的变化,当数据发生变化时,需要做什么操作。和computed(计算属性)很相似,都是当相关的数据发生变化时执行。当你想要在数据变化响应时,执行异步操作或开销较大的操作,应该使用watch。使用 watch 选项允许我们执行异步操作(访问一个 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。</p> </li> </ul> <p><strong>2.<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></strong><br />除了在*.vue文件的&lt;template&gt;中声明之外,还可以通过el'、template、render来增加模版</p> <ul> <li> <p><strong>el</strong><br />只能在创建一个VUE实例的时候使用</p> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="new Vue({ el: '#some-element', // 选项 })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Vue</span>({ <span class="hljs-attribute">el</span>: <span class="hljs-string">'#some-element'</span>, // 选项 })</code></pre> <ul> <li> <p><strong>template</strong><br />在注册组件的时候使用,其效果和*.vue文件中的template效果是一样样的。</p> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.component('my-component', { template: ' <div>A custom component!</div> <p>'<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>Vue.component(<span class="hljs-string">'my-component'</span>, { template: <span class="hljs-string">'&lt;div&gt;A custom component!&lt;/div&gt;'</span> })</code></pre> <ul> <li> <p><strong>render</strong><br />render是一个方法,让你发挥最大的编程能力去编写一个html模版,类似于<strong>react</strong>的<strong>jsx</strong>语法,减少html中冗长的代码。</p> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.component('anchored-heading', { render: function (createElement) { return createElement( 'h' + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>Vue.component(<span class="hljs-string">'anchored-heading'</span>, { render: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">createElement</span>) </span>{ <span class="hljs-keyword">return</span> createElement( <span class="hljs-string">'h'</span> + <span class="hljs-keyword">this</span>.level, <span class="hljs-comment">// tag name 标签名称</span> <span class="hljs-keyword">this</span>.$slots.default <span class="hljs-comment">// 子组件中的阵列</span> ) }, props: { level: { <span class="hljs-keyword">type</span>: <span class="hljs-built_in">Number</span>, required: <span class="hljs-literal">true</span> } } })</code></pre> <p><strong>3.<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="生命周期钩子" target="_blank">生命周期钩子</a></strong></p> <p>咱们说,组件有他的生命周期,从创建到销毁,那么我们有没有办法监听到组件的生命周期呢?答案是有的,就是<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="生命周期钩子" target="_blank">生命周期钩子</a>。为组件增加对应的<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="浏览关于“生命周期钩子”的文章" target="_blank" class="tag_link">生命周期钩子</a>,就可以对组件的创建销毁做到可控制了。</p> <hr> <ul> <li> <p><strong>beforeCreate</strong>: 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。</p> </li> </ul> <hr> <ul> <li> <p><strong>create</strong>: 实例已经创建完成之后被调用,在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。</p> </li> </ul> <hr> <ul> <li> <p><strong>beforeMount</strong>: 在挂载开始之前被调用:相关的 render 函数首次被调用。</p> </li> </ul> <hr> <ul> <li> <p><strong>mounted</strong>: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。</p> </li> </ul> <hr> <ul> <li> <p><strong>beforeUpdate</strong>: 数据更新时调用,发生在虚拟 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> 重新渲染和打补丁之前。</p> </li> </ul> <hr> <ul> <li> <p><strong>updated</strong>: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。</p> </li> </ul> <hr> <ul> <li> <p><strong>activated</strong>: keep-alive 组件激活时调用。</p> </li> </ul> <hr> <ul> <li> <p><strong>deactivaed</strong>: keep-alive 组件停用时调用。</p> </li> </ul> <hr> <ul> <li> <p><strong>beforeDestory</strong>: 实例销毁之前调用。在这一步,实例仍然完全可用。</p> </li> </ul> <hr> <ul> <li> <p><strong>destroyed</strong>: Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。</p> </li> </ul> <hr> <p>其中,只有beforeCreate和Create在服务器端渲染期间可以使用,而其他钩子均不能使用。<br />用法如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="export default { name: 'test', methods: { goPage: function () { this.$router.push('/') } }, components: { // 同样要注入Bus Bus }, data () { return { whiteSay: 'nihao' } }, created: function() { // 在组件被创建时候将会执行此函数 相当于进入页面的自执行 var _self = this; // 将当前作用域保存在变量中,和$on()的作用域区分开来 Bus.$on('whiteSay', function(data) { // 使用$on方法监听white属性并执行一个回调函数 _self.whiteSay = data console.log(_self.whiteSay) }); } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'test'</span>, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">goPage</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.$router.push(<span class="hljs-string">'/'</span>) } }, <span class="hljs-attr">components</span>: { <span class="hljs-comment">// 同样要注入Bus</span> Bus }, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">whiteSay</span>: <span class="hljs-string">'nihao'</span> } }, <span class="hljs-attr">created</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 在组件被创建时候将会执行此函数 相当于进入页面的自执行</span> <span class="hljs-keyword">var</span> _self = <span class="hljs-keyword">this</span>; <span class="hljs-comment">// 将当前作用域保存在变量中,和$on()的作用域区分开来</span> Bus.$on(<span class="hljs-string">'whiteSay'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{ <span class="hljs-comment">// 使用$on方法监听white属性并执行一个回调函数</span> _self.whiteSay = data <span class="hljs-built_in">console</span>.log(_self.whiteSay) }); } }</code></pre> <p>4.<strong>资源</strong><br />在angular中,有指令、过滤器等好用的方法,VUE中同样也存在,并把他们归类到了资源当中。</p> <ul> <li> <p><strong>directive</strong>: 除了v-bind,v-model等vue自带的指令之外,也允许注册自定义的指令。用法如下:<br />注册全局的指令:</p> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-comment">// 注册一个全局自定义指令 v-focus</span> Vue.directive(<span class="hljs-string">'focus'</span>, { <span class="hljs-comment">// 当绑定元素插入到 DOM 中。</span> inserted: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{ <span class="hljs-comment">// 聚焦元素</span> el.focus() } })</code></pre> <p>注册局部的指令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="export default { data: () { return { whiteSay: 'nihao' } }, directives: { focus: { // 指令的定义--- } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">export</span> <span class="hljs-selector-tag">default</span> { <span class="hljs-attribute">data</span>: () { return { whiteSay: <span class="hljs-string">'nihao'</span> } }, <span class="hljs-selector-tag">directives</span>: { <span class="hljs-attribute">focus</span>: { // 指令的定义--- } } }</code></pre> <p>然后在html中使用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<input v-focus>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">v-focus</span>&gt;</span></code></pre> <p>关于自定义指令的详细内容请参考:<a href="https://cn.vuejs.org/v2/guide/custom-directive.html" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide...</a></p> <ul> <li> <p><strong>filter</strong>:vue2.0舍弃的自带的过滤器,提供了fitler属性来自定义过滤器。具体代码如下:</p> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="new Vue({ filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Vue</span>({ <span class="hljs-attribute">filters</span>: { capitalize: function (value) { if (!value) return <span class="hljs-string">''</span> value = value.<span class="hljs-built_in">toString</span>() return value.<span class="hljs-built_in">charAt</span>(0).<span class="hljs-built_in">toUpperCase</span>() + value.<span class="hljs-built_in"><a href="http://www.js-code.com/tag/slice" title="浏览关于“slice”的文章" target="_blank" class="tag_link">slice</a></span>(1) } } })</code></pre> <ul> <li> <p><strong>components</strong>: 当组件中需要用到其他的组件时,需要使用components属性去创建一个哈希表。<br />具体用法如下:</p> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <!-- 包含dagger组件 --><br /> <dagger></dagger> </div> <p></template><br /> <script> import Dagger from './components/Dagger' // 引入Dagger组件</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', components: { Dagger // 在components中添加dagger组件的哈希表 }, data () { return { noSay: '' } }, methods: { toFatherSay: function(massage) { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.noSay = massage }, changeDagger: function() { this.$store.commit('daggerCtrl') } } } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 包含dagger组件 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">dagger</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">dagger</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> Dagger <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/Dagger'</span> <span class="hljs-comment">// 引入Dagger组件</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, <span class="hljs-attr">components</span>: { Dagger <span class="hljs-comment">// 在components中添加dagger组件的哈希表</span> }, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">noSay</span>: <span class="hljs-string">''</span> } }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">toFatherSay</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">massage</span>) </span>{ <span class="hljs-keyword">this</span>.noSay = massage }, <span class="hljs-attr">changeDagger</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">'daggerCtrl'</span>) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p><strong>收尾</strong></p> <p>除了上面这些属性,还有一些杂项,详情请看官网:<br /><a href="http://cn.vuejs.org/v2/api/#parent" rel="nofollow noreferrer" target="_blank">http://cn.vuejs.org/v2/api/#p...</a></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_16855.html