Vue3从入门到精通

前端初见2024-06-28 18:41

文章目录

前言

本文章由于最近工作项目中逐渐使用Vue3框架，由于之前使用Vue2多一点，现在快速过一下Vue3！本文章作为学习笔记仅供参考，如若发现哪里有问题欢迎各位大佬提出来。私信我打在评论区都可以，废话不多说，接下来开始我们的学习过程吧！

一、为什么选择Vue框架

Vue是什么?

渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的Web前端框架

为什么要学习Vue?

  • Vue是目前前端最火的框架之一
  • Vue是目前企业技术栈要求的知识点
  • Vue可以提升开发体验
  • ...

二、Vue简介

Vue (发音为 /ju:/，类似 view)是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和javaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
渐进式框架:

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和"可以被逐步集成"这个特点。根据你的需求场景，你可以用不同的方式使用 Vue:

  • 无需构建步骤，渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用(SPA)
  • 全栈/服务端渲染(SSR)
  • Jamstack/静态站点生成(SSG)
  • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

Vue版本:

目前，在开发中，Vue有两个大版本可以选择Vue2和 Vue3，老项目一般都是Vue2的，而新项目一般都选择vue3 开发，我们本篇为 Vue3 ，因为 Vue3 涵盖了Vue2 的知识体系，当然 Vue3 也增加了很多新特性
Vue官网

三、Vue API风格

Vue 的组件可以按两种不同的风格书写:选项式 API和组合式 API大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格

选项式API(Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods和 mouned 。选项所定义的属性都会暴露在函数内部的 this上，它会指向当前的组件实例

js 复制代码 
<template>
  <button @click="addnum">{{num}}</button>
</template>
<script>
	export default {
	  name: "Index",
	  components: {
	  },
	  data() {
	    return {
	    num:0
	    };
	  },
	  methods: {
	    addnum(){
	      this.num++
	    }
	  
	  },
	  watch: {
	 
	  },
	  mounted() {
	   console.log('this.num',this.num)
	  },
	};
</script>

组合式API(Composition API)

js 复制代码 
<template>
 <button @click="addnum">{{ num }}</button>
</template>

<script setup>
import { ref, onMounted } from "vue";
const  num=ref(0)
function addnum(){
  num.value++
}
onMounted(()=>{
  console.log(num.value)
})
</script>

<style lang="scss" scoped></style>

该选哪一个?

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API的基础上实现的!关于 Vue 的基础概念和知识在它们之间都是通用的。
在生产项目中

当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API

当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API+单文件组件

四、Vue开发前的准备

构建工具让我们能使用 Vue 单文件组件 (SFC)。Vue 官方的构建流程是基于 Vite 的，一个现代、轻量、极速的

构建工具

前提条件

  • 熟悉命令行
  • 已安装15.0或更高版本的Node.js

创建Vue项目

bash 复制代码 
npm init vue@latest

这一指令将会安装并执行 create.vue，"试支持之类的可选功能提示

启动项目

开发环境

推荐的IDE配置是Visual Studio Code+Volar扩展

五、Vue项目目录结构

我们通过Vue命令行工具 npm init vue@latest: 创建项目，会出现很多文件及文件夹

  • .vscode：vsCode工具的配置文件
  • node_modules：Vue项目的运行依赖文件
  • public：资源文件夹(浏览器图标)
  • src：源码文件夹
  • .gitignore：git忽略文件
  • index.html：入口HTML文件
  • package .json：信息描述文件
  • README .md：注释文件
  • vite.config.js：Vue配置文件

关于下方语法暂时先用vue2先书写学习

六、模版语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

文本插值

最基本的数据绑定形式是文本插值，它使用的是"Mustache"语法(即双大括号):

html 复制代码 
<template>
    <p>{{ mag }}</p>
</template>
<script>
export default{
  data(){
    return{
      mag:'文本插值'
    }
  }
}


</script>

页面显示

使用JavaScript表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法地写在 return 后面

html 复制代码 
<template>
  <div>
    <p>{{ num + 1 }}</p>
    <p>{{ ok?'YES':'NO' }}</p>
    <p>{{ Message.split('').reverse().join('') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 10,
      ok:true,
      Message:'大家好'
    };
  },
};
</script>

