vue组件

来源：互联网发布：stm32单片机编程软件编辑：程序博客网时间：2024/05/01 22:20

组件是vue中比较重要的一个组成部分，定义一个组件之后可以在整个项目中重复使用，提高代码的利用率。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Vue组件练习，全部使用最新的2.0版本</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><!--注册组件的方式--><!--1.普通注册--><div id="demo"><my-zujian></my-zujian><my-zujian></my-zujian><my-zujian></my-zujian><my-zujian></my-zujian></div><script type="text/javascript">//先定义一个构造器，Vue.extend()是创建组件构造器var mygouzaoqi=Vue.extend({//template是构造器的选项对象,用来定义组件要渲染的HTMLtemplate:'<div>这个就是要渲染的内容</div>'})//注册:注册组件要两个参数，第一个参数是组件的标签，第二个参数是组件的构造器Vue.component('my-zujian',mygouzaoqi)//最后一步,创建根实例,因为组件必须要挂载到某个Vue实例下面,否则不会生效.new Vue({el:'#demo'});</script></body></html>

上面这种注册方式是常见的注册方式，还有局部注册方式。意思很明显，就是作用于局部的注册，注册之后的组件只在某一个区域可以使用，有兴趣的朋友可以在官网查询示例。

不过真正做项目的话，还是不太建议大家直接引入vue.js，还是安装vue-cli比较好。

安装了脚手架之后的注册方式也是差不多。

1.通过import 引入你的组件。

2.注册组件。

3.使用。

听不懂是吧，没事，下面有图。