Vue3入门介绍及快速上手

vue3

文章目录

      • vue3
        • 1、概况
        • 2、快速入门
        • 3、常用指令
          • 3.1、v-for
          • 3.2、v-bind
          • 3.3、 v-if & v-show
          • 3.4、v-model
          • 3.5、 v-on
        • 4 生命周期
        • 5、 工程化
          • 5.1、环境准备
          • 5.2、Vue项目-创建
          • 5.3、Vue项目开发流程
          • 5.4、组合式API
          • 5.5、reactive和ref函数
          • 5.6、watch
          • 5.7、父子组件通信
        • 6、Vue路由

1、概况

Vue 3是一款用于构建用户界面的渐进式JavaScript框架,同时也是一个强大的生态系统。(官方网站:https://cn.vuejs.org/)

Vue 3生态系统

  • 框架定义:Vue 3提供了一套完整的项目解决方案,用于快速构建现代化的Web应用。
  • 主要优势:显著提升前端项目的开发效率和可维护性。
  • 学习曲线:需要理解和掌握框架的使用规则(详情请参考官方文档)。
2、快速入门

准备

  1. 引入Vue模块(官方提供)
  2. 创建Vue程序的应用实例,控制视图的元素
  3. 准备原色(div),被Vue控制

数据驱动视图

  1. 准备数据

  2. 通过插值表达式渲染页面

    插值表达式:

    • 形式:{{ 表达式 }}。
    • 内容可以是:
      • 变量
      • 三元运算符
      • 函数调用
      • 算术运算

    实例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
    </head>
    <body><div id = "app"><h1>{{message}}</h1></div><script type = "module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return{message: "hello Vue"}}}).mount("#app");</script>
    </body>
    </html>
    
3、常用指令

指令:HTML标签上带有 v-前缀的特殊属性,不同的指令具有不同的含义,可以实现不同的功能。

常用指令:

指令作用
v-for列表渲染,遍历容器的元素或者对象的属性
v-bind为HTML标签绑定属性值,如设置 href , css样式等
v-if/v-else-if/v-else条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show根据条件展示某元素,区别在于切换的是display属性的值
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
3.1、v-for
  • 作用:列表渲染,遍历容器的元素或者对象的属性

  • 语法: v-for = “(item,index) in items”

    • 参数说明:

      • tems 为遍历的数组

      • item 为遍历出来的元素

      • index 为索引/下标,从0开始 ;可以省略,省略index语法: v-for = “item in items”

    • 书写形式:

      <p v-for="content in contents"> {{content}}</p>
      

      可能是下面的效果,包含了多条数据展示

      image-20231016113019953

      遍历的数组,必须在data中定义; 要想让哪个标签循环展示多次,就在哪个标签上使用 v-for 指令。

v-for的key

  • 作用:给元素添加的唯一标识,便于vue进行列表项的正确排序复用

  • 语法: v-for = “(item,index) in items” :key=“唯一值”

  • 注意点:

    • key的值只能是字符串 或 数字类型
    • key的值必须具有唯一性
    • 推荐使用id作为key(唯一),不推荐使用index作为key(会变化,不对应)
  • 写法:

    <p v-for="content in contents" :key="content.id"> {{content}}</p>
    

    效果如下:

    image-20231016113256208

    官方推荐在使用 v-for 时提供一个key属性,以遍可以追踪每个节点,提升渲染性能。

3.2、v-bind
  • 作用:动态为HTML标签绑定属性值,如设置href,src,style样式等。

  • 语法:v-bind:属性名=“属性值”

  • 简化::属性名=“属性值”

  • html标签写法

image-20231016113549193

  • v-bind写法

    image-20231016113842660

v-bind所绑定的数据,必须在data中定义

3.3、 v-if & v-show
  • 作用:这两类指令,都是用来控制元素的显示与隐藏的

  • v-if

    • 语法:v-if=“表达式”,表达式值为 true,显示;false,隐藏

    • 原理:基于条件判断,来控制创建或移除元素节点(条件渲染)

    • 场景:要么显示,要么不显示,不频繁切换的场景

    • 其它:可以配合 v-else-if / v-else 进行链式调用条件判断

    • 注意:v-else-if必须出现在v-if之后,可以出现多个; v-else 必须出现在v-if/v-else-if之后

    • 示例代码:

      <td v-if="user.gender == 1"></td>
      <td v-else-if="user.gender == 2"></td>
      <td v-else>其他</td>
      
  • v-show

    • 语法:v-show=“表达式”,表达式值为 true,显示;false,隐藏

    • 原理:基于CSS样式display来控制显示与隐藏

    • 场景:频繁切换显示隐藏的场景

    • 示例代码:

      不展示谢逊这条数据

      <tr v-for="(user,index) in userList" v-show="user.name != '谢逊'">
      
3.4、v-model

需求:用户列表数据渲染,获取用户输入的条件

搜索栏中当用户点击查询按钮时,需要获取到用户输入的表单数据,并输出出来 。

image-20231016114248641

需要想要实现上面这个功能,就需要使用新的指令,v-model

v-model

  • 作用:在表单元素上使用,双向数据绑定。可以方便的 获取 或 设置 表单项数据

  • 语法:v-model=“变量名”

    image-20231016114359403

    v-model 中绑定的变量,必须在data中定义。

3.5、 v-on
  • 作用:为html标签绑定事件(添加时间监听)

  • 语法:

    • v-on:事件名=“内联语句”

    • v-on:事件名="函数名“

    • 简写为 @事件名=“…”

      示例1:

      <div id="app"><input type="button" value="点我一下试试" v-on:click="console.log('试试就试试');">
      </div>
      

      示例2:

      <div id="app"><input type="button" value="点我一下试试" v-on:click="handle"><input type="button" value="再点我一下试试" @click="handle">
      </div>const app = createApp({data() {return {name: "Vue"}},methods: {handle() {console.log('试试就试试');}},}).mount("#app");
      
4 生命周期

生命周期:指一个对象从创建到销毁的整个过程。

image-20231016154655474

生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。

状态阶段周期
beforeCreate创建前
created创建后
beforeMount载入前
mounted挂载完成
beforeUpdate数据更新前
updated数据更新后
beforeUnmount组件销毁前
unmounted组件销毁后

image-20231016154746993

5、 工程化

我们目前的前端开发中,当我们需要使用一些资源时,例如:vue.js,和axios.js文件,都是直接再工程中导入的,如下图所示:

image-20231016165503931

但是上述开发模式存在如下问题:

  • 不规范:每次开发都是从零开始,比较麻烦
  • 难复用:多个页面中的组件共用性不好
  • 难维护:js、图片等资源没有规范化的存储目录,没有统一的标准,不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发,主要包括如下4个特点

  • 模块化:将js和css等,做成一个个可复用模块
  • 组件化:我们将UI组件,css样式,js行为封装成一个个的组件,便于管理
  • 规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范
  • 自动化:项目的构建,测试,部署全部都是自动完成

所以对于前端工程化,说白了,就是在企业级的前端项目开发中,把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率,降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。

5.1、环境准备
  • 介绍:create-vue是Vue官方提供的最新的脚手架工具,用于快速生成一个工程化的Vue项目。

  • create-vue提供了如下功能:

    • 统一的目录结构
    • 本地调试
    • 热部署
    • 单元测试
    • 集成打包上线
  • 依赖环境:NodeJS

    image-20231016170430866

    详细安装方式,请查看资料中的NodeJS安装文档

  • npm:Node Package Manager,是NodeJS的软件包管理器。

    image-20231016171048831

5.2、Vue项目-创建
  • 创建一个工程化的Vue项目,执行命令:npm init vue@latest

    image-20231016171109816

    详细步骤说明:

    image-20231016171137402

    执行上述指令,将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具

    项目创建完成以后,进入项目目录,执行命令安装当前项目的依赖:npm install

    image-20231016171243338

    创建项目以及安装依赖的过程,都是需要联网的。

  • Vue项目-目录结构

    image-20231016171341396

  • 启动项目,执行命令:npm run dev

    image-20231016171434286

  • 浏览器中可以直接访问,地址:http://127.0.0.1:5173

image-20231016171545313

5.3、Vue项目开发流程

如下图:

image-20231016171734451

其中*.vue是Vue项目中的组件文件,在Vue项目中也称为单文件组件(SFC,Single-File Components)。Vue 的单文件组件会将一个组件的逻辑 (JS),模板 (HTML) 和样式 (CSS) 封装在同一个文件里(*.vue

image-20231016171923272

5.4、组合式API

组合式API是Vue 3中的一种新的编程模式,它提供了更灵活和可组合的方式来编写Vue组件逻辑,使得代码更加清晰、可维护,并且使得组件的复用更加容易。

官网地址:https://cn.vuejs.org/api/

image-20231017160800675

Vue3中提供了很多的组合式API,当然我们平时开发中使用不了那么多,我们重点讲解几个后面项目常用的API,分别是:

  • reactive、ref、watch、defineProps、defineEmits
5.5、reactive和ref函数

reactive:能将对象类型变为【响应式】,对基本类型无效(例如 string,number,boolean)

<script setup>
// 导入
import { reactive } from 'vue'
// 执行函数 传入参数 变量接收
const state = reactive({msg:'this is msg'
})
const setSate = ()=>{// 修改数据更新视图state.msg = 'this is new msg'
}
</script><template>
{{ state.msg }}
<button @click="setState">change msg</button>
</template>

ref:接收简单类型或者对象类型的数据传入并返回一个响应式的对象

<script setup>// 导入import { ref } from 'vue'// 执行函数 传入参数 变量接收const count = ref(0)const setCount = ()=>{// 修改数据更新视图必须加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>

修改数据更新视图必须加上.value

二者对比:

  1. 都是用来生成响应式数据

  2. 不同点

    1. reactive不能处理简单类型的数据
    2. ref参数类型支持更好,但是必须通过.value做访问修改
    3. ref函数内部的实现依赖于reactive函数
  3. 在实际工作中的推荐

    1. 推荐使用ref函数,减少记忆负担
5.6、watch

侦听一个或者多个数据的变化,数据变化时执行回调函数

案例代码:

<script setup>//导入import { ref ,watch} from 'vue'const count = ref(0)const setCount = () => {count.value++}//侦听单个属性的变化watch(count,(newVal,oldVal) => { console.log(`count的值为: newVal: ${newVal},oldVal: ${oldVal }`)})const user = ref({name:"张三"})const setUser = () =>{user.value.name = "李四"}//侦听对象的单个属性watch(()=>user.value.name,(newVal,oldVal) => { console.log(`count的值为: newVal: ${newVal},oldVal: ${oldVal }`)})</script><template><button @click="setCount">{{ count }}</button><button @click="setUser">{{ user.name }}</button>
</template>
5.7、父子组件通信

我们来看下面这个图,有三个组件,组件A的子组件分为是B和C,其中B和C是兄弟关系。我们这次重点研究是父子组件的通信,如果想要实现B和C的通信,需要使用第三方组件pinia才行(不是课程重点)

image-20231017165028773

父组件传递信息到子组件:

  • 父组件中给子组件绑定属性
  • 子组件内部通过props选项接收数据

子组件传递信息到父组价

  • 父组件中给子组件标签通过@绑定事件
  • 子组件内部通过 emit 方法触发事件

案例:

父组件

<script setup>//导入import { ref ,watch} from 'vue'//引入子组件import SonCom from '@/components/son-com.vue'//定义属性const money = ref(100);//父组件增加金额const incMoney = () =>{money.value += 10;}//子组件减少金额const decMoney = (val) =>{money.value -= val;}</script><template><h3><button @click="incMoney">增加金额</button></h3><SonCom :money = "money"@decMoney="decMoney"></SonCom></template>

子组件:son-com.vue

<script setup>//接收父组件传递过来的属性
const props = defineProps({money :Number
})//声明父组件传递过来的方法
const emit = defineEmits(['decMoney'])//调用父组件的方法
const buy = () =>{emit('decMoney',20)
}</script><template><div class="son">我是子组件 - {{ money }}<button @click="buy">减少金额</button></div>
</template><style scoped>.son{border: 1px solid #000;padding: 80px;
}
</style>
6、Vue路由

组成

  • Router实例:路由实例,基于createRouter函数创建,维护了应用的路由信息。

  • <router-link>:路由链接组件,浏览器会解析成<a>

  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件。

    image-20231016173010980

安装vue-router(创建vue项目已选择)

  • 安装命令:npm install vue-router@4

  • 定义路由

    image-20231016173240645

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469701.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ARM Coresight OpenOCD 系列 5 -- arp_examine 使用介绍】

文章目录 OpenOCD arp_examine 使用 OpenOCD arp_examine 使用 因为我们很多时候运行 Openocd 的时候有些 core 还没有启动, 所以最好在配置脚本中添加 -defer-examine这个参数, 如下&#xff1a; #cortex-m33 target create ${_CHIPNAME}.m33 cortex_m -dap ${_CHIPNAME}.da…

【大数据学习 | kafka高级部分】kafka的kraft集群

首先我们分析一下zookeeper在kafka中的作用 zookeeper可以实现controller的选举&#xff0c;并且记录topic和partition的元数据信息&#xff0c;帮助多个broker同步数据信息。 在新版本中的kraft模式中可以这个管理和选举可以用kafka自己完成&#xff0c;而不再依赖zookeeper。…

用户裂变数据分析

用户增长是一个工作和找工作的时候都不可避免的话题&#xff0c;那么用户增长&#xff0c;该怎么做数据分析&#xff1f;本文从两个方面分享了大部分企业做用户增长的方法&#xff0c;希望对你有所帮助。 01 用户增长的基本办法 1. 买量 在互联网公司中&#xff0c;买量是占…

论文分享:DiskANN查询算法

详细总结了三篇有关DiskANN最邻近查询图算法的论文 欢迎大家来点赞&#xff0c;更欢迎感兴趣的友友来探讨&#xff01; DiskANN的提出(NurIPS’19)文献分享: Vamana图算法以及面向SSD的DiskANN文章浏览阅读797次&#xff0c;点赞21次&#xff0c;收藏8次。NurIPS‘19_vamana图…

第16章 SELECT 底层执行原理

一、SELECT查询的完整结构 1.1 方式一&#xff08;SQL 92语法&#xff09; SELECT ..., ..., ... FROM ..., ..., ... WHERE 多表的连接条件 AND 不包含组函数的过滤条件 GROUP BY ..., ... HAVING 包含组函数的过滤条件 ORDER BY ... ASC/DESC LIMIT ..., ... 1.2 方式二&a…

【设计模式】结构型模式(四):组合模式、享元模式

《设计模式之结构型模式》系列&#xff0c;共包含以下文章&#xff1a; 结构型模式&#xff08;一&#xff09;&#xff1a;适配器模式、装饰器模式结构型模式&#xff08;二&#xff09;&#xff1a;代理模式结构型模式&#xff08;三&#xff09;&#xff1a;桥接模式、外观…

移门缓冲支架的作用与优势

1. 吸收冲击力&#xff0c;保护门体和墙体移门缓冲支架的主要功能之一是吸收门关闭时的冲击力。当门快速关闭时&#xff0c;如果没有缓冲装置&#xff0c;门会猛烈撞击门框或墙体&#xff0c;可能导致门体、轨道和墙体的损坏。缓冲支架通过吸收这部分冲击力&#xff0c;减少门对…

「IDE」集成开发环境专栏目录大纲

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「IDE」集成开发环境&#x1f4da;全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定…

协程3 --- golang的协程调度

文章目录 单进程时代多进程/线程时代协程时代内核级线程模型&#xff08;1&#xff1a;1&#xff09;用户级线程模型&#xff08;N&#xff1a;1&#xff09;两级线程模型CMP&#xff08;M&#xff1a;N&#xff09;GM模型 GMP模型 单进程时代 描述&#xff1a;每一个程序就是一…

鸿蒙华为商城APP案例

模拟器运行效果如下&#xff1a; 鸿蒙版APP-华为商城-演示视频

vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)

场景 VueLeaflet实现加载OSM显示地图&#xff1a;https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394在上面加载显示OSM的基础上&#xff0c;使用Leaflet.pm插件实现在页面上绘制、编辑、剪切、移动几何元素。Leaflet.pm插件 用于创建和编辑几何图层的插件可…

手动实现h5移动端点击全屏按钮横屏展示图片,左右滑动切换,处理页面会随着手指滑动问题

页面提供全屏按钮,全屏展示的容器 <div class"container"><button click"openSwiper">点击全屏查看</button><!-- 大图 --><divclass"full"v-if"showSwiper"touchstart"handleTouchStart"touch…

Vue2+3 —— Day3/4

Day3 Vue生命周期 和 生命周期的四个阶段 Vue生命周期的四个阶段&#xff1a; 从创建到销毁的整个阶段中&#xff0c;Vue提供好了一系列函数&#xff08;8个&#xff09;&#xff1b; 并且在经历生命周期的对应阶段时&#xff0c;会自动帮你调用这些函数 这8个函数称为生命…

Redis集群模式之Redis Sentinel vs. Redis Cluster

在分布式系统环境中&#xff0c;Redis以其高性能、低延迟和丰富的数据结构而广受青睐。随着数据量的增长和访问需求的增加&#xff0c;单一Redis实例往往难以满足高可用性和扩展性的要求。为此&#xff0c;Redis提供了两种主要的集群模式&#xff1a;Redis Sentinel和Redis Clu…

机器学习———特征工程

1 特征工程概念 特征工程就是对特征进行相关的处理&#xff0c;一般使用pandas来进行数据清洗和数据处理、使用sklearn来进行特征工程&#xff0c;特征工程是将任意数据(如文本或图像)转换为可用于机器学习的数字特征&#xff0c;比如:字典特征提取(特征离散化)、文本特征提取…

服务器数据恢复—分区结构被破坏的reiserfs文件系统数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器中有一组由4块SAS硬盘组建的RAID5阵列&#xff0c;上层安装linux操作系统统。分区结构&#xff1a;boot分区LVM卷swap分区&#xff08;按照顺序&#xff09;&#xff0c;LVM卷中划分了一个reiserfs文件系统作为根分区。 服务器故障…

vue3+vite搭建脚手架项目本地运行electron桌面应用

1.搭建脚手架项目 搭建Vue3ViteTs脚手架-CSDN博客 2.创建完项目后&#xff0c;安装所需依赖包 npm i vite-plugin-electron electron26.1.0 3.根目录下创建electron/main.ts electron/main.ts /** electron/main.ts */import { app, BrowserWindow } from "electron&qu…

C++ | Leetcode C++题解之第556题下一个更大元素III

题目&#xff1a; 题解&#xff1a; class Solution { public:int nextGreaterElement(int n) {int x n, cnt 1;for (; x > 10 && x / 10 % 10 > x % 10; x / 10) {cnt;}x / 10;if (x 0) {return -1;}int targetDigit x % 10;int x2 n, cnt2 0;for (; x2 …

大数据技术之Hadoop :我是恁爹

就如上图中的技术分类&#xff0c;大数据技术主要解决的就是海量数据的存储和计算问题。 这两个问题的解决方案最先被 Google 被提出&#xff0c;用于解决 Google 搜索引擎海量的网页存储和索引的构建。对应的技术就是日后被人所熟知的 HDFS 和 MapReduce。 不关注大数据的可…

云计算:定义、类型及对企业的影响

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 云计算&#xff1a;定义、类型及对企业的影响 云计算&#xff1a;定义、类型及对企业的影响 云计算&#xff1a;定义、类型及对企…