本篇文章和大家了解一下vue组件的组成部分有几个。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
创新互联公司是专业的寿光网站建设公司，寿光接单;提供网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行寿光网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
vue组件由3部分组成：1、template，设置组件的模板结构；2、script，设置组件的JavaScript行为；3、style，设置组件的样式。每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分；“”是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。”是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质 上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成，分别是：
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。vue 规定：每个组件对应的模板结构，需要定义到 节点中。
生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}
我在黑马程序员学习vue. js
这是App根组件
这是副标题
但是，在 vue 3.x 的版本中， 中支持定义多个根节点：
这是App根组件
这是副标题
组件的 script 节点
vue 规定：组件内的
script 中的 name 节点
可以通过 name 节点为当前组件定义一个名称，代码如下：
在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件：
script 中的data节点
vue 组件渲染期间需要用到的数据，可以定义在data 节点中：
其中组件中的data 必须是函数，vue 规定：组件中的data 必须是一个函数，不能直接指向一个数据对象。因此在组件中定义data 数据节点时，下面的方式是错误的：
data: { //组件中，不能直接让data 指向一个数据对象(会报错)
count: 0
}script 中的methods节点
组件中的事件处理函数，必须定义到methods 节点中，示例代码如下：
export default {
name :' MyApp', //组件的名称
data() { //组件的数据
return {
count: 0,
}
},
methods: { //处理函数
addCount() {
this . count++
},
},
}组件的style 节点
vue 规定：组件内的
其中
以上就是vue组件的组成部分有几个的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注创新互联行业资讯频道哦！
文章名称：vue组件的组成部分有几个
新闻来源：
http://bjjierui.cn/article/gehpog.html
