vue3相关知识点

title: vue_1
date: 2025-01-28 12:00:00
tags:
  - 前端
categories:
  - 前端

vue3

Webpack ~ vite

vue3是基于vite创建的

vite 更快一点

一些准备工作

准备后如图所示

image-20250127163451471

插件

image-20250127163615341

image-20250127163622050

image-20250127163640162

Main.ts

// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'

createApp(App).mount('#app')

App 是根组件,createApp是盆

npm run dev

APP.vue

<template>
  <div class="app">
    <h1>你好啊!</h1>
  </div>
</template>

<script lang="ts">
  export default {
    name:'App' //组件名
  }
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

简单效果实现

<template>
  <div class="person">
    <h2>姓名:{% raw %}{
 
 {name}}{% endraw %}</h2>
    <h2>年龄:{% raw %}{
 
 {age}}{% endraw %}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    data(){
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      // 修改姓名
      changeName(){
        this.name = 'zhang-san'
      },
      // 修改年龄
      changeAge(){
        this.age += 1
      },
      // 展示联系方式
      showTel(){
        alert(this.tel)
      }
    }
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>

这个代码分别是cue组件的三个主要部分,分别对应的模版,脚本和样式

模版部分:也就是trmplate

模版

模版是vue组件的视图部分,定义了组件的html结构

在vue中。模版部分是通过高{% raw %}{ {}}{% endraw %}语法实现数据绑定的,{% raw %}{ {name}}{% endraw %} 会绑定到 data 中的 name 数据。

其中的@click 指令绑定点击事件,点击按钮时执行相应的方法,chageName,changeAge,changeTel

<template>
  <div class="person">
    <h2>姓名:{% raw %}{
 
 {name}}{% endraw %}</h2>
    <h2>年龄:{% raw %}{
 
 {age}}{% endraw %}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

脚本部分

脚本定义了vue组件的逻辑部分

  • data :组件的状态,即组件中使用的数据

  • Methods:定义组件的方法,这些方法可以在模版中调用来响应用户事件

  • name : 组件的名字,这里是'Person',在vue开发工具中查看到这个组件

    <script lang="ts">
      export default {
        name:'Person',
        data(){
          return {
            name:'张三',
            age:18,
            tel:'13888888888'
          }
        },
        methods:{
          // 修改姓名
          changeName(){
            this.name = 'zhang-san'
          },
          // 修改年龄
          changeAge(){
            this.age += 1
          },
          // 展示联系方式
          showTel(){
            alert(this.tel)
          }
        }
      }
    </script>

这段代码是一个 Vue 组件 的脚本部分,使用的是 TypeScript 语法。它定义了组件的 数据方法组件的名称

export default {
  name: 'Person',  这里就是组件的名称
  data() { ... },
  methods: { ... }
}

export default 是一个 ES6 模块语法,它表示该文件导出的内容是一个对象,并且该对象是默认导出的。这使得 Vue 在加载组件时可以导入这个对象并使用它来渲染组件

样式部分

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>

scoped 属性确保这些样式只作用于当前组件,不会影响到其他组件。这是因为 Vue 会为每个组件自动加上独特的属性选择器(如 .person 只作用于当前组件的 .person 元素)。

app.vue

<template>
  <div class="app">
    <h1>你好啊!</h1>
    <Person/>
  </div>
</template>

<script lang="ts">
  import Person from './components/Person.vue'

  export default {
    name:'App', //组件名
    components:{Person} //注册组件
  }
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

Export default{}

export default {
  name: 'App',
  components: { Person }
}

export default 语句使得这个对象成为当前模块的默认导出。这意味着在其他地方使用 import 时,就可以导入这个对象。该对象定义了一个 Vue 组件,组件的名字是 App(通过 name: 'App' 设置)。App 是这个 Vue 组件的名称,它通常是根组件或父组件的名称。

• name 属性指定了当前组件的名字。在 Vue 开发工具中,App 组件将显示为 App,它通常是 Vue 应用的根组件。

• App 组件是父组件,而 Person 组件是它的子组件。

• components 是一个 Vue 组件选项,表示当前组件所使用的子组件。

• 这里通过 components: { Person } 注册了 Person 组件,意味着在 App 组件的模板中可以使用 <Person 标签来引用 Person 组件。

• 由于我们已经通过 import Person from './components/Person.vue' 导入了 Person 组件,所以在 components 中注册它时,只需要直接写 Person 就可以了。

【OptionsAPI 与 CompositionAPI】

Options API 的弊端

Options类型的 API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。

Composition API 的优势

可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

