15_Vue3核心概念与实践_vue 3:从核心概念到实际应用-CSDN博客

本文链接：https://blog.csdn.net/m0_52474839/article/details/139513716

文章目录

Vue3
1. Vite
2.使用Vite创建前端工程
3.目录介绍
4.SFC入门5.2.3
5.Vite+Vue样式导入方式
6.响应式入门&&setup函数
7. 插值表达式
8.文本渲染v-text/v-html
9. 属性渲染v-bind
10. 事件绑定v-on
Appendix

Vue3

概念

是一款用于构建用户界面的 JavaScript 框架基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:https://cn.vuejs.org/

小结：Vue3是渐进式JS框架

Vue的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

1. Vite

概述：

vite是我们项目搭建的脚手架，以及项目打包和运行的一款工具。和maven的功能大相径庭。

在这里插入图片描述

优点：快，好；

2.使用Vite创建前端工程

npm create vite

如果想使用最新的

npm create vite@latest

第一次使用vite创建工程会包下载依赖

在这里插入图片描述

选择正确的选项即可

选择vue，js即可

在这里插入图片描述

这就是我们项目的基础结构

最后需要进入07_vite中下载所有package.json下的所有依赖

npm install

在这里插入图片描述

研发模式运行vue

在这里插入图片描述

项目停止：

ctrl c

3.目录介绍

在这里插入图片描述

.vscode
node_modules
public
- 存放公共资源的
src
- 前端源代码主要目录；下面是src的目录内容
- assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
- components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。
- layouts/ 目录：用于存放**布局组件的文件。**布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
- pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
- plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。
- router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
- store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。
- utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。
- index.html程序入口文件

4.SFC入门5.2.3

什么是VUE的组件?

一个页面作为整体,是由多个部分组成的,每个部分在这里就可以理解为一个组件
每个.vue文件就可以理解为一个组件,多个.vue文件可以构成一个整体页面
组件化给我们带来的另一个好处就是组件的复用和维护非常的方便

在这里插入图片描述

组件化，一个组件可以作用到多个文件，到时候进行修改的时候，可以改一次，所有页面改变；

什么是.vue文件?

传统的页面有.html文件.css文件和.js文件三个文件组成(多文件组件)
vue将这文件合并成一个.vue文件(Single-File Component，简称 SFC,单文件组件)
.vue文件对js/css/html统一封装,这是VUE中的概念该文件由三个部分组成 <script> <template> <style>
- template标签代表组件的html部分代码代替传统的.html文件
- script标签代表组件的js代码代替传统的.js文件
- style标签代表组件的css样式代码代替传统的.css文件

在这里插入图片描述

基本上一个.vue文件作为一个脚手架替代了前端三大件；(vue3独有)

vue启动启动项目几行代码但是内容丰富的原因

在这里插入图片描述

其引入了man.js将大量的.vue代码引入到index.html最终形成一个dom树展示给用户

修改文件内容

在这里插入图片描述

一个.vue组件可以引入其他.vue组件
- 仅需在script中import即可

在这里插入图片描述

如果想要展示

需要在template中引入Haha标签

5.Vite+Vue样式导入方式

全局引入main.js

import './style/reset.css' //书写引入的资源的相对路径即可！

vue文件script代码引入
```
import './style/reset.css'
```
css样式保存到独立的css文件夹下，哪里.vue需要直接导入即可；

–script标签导入

–style标签导入
Vue文件style代码引入
```
@import './style/reset.css'
```

style标签中导入必须加@符

6.响应式入门&&setup函数

6.1 响应式数据

响应式数据&&非响应式数据
响应数据：在数据变化时候，dom树跟着更新
非响应数据：在数据变化的时候，dom树不跟着变化
vue3中，数据需要通过ref/reactive函数的处理才是响应式的；
ref/reactive函数导入就能用，vue自带；

 import {ref,reactive} from 'vue'

ref函数的特征

1.在script标签中，操作ref 的响应式数据需要通过.value的形式操作

2.在template标签中，操作ref直接用即可

在这里插入图片描述

具体写.vue模块化写法

首先写好script标签 type写上module

其次导包

import {ref,reactive} from ‘vue’

接下来写setup （）{}

内部定义es6写法，写变量方法和return即可

定义好的内容template标签直接使用即可

6.2 省略setup(){} 省略default{}，return{}

setup语法糖写法***

在这里插入图片描述

