本文主要是介绍vue: 定义组件template，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vue渲染文档除了html模版之外，还有template和render，我们来了解一下template。
基础使用方法:
注意的点:
- 会覆盖之前的dom节点
2. 需要一个根dom节点
<div id="app">
</div>
<script>new Vue({el : "#app",template : "<div>{{ name }}<div>123</div></div>",// 覆盖dom节点
// 需要一个根节点
data : {name : "fanghuayong" },})
</script> 组件化开发的优点:
1.代码复用
2.降低代码偶合性 出问题容易找问题
template渲染多份模版
问题: 一个vue实例只会控制一段html代码
解决: vue是一个构造函数，Vue.component()方法可以解决这个问题
知识点:
- 第一参数: 定义组件的名字
- 第二参数: 是个对象
全局组件
全局组件可以在vue控制的任意模版下使用
<div id="app"><my-component></my-component><my-component></my-component><my-component></my-component>
</div>
<div id="app2">
</div>
<script>Vue.component('my-component', {template: "<div>我是全局组件<div>{{ name }}</div></div>",// 使用vue.component定义组件
// 第一参数: 定义组件的名字
// 第二参数: 是个对象
// 全局组件: 可以在vue控制的任意模版下使用
data: function() {// data字段必须是函数
return{name : 'lizhuli'}}})new Vue({el : "#app",data : {name : "fanghuayong" },})new Vue({el: '#app2',template: '<my-component></my-component>'})
</script> 局部组件
仅在实例控制的html代码段里可以使用
new Vue({el : "#app",data : {name : "fanghuayong" },// 局部组件
components: {'my-fanghuayong' : {template: '<div>这是局部组件</div>'}}
})
注册组件的data字段
必须写函数返回retrun形式，直接写对象会报错
Vue.component('my-component', {template: "<div>我是全局组件组件<div>{{ name }}</div></div>",// data字段必须是函数
data: function() {return{name : 'data字段必须用函数'}}
})
如果data是一个对象会发生什么？
对象都是引用同一个内存地址，改变一个会发生所有改变
<div id="app"><my-component></my-component><my-component></my-component><my-component></my-component><my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let data = {count : 0}Vue.component('my-component', {template : "<div @click = 'count++'>{{ count }}</div>",function() {return data;}})new Vue({el : "#app",})
</script> 当++的时候，所有的都在跟在改变
Vue.component('my-component', {template : "<div @click = 'count++'>{{ count }}</div>",data : function() {return {count : 0}}
})
如果是内部对象就不会受影响，所以只能使用函数。
命名规范
fanghuayong-alert
fanghuayongAlert
这篇关于vue: 定义组件template的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
