vue组件由几部分组成-前端问答-PHP中文网

vue组件由3部分组成：1、template，设置组件的模板结构；2、script，设置组件的JavaScript行为；3、style，设置组件的样式。每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分；“ ”是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。 ”是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质 上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构

script -> 组件的 JavaScript 行为

style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。vue 规定：每个组件对应的模板结构，需要定义到 节点中。

登录后复制 注意： 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。

在 template 中使用指令

在组件的 节点中，支持使用前面所学的指令语法，来辅助开发者渲染当前组件的 DOM 结构。代码示例如下：

这是App根组件 生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}

我在黑马程序员学习vue. js

按钮 登录后复制 在 template 中定义根节点

在 vue 2.x 的版本中， 节点内的 DOM 结构仅支持单个根节点：

这是App根组件 这是副标题 登录后复制 但是，在 vue 3.x 的版本中， 中支持定义多个根节点：

这是App根组件 这是副标题 登录后复制 组件的 script 节点

vue 规定：组件内的 节点是可选的，开发者可以在 节点中封装组件的 JavaScript 业务逻辑。 节点的基本结构如下：

//今后，组件相关的data 数据、methods 方法等， //都需要定义到export default 所导出的对象中。 export default {} 登录后复制 script 中的 name 节点

可以通过 name 节点为当前组件定义一个名称，代码如下：

export default { // name 属性指向的是当前组件的名称(建议:每个单词的首字母大写) name: 'MyApp'， } 登录后复制 在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件：

script 中的data节点

vue 组件渲染期间需要用到的数据，可以定义在data 节点中：

export default { //组件的名称 name: 'MyApp'， //组件的数据(data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象) data() { return { username: '哇哈哈 ', } }, } 登录后复制 其中组件中的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 规定：组件内的 节点是可选的，开发者可以在 节点中编写样式美化当前组件的UI 结构。 节点的基本结构如下：

h1{ font -weight: normal; 登录后复制 其中 标签上的lang="css" 属性是可选的，它表示所使用的样式语言。默认只支持普通的css 语法，可选值还有less、scss 等。

多学一招：让style 中支持less 语法

如果希望使用less 语法编写组件的style 样式，可以按照如下两个步骤进行配置 ：

①运行npm install less -D 命令安装依赖包，从而提供less 语法的编译支持

②在 标签上添加lang="less" 属性，即可使用less 语法编写组件的样式

h1{ font-weight: normal; i { color: red; font-style: normal; } 登录后复制 【相关推荐： vuejs视频教程 、 web前端开发 】

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

vue组件由几部分组成