vue.js的组件和模板 _vue模板

一、Vue.js组件我们在vue.js框架快速入门简明教程(六)：组件讨论过有关vue.js组件的创建和使用方式，在这里在来补充一下，Vue.js组件需要注册，无论是全局还是局部，都需要经过以下几个步骤才能被使用，但是我们一般都是使用局部注册组件，以便以后在其他地方可以使用这个组件。

文章图片
例如：

< div id="example"> < my-component>< /my-component> < /div>< /body> < script type="text/javascript"> // 定义 var MyComponent = Vue.extend({ template: '< div>我是vue.js组件< /div>' }) // 注册 Vue.component('my-component', MyComponent) // 创建根实例 new Vue({ el: '#example' }) < /script>输出：我是vue.js组件

二、vue.js模版【vue.js的组件和模板】模版是可以被浏览器直接解析的html语句，所以创建模版要比创建组件简单很多。定义模版时，我也建议把模版写出来，不要写到vue.js里面，这样需要修改模版的时候就直接修改，不用搞懂数据，看起来也清晰。
例如：

< template id="template"> < h1>vue.js模版< /h1> < /template> //创建模版< /body> < script type="text/javascript"> var app=new Vue({ el:"#example", data:{ }, template:"#template"//挂载模版 }) < /script>

三、组件和模版之间的联系通过上面的例子，我们会发现，组件中包含着模版。使用组件的时候就用到了组件里面的模版，更加整体，更加注重数据传递。注册的组件可以用组件名来做html标签，而模版是html代码块，更加注重样式。