<template>
  <div class="person">
    <h2>姓名:{% raw %}{
 
 {name}}{% endraw %}</h2>
    <h2>年龄:{% raw %}{
 
 {age}}{% endraw %}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    beforeCreate(){
      console.log('beforeCreate')
    },
    setup(){
      console.log(this) //setup中的this是undefined,Vue3在弱化this了
      // 数据,原来是写在data中的,此时的name、age、tel都不是响应式的数据
      let name = '张三'
      let age = 18
      let tel = '13888888888'
      
      // 方法
      function changeName() {
        name = 'zhang-san' //注意:这样修改name,页面是没有变化的
        console.log(name) //name确实改了,但name不是响应式的
      }
      function changeAge() {
        age += 1 //注意:这样修改age,页面是没有变化的
        console.log(age) //age确实改了,但age不是响应式的
      }
      function showTel() {
        alert(tel)
      }

      // 将数据、方法交出去,模板中才可以使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>

这段代码展示了一个vue3组件的setup()函数的使用,并且展示了一些vue3中的特性

Setup与compositionAPI

  • 组件名称

    export default {
      name: 'Person',
      beforeCreate() {
        console.log('beforeCreate')
      },

beforeCreate() 是一个 生命周期钩子,它会在 Vue 实例被创建之前调用。这是 Vue 2 和 Vue 3 中都存在的生命周期钩子,但是在 Vue 3 的 Composition API 中,生命周期钩子的使用方式发生了变化,通常会使用 onBeforeMount 等新的钩子函数(在 setup() 函数中)。

  • setup函数

    setup() {
      console.log(this) // setup中的this是undefined,Vue3在弱化this了

setup() 函数是 Vue 3 引入的 Composition API 的一部分,目的是简化组件的状态和行为的管理。

• 在 setup() 中,this 是 undefined,这与 Vue 2 中的 this(指向当前组件实例)不同。Vue 3 通过 Composition API 进行了优化,弱化了对 this 的依赖,增强了对组合逻辑的关注。此时,你应该通过返回的对象来访问数据和方法,而不是通过 this。

  • 定义数据

    let name = '张三'
    let age = 18
    let tel = '13888888888'

  • 定义方法

    function changeName() {
      name = 'zhang-san' // 注意:这样修改name,页面是没有变化的
      console.log(name) // name确实改了,但name不是响应式的
    }
    function changeAge() {
      age += 1 // 注意:这样修改age,页面是没有变化的
      console.log(age) // age确实改了,但age不是响应式的
    }
    function showTel() {
      alert(tel)
    }

    changeName()、changeAge() 和 showTel() 是组件的方法。修改 name 和 age 时,你会发现页面没有发生变化。这是因为 name 和 age 是普通的 JavaScript 变量,而不是响应式数据

    如果你希望这些数据能够自动反映到模板中,应该使用 Vue 3 的响应式 API(如 ref()

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

零基础Vue入门4——Vue3基础核心

本节重点&#xff1a; vue3最佳实践 ref reactive computed watch、watchEffect 讲解重点之后下面会带大家开发一个页面&#xff08;表单表格&#xff09;&#xff0c;之后会有一个TodoList的小练习&#xff0c;文末附有小练习的代码参考。跟着练习一定带你可以上手开发vu…

文件上传2

BUUCTF 你传你&#x1f40e;呢 先上传.htaccess 修改格式 即可上传成功 返回上传图片格式的木马 用蚁剑连接 5ecf1cca-59a1-408b-b616-090edf124db5.node5.buuoj.cn:81/upload/7d8511a847edeacb5385299396a96d91/rao.jpg 即可得到flag [GXYCTF2019]BabyUpload

网安加·百家讲坛 | 樊山:数据安全之威胁建模

作者简介&#xff1a;樊山&#xff0c;锦联世纪教育能源工业互联网数字安全CSM(新能源运维师)课程特聘培训讲师&#xff0c;哈尔滨工业大学&#xff08;深圳&#xff09;信飞合创数据合规联合实验室特聘专家&#xff0c;武汉赛博网络安全人才研究中心资深专家&#xff1b;近24年…

联想Y7000+RTX4060+i7+Ubuntu22.04运行DeepSeek开源多模态大模型Janus-Pro-1B+本地部署

直接上手搓了&#xff1a; conda create -n myenv python3.10 -ygit clone https://github.com/deepseek-ai/Janus.gitcd Januspip install -e .pip install webencodings beautifulsoup4 tinycss2pip install -e .[gradio]pip install pexpect>4.3python demo/app_januspr…

冬天适合养什么鱼?

各位鱼友们&#xff0c;冬天来了&#xff0c;是不是还在为养什么鱼而烦恼&#xff1f;别担心&#xff0c;今天就来给大家好好推荐一些适合冬天养的鱼&#xff0c;让你的水族箱在寒冷的冬天也能生机勃勃&#xff01; 一、金鱼&#xff1a;冬日里的“小暖男” 金鱼绝对是冬季养鱼…

2024年终总结

回顾 今年过年没回老家&#xff0c;趁着有时间&#xff0c;总结一下24年吧。 我把23年看做是打基础的一年&#xff0c;而24年主要是忙于项目的一年&#xff0c;基本上大部分时间都是忙着交付软件&#xff0c;写的一些文章也大部分都是项目中遇到的问题和解决方案&#xff0c;虽…

安宝特方案 | 智能培训:安宝特AR如何提升企业技能培训的效率与互动性

随着企业不断推进数字化转型&#xff0c;传统培训方式已无法满足现代企业对高效、灵活培训的需求。尤其在技术更新频繁、工艺流程复杂、员工流动性大的环境中&#xff0c;传统培训模式的局限性愈加明显。为了提升培训质量、降低培训成本&#xff0c;并帮助员工迅速掌握新技能&a…

1.27补题 回训练营

E 智乃的小球 题目描述 在一条无限长的水平直线上&#xff0c;有 n 个小球&#xff0c;每个小球的质量相同&#xff0c;体积可以忽略不计。这些小球初始时位于直线上的不同位置&#xff0c;并且每个小球有一个初始速度&#xff0c;速度为 -1 m/s 或 1 m/s。速度为 -1 m/s 表示…

Spring Boot 实现文件上传和下载

文章目录 Spring Boot 实现文件上传和下载一、引言二、文件上传1、配置Spring Boot项目2、创建文件上传控制器3、配置文件上传大小限制 三、文件下载1、创建文件下载控制器 四、使用示例1、文件上传2、文件下载 五、总结 Spring Boot 实现文件上传和下载 一、引言 在现代Web应…

CTFSHOW-WEB入门-命令执行39-53

题目&#xff1a;web 39 题目&#xff1a;解题思路&#xff1a;分析代码可以知道题目要求get一个c的参数&#xff0c;并且过滤了flag&#xff0c;大小写均过滤&#xff0c;于是可以想到使用&#xff1f;或者*通配符绕过。这里有include函数&#xff0c;由于include是个漏洞函数…

OpenCSG月度更新2025.1

1月的OpenCSG取得了一些亮眼的成绩 在2025年1月&#xff0c;OpenCSG在产品和社区方面继续取得了显著进展。产品方面&#xff0c;推出了AutoHub浏览器自动化助手&#xff0c;帮助用户提升浏览体验&#xff1b;CSGHub企业版功能全面升级&#xff0c;现已开放试用申请&#xff0c…

HTML(快速入门)

欢迎大家来到我的博客~欢迎大家对我的博客提出指导&#xff0c;有错误的地方会改进的哦~点击这里了解更多内容 目录 一、前言二、HTML基础2.1 什么是HTML?2.2 认识HTML标签2.2.1 HTML标签当中的基本结构2.2.2 标签层次结构 2.3 HTML常见标签2.3.1 标题标签2.3.2 段落标签2.3.3…

二叉树-堆(补充)

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…

JVM01_概述、跨平台原理、分类、三大商业虚拟机

①. 什么是JVM&#xff1f; ①. JVM 是 java虚拟机&#xff0c;是用来执行java字节码(二进制的形式)的虚拟计算机 ②. jvm是运行在操作系统之上的&#xff0c;与硬件没有任何关系 ②. Java的跨平台及原理 ①. 跨平台&#xff1a;由Java编写的程序可以在不同的操作系统上运行&am…

实现基础的shell程序

1. 实现一个基础的 shell 程序&#xff0c;主要完成两个命令的功能 cp 和 ls 1.1.1. cp 命令主要实现&#xff1a; ⽂件复制⽬录复制 1.1.2. ls 命令主要实现&#xff1a; ls -l 命令的功能 1.1. 在框架设计上&#xff0c;采⽤模块化设计思想&#xff0c;并具备⼀定的可扩…

idea修改模块名导致程序编译出错

本文简单描述分别用Idea菜单、pom.xml文件管理项目模块module 踩过的坑&#xff1a; 通过idea菜单创建模块&#xff0c;并用idea菜单修改模块名&#xff0c;结构程序编译报错&#xff0c;出错的代码莫名奇妙。双击maven弹窗clean时&#xff0c;还是报错。因为模块是新建的&am…

C27.【C++ Cont】时间、空间限制和STL库的简单了解

&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;春节篇&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8;&#x1f9e8; 目录 1.竞赛中的…

ResNet 残差网络

目录 网络结构 残差块&#xff08;Residual Block&#xff09; ResNet网络结构示意图 残差块&#xff08;Residual Block&#xff09;细节 基本残差块&#xff08;ResNet-18/34&#xff09; Bottleneck残差块&#xff08;ResNet-50/101/152&#xff09; 残差连接类型对比 变体网…

组件框架漏洞

一.基础概念 1.组件 定义&#xff1a;组件是软件开发中具有特定功能或特性的可重用部件或模块&#xff0c;能独立使用或集成到更大系统。 类型 前端 UI 组件&#xff1a;像按钮、下拉菜单、导航栏等&#xff0c;负责构建用户界面&#xff0c;提升用户交互体验。例如在电商 AP…

电脑无法开机,重装系统后没有驱动且驱动安装失败

电脑无法开机&#xff0c;重装系统后没有驱动且驱动安装失败 前几天电脑突然坏了&#xff0c;电脑卡住后&#xff0c;强制关机&#xff0c;再开机后开机马上就关机。尝试无数次开机后失败&#xff0c;进入BIOS界面&#xff0c;发现已经没有Windows系统了。重新安装系统后&…