Vue3从入门到精通

前端初见

已于 2024-06-26 20:54:26 修改

阅读量1.2k

点赞数 19

文章标签： vue.js 前端 javascript

于 2024-06-24 22:02:53 首次发布

本文链接：https://blog.csdn.net/stc_ljc/article/details/139609627

版权

前言

本文章由于最近工作项目中逐渐使用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上，它会指向当前的组件实例

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

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

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”语法(即双大括号):

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


</script>

页面显示
在这里插入图片描述

使用JavaScript表达式

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

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

在这里插入图片描述
无效

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

原始HTML

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

<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 非常常用，我们提供了特定的简写语法

    <p :class="myClass" :id="myId">属性绑定</p>

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

布尔型Attribute

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

<template>
  <div>
    <button :disabled="isButtonDisabled">button</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isButtonDisabled: true,
    };
  },
};
</script>

在这里插入图片描述

动态绑定多个值

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

<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 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染


<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 区块”

<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区块”。它可以连续多次重复使用

<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。其用法基本一样

<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 是迭代项的别名

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

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

在这里插入图片描述

复杂数据

<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也支持使用可选的第二个参数表示当前项的位置索引

<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 的迭代器语法

    <p v-for="(item,index) of nameList">{{index}},{{ item }}</p>

在这里插入图片描述

v-for与对象

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

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

<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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

前端初见

关注

19
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3从入门到精通

本文章由于最近工作项目中逐渐使用Vue3框架，由于之前使用Vue2多一点，现在快速过一下Vue3！本文章作为学习笔记仅供参考，如若发现哪里有问题欢迎各位大佬提出来。私信我打在评论区都可以，废话不多说，接下来开始我们的学习过程吧！Vue (发音为 /ju:/，类似 view)是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和javaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
复制链接

扫一扫