【Vue #2】脚手架 & 指令

一、脚手架

脚手架：一个保证各项工作顺利开展的平台，方便我们 拿来就用，零配置

1. Vue 代码开发方式

相比直接 script 引入 vue 源码，有没有更好的方式编写vue代码呢?

① 传统开发模式：

1. 基于html文件开发Vue，类似jQuery的使用 <script src="vue.js"></script>
2. 优点：简单、上手快
3. 缺点：功能单一、开发体验差

② 工厂化开发模式:

在 构建工具(Vite/Webpack )环境下开发Vue，这是最推荐的、也是企业采用的方式

• 优点：功能全面，开发体验好
• 缺点：目录结构复杂，理解难度提升

2. 准备工程化环境

① 安装工具 Nodejs

注意： 安装18.3或更高版本，Nodejs 官网：/

安装好之后，可以打开命令行，输入下面指令，进行测试如下：

> node -v
v22.13.1

> npm -v
10.9.2

npm 换源 – 避免下载过慢，当前下载好的可以不用管

// 查看 npm 源 
npm config get registry
// 默认是指向 /，也就是官⽅源 
// 为了提⾼npm下载速度, 可以给npm换源 
// 国内源有很多，我这⾥⽤淘宝源吧。毕竟是⼤公司，会⽐较稳定 
npm config set registry 
// 再⼀次查看 npm 源 
npm config get registry

② 安装 yarn 和 pnpm

yarn和 pnpm、还有 npm 三者的功能类似，都是包管理工具， 用来下载或删除模块包，性能上 yarn 和 pnpm 优于 npm

在命令行上进行安装，如下：

# windows系统
npm install yarn -g
npm install pnpm -g
___________________________________
# mac系统
sudo npm install yarn -g
sudo npm install pnpm -g

# 检测是否安装成功, 如下
> yarn -v
1.22.22

> pnpm -v
10.6.4

3. 创建 Vue 工厂化项目

创建步骤如下：

1. 选定⼀个存放位置，比如选择桌面，根据自己情况，选择D盘或E盘等
2. 执行命令 npm create vue@latest ，会安装并执行 create-vue ， 它是Vue官方的项目脚手架工具
3. 进⼊项目根目录：cd 项目名称
4. 安装 vue 等模块依赖：npm i
5. 启动项目： npm run dev ，会开启⼀个本地服务器，然后在浏览器网址栏输入：http://localhost:5173

C:\Users\>cd desktop # 先切换到桌面

C:\Users\Desktop>npm create vue@latest
Need to install the following packages:
create-vue@3.15.1
Ok to proceed? (y) y

> npx
> create-vue

T  Vue.js - The Progressive JavaScript Framework
|
o  请输入项目名称：
|  vue-engineering-way
|
o  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  Prettier（代码格式化）

安装选项如下：

启动服务如下：

\Desktop\vue-engineering-way> npm run dev

> vue-engineering-way@0.0.0 dev
> vite


  VITE v6.2.2  ready in 1172 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

最后呈现的界面效果如下，说明项目创建并启动成功了

补充 – 后继我们要打开这个界面，就需要先运行，然后输入 localhost:端口号（看自己设定的端口号是多少，我这里是 5173）

4. 认识工程化项目下目录和文件

用 vscode 打开查看，如下：

我们今后Vue代码写哪个目录下？

• 答： src 目录，src下的所有代码会被 vite 打包成 css/js/img ， 然后交给 index.html ，最终通过浏览器呈现在用户眼前

分析上面三个入口文件关系：

1、main.js、App.vue、index.html三个文件的作用?

1. main.js - 项目打包的入口 - 创建应用
2. App.vue - Vue代码的入口(根组件)
3. index.html- 项目的入口网页

2、mian.js、App.vue、index.html 三者的关系是什么?

1. App.vue(vue入口)=>main.js(项目打包入口)index.html(浏览器入口)
2. main.js 是 Vue 代码通向网页代码的桥梁,非常关键

5. Vue 单文件

思考：代码写一起，会不会出现class类名、js变量名 重名冲突？Vue中如何避免呢?

vue单文件介绍

1. vue推荐采用 .vue 的文件来开发项目
2. 一个 vue 文件通常有3部分组成，script(JS)+template(HTML)+ style(CSS)
3. 一个 vue 文件是 独立的模块，作用域互不影响
4. style 配合 scoped 属性，保证样式只针对当前 template 内的标签生效

作用：提供了独立的作用域，不用担心 JS 变量名、CSS 选择器名冲突

注意：.vue 文件浏览器无法识别，需要借助 vite打包成 js、css 等，最终交给 index.html，通过浏览器呈现效果

6. 清理目录结构

1. 删除assets文件夹
2. 删除components文件夹
3. 清除App.vue的内容
4. 清除main.js的内容

补充内容

App.vue

<script setup></script>
<template>
 App根组件
</template>
<style></style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

7. set up简写 + 插值 + 响应式

实例1：完整写法

<script>
  export default{
    setup(){
      const msg = 'Hello World' // 声明数据
      return {msg} // 返回数据
    }
  }
  
</script>

<template>
  <h1>{{msg}}</h1>
</template>

实例2：简写

<script setup>
  const msg = 'Hello World' 
</script>

<template>
  <h1>{{msg}}</h1>
</template>

实例3：练习

<script setup>
  import { reactive, ref } from 'vue' // 通过导入的方法模块化
  
  // 字符串
  const msg = ref('Hello World') 
  // 对象
  const obj = reactive({
    name: 'vue3',
    age: 18
  })

  // 函数
  function fn(){
    return 100
  }
</script>

<template>
  <h1>{{msg}}</h1>
  <p>{{obj.name}}, 今年{{ obj.age }}岁</p>
  <p>函数返回值：{{ fn() }}</p>