<style scoped></style>


无效

js 复制代码 
    <!-- 这是一个语句，而非表达式 -->
    {{ let sum=1 }}
    <!-- 条件控制也不支持，请使用三元表达式 -->
    {{ if(ok){return Message} }}
原始HTML

双大括号将会将数据插值为纯文本，而不是HTML。若想插入 HTML，你需要使用 v-html 指令

html 复制代码 
<template>
  <div>
  
    <p v-html="rawHTML"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {

      rawHTML:"<a href='https://www.baidu.com/'>百度</a>"
    };
  },
};
</script>

七、属性绑定

v-bind

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

html 复制代码 
<template>
    <div>
      <p v-bind:class="myClass" v-bind:id="myId">属性绑定</p>
    </div>
</template>
<script>
export default{
  data(){
    return{
     myClass:'active',
     myId:'userId',
    }
  }
}

</script>
<style scoped>

  .active{
    color: red;
  }
  #userId{
    font-size: 24px;
    font-weight: bolder;
  }
</style>

因为 v-bind 非常常用，我们提供了特定的简写语法

html 复制代码 
    <p :class="myClass" :id="myId">属性绑定</p>


注意

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicd 属性保持一致。如果绑定的但是 null或者undefned ，那么该attribute 将会从渲染的元素上移除

布尔型Attribute

布尔型 attribute 依据 true/false 值来决定 attribute 是否应该存在于该元素上,disabled 就是最常见的例子之一

html 复制代码 
<template>
  <div>
    <button :disabled="isButtonDisabled">button</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isButtonDisabled: true,
    };
  },
};
</script>
动态绑定多个值

如果你有像这样的一个包含多个 attribute 的JavaScript 对象

html 复制代码 
<template>
  <div>
    <div v-bind="objOfAttrs">测试</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      objOfAttrs: {
        id: "myId",
        class: "myClass",
      },
    };
  },
};
</script>

八、条件渲染

在 Vue中，提供了条件渲染，这类似于JavaScript中的条件语句

  • v-if
  • v-else
  • v-else-if
  • v-show
v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

html 复制代码 
<template>
  <div>
    <h1>条件渲染</h1>
    <p v-if="flag">测试v-if</p>
  </div>
</template>
<script>
export default{
  data(){
    return{
      flag:true
    }
  }
}
</script>

当flag为true时显示，false时隐藏

v-else

你也可以使用 v-else 为 v-if 添加一个"else 区块"

html 复制代码 
<template>
  <div>
    <h1>条件渲染</h1>
    <p v-if="flag">测试v-if</p>
    <p v-else>测试v-else</p>
  </div>
</template>
<script>
export default{
  data(){
    return{
      flag:false
    }
  }
}
</script>

当v-if的条件满足显示v-if的内容，否则显示v-else的内容

v-else-if

顾名思义，v-eise-if 提供的是相应于 v-if"的"else if区块"。它可以连续多次重复使用

html 复制代码 
<template>
  <div>
    <h1>条件渲染</h1>
    <p v-if="type==='A'">A</p>
    <p v-else-if="type==='B'">B</p>
    <p v-else-if="type==='C'">C</p>
    <p v-else-if="type==='D'">D</p>
    <p v-else> NOT A B C D</p>
  </div>
</template>
<script>
export default{
  data(){
    return{
      type:'D'
    }
  }
}
</script>
v-show

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样

js 复制代码 
<template>
  <div>
    <h1>条件渲染</h1>
    <p v-show="flag">测试v-show</p>

  </div>
