当前位置：首页 > news >正文

vue的基本结构

news 2025/4/21 11:06:20

<template><div class="example"><h1>{{ message }}</h1> <!-- 双向绑定到data中的message --><p>这是一个简单的Vue组件示例。</p></div>
</template><script>
export default {name: "ElementView", // 定义组件名称components: {}, // 如果有子组件，可以在components属性中注册它们data() { // 初始化数据的方法return {message: "Hello Vue 222 Example!" // 初始数据项};},methods: {} // 方法集合，如果需要交互逻辑可在此处编写
};
</script><style scoped>
.example {color: blue;
}
</style>

vue项目中安装element-ui的命令

npm i element-ui -S

node_modules目录用来存放第三方依赖包
public是公共的静态资源目录
src是项目的源代码目录（程序员写的所有代码都要放在此目录下）
.gitignore是GIt的忽略文件
index.html是SPA单页面应用程序中唯一的HTML页面
package.json是项目的包管理配置文件

在src这个项目源代码目录之下，包含了如下的文件和文件夹：

其中：

assets目录用来存放项目中所有的静态资源文件（css.fonts等）
components目录用来存放项目中所有的自定义组件
App.vue是项目的根组件
index.css是项目的全局样式表文件
main.js是整个项目的打包入口文件
3.vite项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过Main.js把App.vue渲染到index.html的指定区域中。

其中：

①App.vue用来编写待渲染的模板结构

②index.html中需要预留一个el区域

③main.js把App.vue渲染到了index.html所预留的区域中
3.1在App.vue中编写模板结构

清空App.vue的默认内容，并书写如下的模板结构：
3.2在index.html中预留el区域
打开index.html页面，确认预留了el区域：
3.3在main.js中进行渲染
按照vue 3.x的标准用法，把App.vue中的模板内容渲染到index.html页面的el区域中:

1.vue组件的构成

每个 .vue组件都由3部分构成，分别是：

template->组件的模板结构
script->组件的JavaScript行为
style->组件的样式

其中，每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。
2.组件的template节点

vue规定：每个组件对应的模板结构，需要定义到<template>节点中。

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

2.1在template中使用指令

在组件的<template>节点中，支持使用前面所学的指令语法，来辅助开发之渲染当前组件的DOM结构。

DOM结构的基本组成

节点（Node）：DOM树的最基本单位。所有元素、属性、文本内容等在DOM中都表现为节点。节点分为几种类型：
- 元素节点（Element Node）：表示HTML文档中的元素，如<div>、<p>等。
- 属性节点（Attribute Node）：表示元素的属性，如class、id等。
- 文本节点（Text Node）：包含元素或属性的文本内容，如<div>Hello</div>中的"Hello"。
- 注释节点（Comment Node）：表示HTML中的注释。
- 文档节点（Document Node）：整个文档的入口点，即整个DOM树的根节点。
元素（Element）：HTML文档中的标签元素，如<div>、<p>等。
属性（Attribute）：元素的属性，如id="example"中的id。
文本内容（Text Content）：元素内的文本，如<div>Hello World</div>中的"Hello World"。

DOM操作

在JavaScript中，可以使用DOM API来操作DOM结构，例如：

获取元素：可以使用document.getElementById(), document.querySelector(), document.querySelectorAll()等方法获取元素。
修改元素：可以修改元素的属性、样式、内容等，例如element.innerHTML = "new content"。
添加/删除元素：可以使用element.appendChild(), element.removeChild(), document.createElement()等方法添加或删除元素。
事件处理：可以通过element.addEventListener()为元素添加事件监听器，例如点击事件(click)。