</template>

二、指令

1. 基本概念

指令（Directives）是Vue提供的带有v-前缀的特殊标签属性，用来增强标签的能能力

• 作用：提高标签数据渲染的能力

vue3 中的指令按照不同的用途可以分为如下 6 大类：

• 内容渲染指令(v-html、v-text)：作用类似于插值，把表达式的结果渲染到双标签
• 属性绑定指令(v-bind)：把表达式的值与标签的属性 动态绑定
• 事件绑定指令(v-on)：用来与标签进行事件绑定，处理用户交互
• 条件渲染指令(v-show、v-if、v-else、v-else-if)：根据表达式的 true 或 false，决定标签是否展示
• 列表渲染指令(v-for)：基于数组循环生成一套列表
• 双向绑定指令(v-model)：数据 <–> 视图（数据与视图相互影响，双向奔赴）

2. 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2个:

• v-text (类似innerText)
  • 使用语法：<p v-text="表达式"></p>，意思是将 表达式的 值渲染到 p标签中
  • 类似 innerText，使用该语法，会覆盖p标签原有内容
• v-html (类似innerHTML)
  • 使用语法：<p v-html-"表达式"></p>，意思是将 表达式的 值渲染到p标签中。
  • 类似 innerHTML，使用该语法，会覆盖p标签原有内容，并且能够将HTML标签的样式呈现出来。

代码如下：

<script setup>
  import { reactive, ref } from 'vue' // 通过导入的方法模块化
  
  const str = ref('<span style="color: red">Hello Vue</span>')
</script>

<template>
  <p v-text="str"></p>
  <!-- 上下两个达到的效果是一样的 -->
  <p>{{str}}}</p> 
  <p v-html="str"></p>
</template>

效果如下：

3. 属性绑定指令

作用：把表达式的结果 与标签的属性动态绑定 3

语法：

v-bind: 属性名="表达式" （可简写成 ::属性名="表达式"）

基本用法

① 绑定单个属性

使用 v-bind 可以绑定单个属性，例如绑定图片的 src 属性：

<img v-bind:src="imgSrc" alt="">
<!-- 或者使用缩写 -->
<img :src="imgSrc" alt="">

② 绑定多个属性

如果需要绑定多个属性，可以使用对象语法，将多个属性和对应的值放在一个对象中，然后通过 v-bind 绑定这个对象

<img v-bind="{ src: imgSrc, title: imgTitle }" alt="">

③ 绑定 Class

通过 v-bind:class 可以动态绑定元素的 class 属性。例如，根据 isActive 的值动态切换 class：

<div v-bind:class="{ active: isActive }" class="test"></div>

④ 绑定 style

通过 v-bind:style 可以动态绑定元素的 style 属性。需要注意的是，CSS 样式名中的 - 需要转换为驼峰命名法，例如 font-size 需要转换为 fontSize：

<div v-bind:style="{ background: bground, fontSize: fSize + 'px' }">
hello-vue
</div>

⑤ 传递多个 Props

在父组件向子组件传递多个参数时，可以使用 v-bind 的对象语法，将所有的 props 集中在一个对象中传递：

<child-component v-bind="props"></child-component>

代码样例如下：

<script setup>
  import { reactive, ref } from 'vue' // 通过导入的方法模块化
  
  const url = ref('') 
  const msg = ref('Hello Vue 3')
  const imgsrc = ref('')
</script>

<template>
  <p><a v-bind:href="url">百度一下</a></p>
  <!-- 简写 -->
  <p><a :href="url">百度一下</a></p>

  <div v-bind:title="msg">{{ msg }}</div>

  <!-- 绑定多个元素 -->
  <img v-bind="{ src: imgsrc, title: msg }" alt="">
  <div v-bind:style="{background: 'pink', color: 'red'}">I miss you</div>

</template>

4. 事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参)">按钮</button>

• 注意：v-on 可以简写为 @

内联语句指的是直接在HTML标签上使用JavaScript代码的一种方式。在Vue中，可以通过v-on指令将内联语句与DOM事件关联起来，从而在触发事件时执行相应的 JavaScript 代码。

代码示例如下：

<script setup>
  import { reactive, ref } from 'vue' // 通过导入的方法模块化
  const cnt = ref(0)
  // 无参函数
  const increase = () =>{
    cnt.value++
  }
  // 有参函数
  const add = (n) =>{
    cnt.value += n
  }
  function increment() {
    cnt.value++
  }
</script>

<template>
  <p>{{ cnt }}</p>
  <!-- 内联/行内代码 -->
  <button @click="cnt++">+1</button>
  <!-- 处理函数 -->
  <button @click="increase">+1</button>
  <!-- 处理函数(实参) -->
  <button @click="add(5)">+5</button>
  <br>
  <button @click="increment">Count is:{{cnt}}</button>
</template>

5. 条件渲染指令

v-show

• 作用：控制元素css 的 display属性来控制元素 显示或隐藏 的
• 语法：v-show=“布尔表达式”【表达式值为 true 显示，false 隐藏】
• 原理：切换 display:none 控制显示隐藏
• 场景：频繁切换显示隐藏的场景

v-if

• 作用：通过创建和插入元素 或移除 DOM 元素 控制元素显示隐藏(条件渲染)
• 语法：v-if="布尔表达式"【表达式值 true显示，false 隐藏】
• 原理：基于条件判断，创建 或 移除元素。
• 场景：要么显示，要么隐藏，不频繁切换的场景

v-else 和 v-else-if

• 作用：辅助v-if进行判断渲染
• 语法：v-else v-else-if="表达式"
• 需要紧接着v-if使用

代码示例1

<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no