</template>
<script>
export default{
  data(){
    return{
      flag:true,
    }
  }
}
</script>
v-if VS v-show
  • v-if 是"真实的"按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
  • v-if也是惰性的:如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
  • 相比之下， v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有Css disply 属性会被切换。
  • 总的来说，v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好;如果在运行时绑定条件很少改变，则v-if会更合适

九、列表渲染

v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items 形式的特殊语法其中 items 是源数据的数组，而 item 是迭代项的别名

html 复制代码 
<template>
  <div>
    <h1>列表渲染</h1>
    <p v-for="item in nameList">{{ item }}</p>

  </div>
</template>
<script>
export default{
  data(){
    return{
      nameList:['李星云','姬如雪','张子凡'],
    }
  }
}
</script>
复杂数据
html 复制代码 
<template>
  <div>
    <h1>列表渲染</h1>
    <div v-for="item in result">
      <p>{{ item.name }}</p>
      <img style="width:100px" :src="item.img_Url" alt="">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      result: [
        {
          id:1,
          name: "李星云",
          img_Url:
            "https://pic1.zhimg.com/v2-21891f2dfb6fc3de3331090084cfd194_r.jpg",
        },
        {
          id:2,
          name: "姬如雪",
          img_Url:
            "https://pic.rmb.bdstatic.com/bjh/events/9ecb65f259cb50243bf469e48c8968c52351.jpeg@h_1280",
        },
        {
          id:3,
          name: "张子凡",
          img_Url:
            "https://i2.hdslb.com/bfs/archive/bc20b58ab163e63d1e8520436c95d4f9c141b5ad.jpg",
        },
      ],
    };
  },
};
</script>

v-for也支持使用可选的第二个参数表示当前项的位置索引

html 复制代码 
<template>
  <div>
    <h1>列表渲染</h1>
    <p v-for="(item,index) in nameList">{{index}},{{ item }}</p>

  </div>
</template>
<script>
export default{
  data(){
    return{
      nameList:['李星云','姬如雪','张子凡'],
    }
  }
}
</script>

你也可以使用of作为分隔符来替代in，这更接近JavaScript 的迭代器语法

html 复制代码 
    <p v-for="(item,index) of nameList">{{index}},{{ item }}</p>
v-for与对象

你也可以使用 v-for 来遍历一个对象的所有属性

html 复制代码 
<template>
  <div>
    <h1>列表渲染</h1>
    <p v-for="(value,key,index) in userInfo">{{value}}-{{ key }}-{{ index }}</p>

  </div>
</template>
<script>
export default{
  data(){
    return{
      userInfo:{
        name:'李星云',
        age:20,
        sex:'男'
      }
    }
  }
}
</script>
通过key管理状态

Vue 默认按照"就地更新"的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute:

html 复制代码 
<template>
  <div>
    <h1>列表渲染</h1>
    <p v-for="(item,index) of nameList" :key="index">{{index}},{{ item }}</p>

  </div>
</template>
<script>
export default{
  data(){
    return{
      nameList:['李星云','姬如雪','张子凡'],
    }
  }
}
</script>

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！

👨‍🔧 个人主页 : 前端初见

相关推荐
weixin_382395233 小时前
为小工厂量身打造：本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__4 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.4 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~5 小时前
CSS元素显示模式（display）
前端·css
AI大模型-小华6 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子8 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅8 小时前
架构没变、规模没变，DeepSeek V4 Flash 正式版凭什么暴涨 47 分？
前端·aigc·deepseek
jarvisuni9 小时前
DeepSeekFlash前端依旧拉垮，而且变慢了很多！
前端·javascript·算法
卷福同学10 小时前
AI编程出海第二步：验证关键词能否做站
前端·人工智能·后端
热门推荐
01GitHub 镜像站点02如何新建文件夹？ 电脑新建文件夹的4种方法03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09历年考研数学一、数学二、数学三真题试卷及答案PDF102026 年 AI 大模型 & AI 编程工具实战全总结