本篇文章和大家了解一下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 -> 组件的 JavaScript 行为
style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。vue 规定:每个组件对应的模板结构,需要定义到 节点中。
生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}
我在黑马程序员学习vue. js
template>这是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组件的组成部分有几个的简略介绍,当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多,欢迎关注创新互联行业资讯频道哦!