6.3 案例开发功能概述

在这里插入图片描述

开发两个按钮，左边自增1，右边自减1；

setup语法糖导入

<script type="setup">

导入ref，reactive动态包

let counter = ref(1)

function counterIncr(){
  counter.value++
}

function counterDecr(){
  counter.value--
}

function showCounter(){
  alert(counter.value)
}

定义变量方法在script中ref包裹变量

ref(1)

定义template

<template>  
  <div>
    <button @click="counterIncr()">+</button>
    <!-- v-text表示vue的一个文本，表示将一个变量 表示到双标签的一个文本 -->
    <span v-text="counter"></span>      
    <button @click="counterDecr()">-</button>  
    <button @click="showCounter">showCounter</button>
  </div>
</template>

7. 插值表达式

vue代码解析技术，会将所有的vue代码解析成dom树最终解析；
vue代码 --> Dom树的过程为渲染
响应式数据的更新也是渲染

<script setup type="module">
  let msg ="hello vue3"
  let getMsg= ()=>{
    return 'hello vue3 message'
  }
  let age = 19
  let bee = '蜜 蜂'
  // 购物车
  const carts = [{name:'可乐',price:3,number:10},{name:'薯片',price:6,number:8}];
  //计算购物车总金额
  function compute(){
      let count = 0;
      for(let index in carts){
          count += carts[index].price*carts[index].number;
      }
      return count;
  }
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
    msg的值为: {{ msg }} <br>
    getMsg返回的值为:{{ getMsg() }}  <br>
    是否成年: {{ age>=18?'true':'false' }} <br>
    反转: {{ bee.split(' ').reverse().join('-') }} <br>
    购物车总金额: {{ compute() }} <br/>
    购物车总金额: {{carts[0].price*carts[0].number + carts[1].price*carts[1].number}} <br>
  </div>
</template>

<style scoped>

</style>

小结：插值表达式{{ 可以绑定任意es6语法变量 }}

8.文本渲染v-text/v-html

v-text 不识别文本中html代码
v-html 可以识别文本中html代码

在这里插入图片描述

<script setup type="module">
    let text = "test"
    // v-text命令支持模板字符串
    let msg = `spark streaming  ${text}`
    let age = 20
    let font1 = "<font color ='red'>你好</font>"
</script>
<template>
    <div>
        <h1 v-text="msg">
        </h1>
        <!-- v-text支持条件语法 -->
        <h1 v-text="age>=18?'成年':'未成年'"></h1>      
        <h1 v-html="font1"></h1>
    </div>
</template>
<style scoped>
</style>

绑定方式和之前的一模一样

9. 属性渲染v-bind

将数据绑定到元素的属性上
使用v-bind对事件进行绑定

在这里插入图片描述

注意中间连接src使用的是“ : ”

甚至可以支持跳转页写法

在这里插入图片描述

注意：跳转页写法href的url必须写到a标签中，a标签包裹要跳转的图标

10. 事件绑定v-on

v-on事件渲染
v-on:事件名称="函数名()"
可以简写：@事件名

写法和属性绑定一样只不过名字变为v-on

在这里插入图片描述

内联事件处理器写法

v-on:click="conter++"

事件写入到template中，所以使用ref的化不需要调用value值。
内联写法就是匿名写法；
一次性绑定修饰符 .once

 <button v-on:click.once="count1++" >+</button>

阻止事件行为

<button v-on:click.prevent="count1++" >+</button>

比如说页面要进行跳转，事件绑定了prevent

所以函数会被执行，但是js事件跳转不会执行；

Appendix

关于JS和TS选择

TS是JS的一个超集,使用TS之后,JS的语法更加的像JAVA,实际开发中用的确实更多,那么这里为什么我们没有立即使用TS进行开发,原因如下

响应式数据&&非响应式数据

响应数据：在数据变化时候，dom树跟着更新

非响应数据：在数据变化的时候，dom树不跟着变化

vue3中，数据需要通过ref/reactive函数的处理才是响应式的；

ref/reactive函数导入就能用，vue自带；

 import {ref,reactive} from 'vue'

ref函数的特征

在script标签中，操作ref 的响应式数据需要通过.value的形式操作

在template标签中，操作ref直接用即可

.vue模块是放到index文件的一个原材料

main.js删除了会影响页面显示

button标签没有value值，直接在标签中写值即可

导入ref还非得加{}，否则无法使用

import {ref} from  'vue'