【Vue #2】脚手架 & 指令

编程日记20 更新时间：2025-05-21 05:30:49

【Vue #2】脚手架 & 指令

一、脚手架

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

1. Vue 代码开发方式

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

① 传统开发模式：

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

image-20250319144701029

② 工厂化开发模式:

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

image-20250319144743072

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

2. 准备工程化环境

① 安装工具 Nodejs

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

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

代码语言：javascript代码运行次数：0运行复制

> node -v
v22.13.1

> npm -v
10.9.2

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

代码语言：javascript代码运行次数：0运行复制

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

② 安装 yarn 和 pnpm

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

命令	装包	删包
npm	npm i 包名	npm un 包名
yarn	yarn add 包名	yarn remove 包名
pnpm	pnpm i 包名	pnpm un 包名

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

代码语言：javascript代码运行次数：0运行复制

# 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 工厂化项目

创建步骤如下：

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

代码语言：javascript代码运行次数：0运行复制

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（代码格式化）

安装选项如下：

image-20250319151332863

启动服务如下：

代码语言：javascript代码运行次数：0运行复制

\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

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

image-20250319151448949

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

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

用 vscode 打开查看，如下：

image-20250319151740519

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

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

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

image-20250319161150291

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

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

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

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

5. Vue 单文件

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

vue单文件介绍

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

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

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

6. 清理目录结构

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

补充内容

App.vue

代码语言：javascript代码运行次数：0运行复制

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

main.js

代码语言：javascript代码运行次数：0运行复制

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

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

实例1：完整写法

代码语言：javascript代码运行次数：0运行复制

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

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

实例2：简写

代码语言：javascript代码运行次数：0运行复制

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

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

实例3：练习

代码语言：javascript代码运行次数：0运行复制

<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标签的样式呈现出来。

代码如下：

代码语言：javascript代码运行次数：0运行复制

<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>

效果如下：

image-20250402171127566

3. 属性绑定指令

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

语法：

代码语言：javascript代码运行次数：0运行复制

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

基本用法

① 绑定单个属性

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

代码语言：javascript代码运行次数：0运行复制

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

② 绑定多个属性

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

代码语言：javascript代码运行次数：0运行复制

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

③ 绑定 Class

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

代码语言：javascript代码运行次数：0运行复制

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

④ 绑定 style

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

代码语言：javascript代码运行次数：0运行复制

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

⑤ 传递多个 Props

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

代码语言：javascript代码运行次数：0运行复制

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

代码样例如下：

代码语言：javascript代码运行次数：0运行复制

<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注册事件，及其的简单，语法如下：

代码语言：javascript代码运行次数：0运行复制

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

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

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

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

<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

代码语言：javascript代码运行次数：0运行复制

<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

本文发布于:2025-05-20，感谢您对本站的认可！

本文链接:http://anandasy.com/IT/1747740924a1037038.html

版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

本文标签：Vue 2脚手架 amp 指令

`发布评论取消回复`

评论列表（有0条评论）

`相关推荐`

【Vue #2】脚手架 & 指令

【Vue #2】脚手架 & 指令