Vue.extendコンストラクタ
3319 ワード
Vue.js公式サイト解釈:
Vue.extend( options )
パラメータ:
{Object} options
使用方法:
ベースVueコンストラクタを使用して、サブクラスを作成します.パラメータは、コンポーネントオプションを含むオブジェクトです.
また、ネットで見た3つのVue.jsのCNDリソースは、必要な学生にお勧めします.
BootCDN(国内):https://cdn.bootcss.com/vue/2.2.2/vue.min.js; unpkg(海外):https://unpkg.com/vue/dist/vue.js;npmリリースの最新バージョンと一致します.cdnjs(海外):https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js;
書いたVueを貼るextend()のdemoは、直接copyで実行すればOKです.
Vue.extend( options )
パラメータ:
{Object} options
使用方法:
ベースVueコンストラクタを使用して、サブクラスを作成します.パラメータは、コンポーネントオプションを含むオブジェクトです.
dataオプションは特例です.注意してください.Vue.extend()では関数でなければなりません.また、ネットで見た3つのVue.jsのCNDリソースは、必要な学生にお勧めします.
BootCDN(国内):https://cdn.bootcss.com/vue/2.2.2/vue.min.js; unpkg(海外):https://unpkg.com/vue/dist/vue.js;npmリリースの最新バージョンと一致します.cdnjs(海外):https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js;
書いたVueを貼るextend()のdemoは、直接copyで実行すればOKです.
<script src="https://unpkg.com/vue/dist/vue.js" charset="utf-8"/>
<div id="mount">
<animal/>
<hello/>
</div>
<script type="text/javascript">
//Vue.extend() , Vue ， “ ”。 。
//data ， Vue.extend()
var animal = Vue.extend({// animal
template:'<h1>I am is one {{animal}}</h1>',
data:function(){
return {
animal:'cat'
}
}
});
var hello = Vue.extend({// hello
template:'<h1>Hello World!</h1>',
});
new Vue({
el:"#mount",//
components:{//
'animal':animal,
'hello':hello
}
})
</script>
</code></pre>
<p><br/> ， <span style="color:#ff0000;">vue-cli </span> ：</p>
<p> </p>
<p>template a.vue ， a ， exprot default{} ， b.vue a , b.vue import a ， b.vue a.vue 。 </p>
<p>vue-cli ；</p>
<p> </p>
<p> </p>
<pre><code><!--a.vue-->
<template>
<h1>Hello World!</h1>
</template>
<script type="text/ecmascript-6">
//
export default{};
</script></code></pre>
<p> </p>
<pre><code><!--b.vue-->
<template>
<aa/>
</template>
<script type="text/ecmascript-6">
//a a ，
import a from "a.vue";
export default{
components:{
"aa":a
}
};
</script></code></pre>
<p> </p>
<p> </p>
<p>------------------------------------------------- --------------------------------------------------------------------------</p>
<p> </p>
<p> </p>
<p> github ， demo:</p>
<p>https://github.com/vuejs/vue/blob/7b069453edbf7fd03363a63d040396d274a79757/test/unit/features/options/extends.spec.js</p>
<p> </p>
<pre><code>const A = {
data () {
return { a: 1 }
}
}
const B = {
extends: A,
data () {
return { b: 2 }
}
}
const vm = new Vue({
el:"#app",
extends: B,
data: {
c: 3
}
})
console.log(vm.a);
console.log(vm.b);
console.log(vm.c);</code></pre>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>