Vue学习日记2——组件注册的三种方式
程序员文章站
2024-03-15 10:43:11
...
本文使用直接在html中引用vue.js的方式测试组件注册方法。
新建test.html文件，作为测试代码源文件。
将vue.js放入test.html相同的目录，然后编写如下代码。
<!DOCTYPE html>
<html>
<script src="vue.js"></script>
<h1>vue learn & test</h1>
<div id="componentsdemo">
<bc1></bc1>
<bc2></bc2>
<bc3></bc3>
</div>
<script type="text/javascript">
#第一种方式调用全局注册组件函数（参数1：组件名，参数2：扩展的组件构造器）
Vue.component("bc",
Vue.extend({
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked bc {{ count }} times.</button>'
})
)
#第二种方法 创建vue实例时，传入extend的构造器
var bc1=Vue.extend({
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked bc1 {{ count }} times.</button>'
});
#第三种方法 创建vue实例时，传入选项对象
var bc2={
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked bc2 {{ count }} times.</button>'
}
new Vue({
el: '#componentsdemo'
,
components:{bc1,bc2}
})
</script>
</html>
上一篇： 泛型——泛型类
下一篇： 泛型讨论------堆栈类