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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！

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

相关推荐
煸橙干儿~~2 分钟前
分析JS Crash（进程崩溃）
java·前端·javascript
哪 吒4 分钟前
华为OD机试 - 几何平均值最大子数（Python/JS/C/C++ 2024 E卷 200分）
javascript·python·华为od
安冬的码畜日常11 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕（下）—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
杨荧30 分钟前
【JAVA开源】基于Vue和SpringBoot的洗衣店订单管理系统
java·开发语言·vue.js·spring boot·spring cloud·开源
l1x1n039 分钟前
No.3 笔记 | Web安全基础：Web1.0 - 3.0 发展史
前端·http·html
Q_w774243 分钟前
一个真实可用的登录界面！
javascript·mysql·php·html5·网站登录
昨天；明天。今天。1 小时前
案例-任务清单
前端·javascript·css
一丝晨光1 小时前
C++、Ruby和JavaScript
java·开发语言·javascript·c++·python·c·ruby
Front思1 小时前
vue使用高德地图
javascript·vue.js·ecmascript
zqx_72 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache