前言

今天带大家入门一下目前最多人使用的前端框架之一：Vue框架，并用Vue框架编写两个简单的小组件：简易穿衣建议和购物车。

Vue

首先，Vue是一个用于构建前端用户界面的JavaScript框架，它通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。它有一些非常关键的特点：

组件化架构： vue允许并鼓励组件化开发，这使得我们可以把一个页面分解成独立且可复用的组件，每个组件都有自己的框架，样式和逻辑。
响应式数据： vue提供了双向数据绑定的方式，只需要在语句中声明，就可以自动追踪依赖，并在数据更新时更新DOM结构，重新渲染页面。
虚拟DOM： Vue使用了虚拟DOM来提高性能，只在必要的时候对DOM结构进行修改，避免了很多回流和重绘。
Vue Router：结合Vue Router 可以实现页面的路由切换，使它完全能够支持复杂的单页应用开发。

安装

首先，我们在想要创建Vue项目的目录下，在命令行输入npm create vue@latest 。这一指令会安装执行create-vue，这是Vue的脚手架工具。然后我们需要输入我们想创建项目的名称，并且还有一系列可选功能的提示，这里对这些可选功能先不做过多讲解，如果我们不清楚我们是否需要哪个功能，就直接全选No。这样就创建好了我们的项目。

接着，我们输入以下指令安装依赖并启动开发服务器。

arduino 复制代码

cd <your-project-name>
npm install
npm run dev

这些指令分别的作用是：跳转到Vue项目的命令行，安装依赖，启动开发服务器。

编写项目

项目中的不同目录

我先带大家来解析一下创建的Vue项目中的不同目录：

1. index.html： 这是我们整个项目的HTML结构 ，最终显示在页面上的就是它。这里我们重点讲讲body部分，可以看到这里有一个空容器，id为app。并且会加载main.js里的JavaScript模块，type="module"指明了这是一个ES6模块。

2.main.js: 上面我们讲到HTML结构里有一个id为app的空容器，但它并不是空的。我们看main.js：

import { createApp } from 'vue'这行代码从Vue.js库中导入了createApp函数，这个函数是Vue3中的核心API，用于创建一个新的Vue应用实例。
import App from './App.vue'这段代码从App.vue文件中导入了App组件，而App组件通常是整个应用的根组件。
createApp(App).mount('#app') 这行代码其实干了两件事，先是使用createApp函数和App组件创建了一个Vue应用实例。这也意味着App组件将成为这个应用的根组件，所有子组件都将嵌套在这个根组件里。接着是.mount('#app')将创建的应用实例挂载到DOM中的app元素上。

这样，index.html里的app容器就有Vue实例里的内容了。

配置

因为我们要做的两个项目都是独立的组件，且互相毫无关系，所以我们在src下的components目录中分别创建两个vue文件：advice.vue和shopping.vue。

接着，我们把App.vue中的代码全部删除掉，并重新敲出以下代码：

在这里，App.vue是根组件，advice.vue和shopping.vue将会被拿到这里进行显示。

<template / > 是该组件的模板，其包裹的内容将会被Vue转化为HTML
< script setup> 是用来定义组件的内部逻辑和状态的，我们可以在这里定义组件内部的变量和函数，但它们的作用域仅限于 < script setup>内部
< stlye /> 是组件的样式块，我们可以在这里编写组件里每个元素的样式。lang="css"代表这里使用CSS语言，scoped限定下面的样式只会应用于当前组件。

接着，我们用语义化标签<nav>在<template />中写入一个导航栏，里面放上两个组件的名字，并将样式设置为text-align:center，让他们在页面顶部居中显示。

xml 复制代码

<template>
  <nav>
    <span class="advice">穿衣建议</span> |
    <span class="shopping">购物车</span>
  </nav>
</template>

我们还要先将两个组件导入App.vue，并给导航栏添加点击事件，点击后显示对应的组件。

导入:在<script>中进行导入

xml 复制代码

<script setup>
import Advice from './components/advice.vue'
import Shopping from './components/shopping.vue'
</script>

import代表导入，Advice 和Shopping 代表advice.vue和shopping.vue这两个组件的组件名，from后面的是组件的路径。导入后将组件名作为语义化标签写在<template/>中即可显示组件。

