VUE页面基本架构
0 前言
在我们了解了vue项目的基本框架后，我们就可以正式开始学习vue项目，而下面的示例就是在HomeView.vue页面运行的。
1 初始准备
项目的HomeView.vue，我们清除对应的代码，只保留基础的代码架构。
原来的代码：
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>修改后的代码（这个示例是复制vue官网的）
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
修改代码后，我们运行我们的项目:
npm run serve
我们可以看到项目还有一个”Home|About”标签，但是我们的HomeView.vue根本就没有代码，那这个代码在哪里了呢？
其实在引用App.vue文件里面，然后我们去掉对应的标签和样式即可。
改成如下
然后在重新运行启动命令。
点击上面的count按钮就会自动变化。
以上就是最基础的vue文件代码，我们依托于最简单的HomeView.vue文件来讲解一下vue的语法。
2 模板语法
我们重新看一下这个页面的代码，我们逐个讲解。
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>2.1 template标签
<template>
<button @click="count++">Count is: {{ count }}</button>
</template><button @click="count++">: 定义一个按钮，当点击时执行 count++ 操作，即使 count 值增加。
{{ count }}: 在模板中使用双花括号语法，将 count 数据绑定到模板中，显示当前计数的值。
哎，到这是不是就熟悉了，template就是存放我们写的html代码的地方。
那是不是还有放我们页面js和css的地方呢？
2.2 script标签——选项式和组合式
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>script标签，这里面存放的就是我们vue写页面逻辑代码的地方。
export default: 这是 ES6 的语法，用于导出这个对象，使其可以在其他文件中导入并使用。
data(): 定义组件的数据对象，这里返回一个对象，包含一个名为 count 的数据属性，初始值为 0，从而实现双向绑定。（双向绑定）
上面里面的script写法在vue里面叫做选项式，是vue2的写法，还有一种写法叫做组合式，是vue3开发的新写法。两种方法实现相同的功能，只是写法不同，但是建议两个都接触一下。
其中两种写法的优劣对比如下：
| 对比项 | 选项式 | 组合式 |
|---|---|---|
| 适用项目 | 功能逻辑简单，适合小的项目 | 功能逻辑复杂，多个函数需要复用，适合逻辑复杂的大项目 |
| 代码可读性 | 代码结构清晰，可读性强 | 代码结构可随意组合，可读性较差 |
但是VUE3组合式更加简洁，代码量更少，也建议使用这个。
组合式可以修改为下面这样的写法
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建一个响应式数据
const count = ref(0);
// 定义方法
const increment = () => {
count.value++;
};
// 返回需要在模板中使用的数据和方法
return {
count,
increment,
};
},
};
</script>
<style scoped>
button {
font-weight: bold;
}
</style>上面的写法需要每次都要return返回我们的变量，十分繁琐，如果再加上我们的setup语法糖就可以更加简介方便，如下
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
// 使用 ref 创建一个响应式数据
const count = ref(0);
// 定义方法
const increment = () => {
count.value++;
};
</script>
<style scoped>
button {
font-weight: bold;
}
</style>在这个版本中，使用了 <script setup> 语法糖，无需再显式地定义 setup 函数，而是直接在 <script setup> 中编写逻辑。
他还有很多vue2选项式API没有的优点
- 更灵活的组织逻辑： 允许将相关逻辑分组、抽离和复用，不再受限于选项的声明顺序。
- 更好的可读性和可维护性： 适用于更大规模的组件，可以更清晰地组织和维护逻辑。
- 更直观地描述逻辑关系： 允许根据功能把相关代码集中在一起，而不是按照 Vue 2 中选项的顺序散落在各处。
- 更易测试的代码： 逻辑和数据可以更容易地分离出来进行单元测试。
选项式加setup语法糖的方式，也将会是我们本次教程的重点写法，也是vue推荐的写法。
（3）style标签
我们的样式就写在这个<style> 标签。
scoped属性表示这些样式只在当前组件内起作用，避免全局样式冲突。
3 结语
以上就是vue基础示例的讲解，我们之后的所有写法都会采用setup语法糖的写法，用来讲解之后的所有vue语法。
在了解了我们基础语法模版之后，我们就可以开始我们的开发啦，首先我们开始接触的就是最最最好用的语法，响应式，让你感受摆脱传统js语法的快感！