添加点击事件并显示：

这里有一个知识点，在Vue中，当我们想控制某个元素是否显示时，我们可以给其添加一个v-if指令：如果v-if中表达式的值为ture，则该元素才会被渲染到DOM中，否之则不会。

这里我们先给导航栏的两个元素分别添加点击事件,如果点击了则触发函数changeTab（），并传入形参

ini 复制代码

<span class="advice" @click="changeTab(1)">穿衣建议</span> |
<span class="shopping" @click="changeTab(2)">购物车</span>

<Advice v-if="index == 1"/>
<Shopping v-if="index == 2"/>

接着在<script>中进行编写：

这里还有一个知识点：当我们需要数据可以响应式更新 时，就可以从Vue库中引入ref()函数，用来创建响应式引用。

xml 复制代码

<script setup>
import Advice from './components/advice.vue'
import Shopping from './components/shopping.vue'
import {ref} from 'vue'

const index = ref(1) //将index初始值设为1，并让其可以响应式更新

const changeTab = (i) => {
  index.value = i
} //因为index被ref引用了，所以要修改index的值需用.value，但在<template/>
</script>

简易穿衣建议

现在我们开始编写组件，首先我们要知道这个组件要实现什么功能：显示当前温度，根据温度建议穿什么衣服，加减温度。

所以我们在advice.vue的<template/>中编写以下代码：

xml 复制代码

<template>
    <h2>当前xx℃</h2>
    <h4>建议穿xx</h4>
    <button>+</button>
    <button>-</button>
</template>

然后把App.vue中样式块中的scoped删去，让App.vue中的样式也可以应用到Advice和Shopping这两个子组件中。这样我们就可以得到这样的页面效果：

然后我们要把温度和建议穿什么衣服显示上去：

因为我们还设置了加减温度的按钮，让组件根据当前温度��不同实时更新建议穿什么衣服，所以这里的温度和建议我们都要用响应式更新。

我们同样在advice.vue中引入ref（）函数，并让它引用温度变量temp。至于建议变量suggest，我们用computed计算属性进行响应式更新。

computed是Vue中的一个计算属性，和ref相同的是，它同样能够进行响应式更新，但ref更适合直接操作和修改数据 ，而computed更适合用于创建依赖于其他数据的计算属性。比如这里的建议suggest，它是依赖于温度的变化的，温度发生变化才导致suggest发生变化，所以更适合用computed。

kotlin 复制代码

import { ref,computed } from 'vue'; //引入ref函数和computed计算属性

const temp = ref(20)

const suggest = computed(() =>{
    if (temp.value >= 30) {
        return '短袖'
    }else if(temp.value >= 20){
        return '夹克'
    }else if(temp.value >= 10){
        return '棉袄'
    }
    else {
       return '羽绒服'
    }
})

最后我们把加减温度的功能实现一下：

我们给加减按钮分别添加一个点击事件，并设置两个函数add()和minus()。

ini 复制代码

    <button @click="add">+</button>
    <button @click="minus">-</button>

然后在<script>中编写这两个函数：

ini 复制代码

const add = () => {
    temp.value += 5; //每点击一次加号，温度+5℃
}

const minus = () => {
    temp.value -= 5;//每点击一次减号，温度-5℃
}

最后我们要将这些变量数据交给对应的元素，让其可以在页面上成功显示：

这里要注意，当我们把变量等数据交给对应的元素时，要用{{ }}挖个坑，将其填入进去即可

xml 复制代码

<template>
    <h2>当前{{ temp }}℃</h2>
    <h4>建议穿{{ suggest }}</h4>
    <button @click="add">+5</button>
    <button @click="minus">-5</button>
</template>

页面效果

现在我们来看看页面效果

因为我们将温度的初始值设为20，所以刚打开页面时显示的是20℃，当我们点击加减按钮时，温度和建议都会响应式更新，这样就实现了效果。

这里我们先把简易穿衣建议组件写完，下集我们再把购物车组件完善，希望能对大家有帮助！！

初识Vue：实战简易穿衣建议/购物车组件（上集）

前言

Vue

安装

编写项目

项目中的不同目录

配置

简易穿衣建议

页面效果