vue3黑马笔记

最新推荐文章于 2024-04-08 00:05:41 发布
最新推荐文章于 2024-04-08 00:05:41 发布
阅读量322 收藏 8
点赞数 2
文章标签： 笔记 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49390750/article/details/131953286
版权

一、创建vue3项目

需要node16版本或者以上，

npm init vue@latest

在这里插入图片描述

二、vue3模块

在这里插入图片描述

在vue3中所有的创建都用了函数封装，保证了每个实例的独立性
在这里插入图片描述

三、setup

1、setup选项

setup组合式api
1、执行时间比beforeCreate还早
2、setup函数，获取不到this
3、数据和函数需要return出去才可以使用
在这里插入图片描述

<script>
export default {

  setup(){
    console.log("setup", this)

    const message = "消息"
    const aaa = () =>{
      console.log("函数调用")
    }
    return {
      message,
      aaa
    }
  },
  beforeCreate() {
    console.log("beforeCreate")
  }
}
</script>

<template>
  <div>{{message}}</div>
  <button @click="aaa">点击按钮</button>
</template>

2、setup语法糖（<script setup>）

不需要return就可以使用函数和参数

<script setup>
   const message = "消息"
    const aaa = () =>{
      console.log("函数调用")
    }
</script>

<template>
  <div>{{message}}</div>
  <button @click="aaa">点击按钮</button>
</template>

3、setup原理

在这里插入图片描述
在这里插入图片描述

四、响应式(推荐使用ref)

1、reactive 响应式对象

<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    count: 100
  })

  const aaa = () => {
    state.count++
  }

   
</script>

<template>
  <div>{{state.count}}</div>
  <button @click="aaa">增加</button>
</template>

2、ref 响应式简单类型或者对象类型

实际上ref是被给包了一层，可以打印看到变成了对象

1、在js中需要变量.value去拿到值
2、在vue的template可以直接拿到值（vue3给拔了一层）

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  console.log("包装了对象", count)
  console.log("取值", count.value)
  const aaa = () => {
    count.value++
  }

   
</script>

<template>
  <!-- 直接取值就行 -->
  <div>{{count}}</div>
  <button @click="aaa">增加</button>
</template>

五、计算属性

1、computed

<script setup>
  import { ref, computed } from 'vue'
  const list = ref([0,1,2,3,4,5])
  const computedList = computed(()=>{
    return list.value.filter(item => item > 2)
  })
  const aaa = () => {
    list.value.push("666")
  }
</script>

<template>
  <!-- 直接取值就行 -->
  <div>{{ list }}</div>
  <div>{{ computedList }}</div>
  <button @click="aaa">增加</button>
</template>

2、computed完整写法

<script setup>
  import { ref, computed } from 'vue'
  const count = ref(1)
  const computedList = computed({
    //简写get: () => count.value + 1
    get() {
      return count.value + 1
    },
    set(val){
      console.log(val)
      count.value = val
    }
  })
  const aaa = () => {
    computedList.value = 100
  }

</script>

<template>
  <!-- 直接取值就行 -->
  <div>{{ computedList }}</div>
  <button @click="aaa">增加</button>
</template>

六、watch监听

1、watch监听单个

<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('张三')

  const setName = () => {
    name.value = "里斯"
  }
  
  const setCount = () => {
    count.value = 18
  }


  // 单个监听
  watch(count, (newValue, oldValue)=>{
    if (newValue == 18) {
      name.value = "小伙子"
    }
  })

</script>

<template>

<div>{{count}}</div>
<div>{{name}}</div>
<button @click="setName">修改名称</button>
<button @click="setCount">修改年龄</button>
</template>

2、watch监听多个

<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('张三')

  const setName = () => {
    name.value = "里斯"
  }
  
  const setCount = () => {
    count.value = 18
  }

  //多个监听
  watch([count, name], (newValue, oldValue)=>{
    console.log(newValue, oldValue)
  })
</script>

<template>
<div>{{count}}</div>
<div>{{name}}</div>
<button @click="setName">修改名称</button>
<button @click="setCount">修改年龄</button>
</template>

在这里插入图片描述

3、watch监听配置参数

deep:true 对复杂类型进行深度监听
immdiate:true 页面初始化 立刻执行一次
这边就简写了

<script setup>
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('张三')

  const setName = () => {
    name.value = "里斯"
  }
  
  const setCount = () => {
    count.value = 18
  }

  //多个监听
  watch([count, name], (newValue, oldValue)=>{
    console.log(newValue, oldValue)
  },{
  	deep:true,
  	immdiate:true
  })
</script>

<template>
<div>{{count}}</div>
<div>{{name}}</div>
<button @click="setName">修改名称</button>
<button @click="setCount">修改年龄</button>
</template>

4、精准监听对象

在这里插入图片描述

七、生命周期

在这里插入图片描述

在这里插入图片描述

八、父子通信

8.1、父传子

1、父传子语法

语法
>子对象
实例：其中:money是动态绑定的，到子组件就会动态变化
在这里插入图片描述

2、原理

在这里插入图片描述

8.2、子传父

1、语法

语法
在这里插入图片描述

九、模板引用和defineExpose宏函数

1、ref获取dom对象

在这里插入图片描述

案例
在这里插入图片描述

2、defineExpose宏函数

在这里插入图片描述

ref调用子组件内的方法

子组件
在这里插入图片描述

父组件

在这里插入图片描述

十、provide和inject跨层级别通讯

语法 顶层组件也可以把函数传递下去
在这里插入图片描述

十一、vue3.3的新特性

1、defineOptions（与setup函数平级例如：组件命名）

语法：
在这里插入图片描述
例子
在这里插入图片描述

2、defineModel（为了解决动态绑定值传递问题）

1、原本实现方法（使用vue2的逻辑在vue3中写）

父组件

在这里插入图片描述

子组件
1、先接prop
2、注册emit发送事件
3、监听组件value
4、发送组件消息

在这里插入图片描述

2、新特性的写法

语法
在这里插入图片描述
案例

  1. 父组件不变
  2. 子组件
    在这里插入图片描述
  3. 开启事件（vite.config.js中开启）
    在这里插入图片描述
  4. 重启vue项目

十二、pinia（替代vuex）

1、pinia是什么

官网
在这里插入图片描述

2、变量和函数和计算

安装

npm install pinia

导包

import { createApp } from 'vue'
import App from './App.vue'
//1、导入
import { createPinia } from 'pinia'
//2、.use(createPinia())
createApp(App).use(createPinia()).mount('#app')

使用
新建目录store，新建counter.js

import { defineStore } from "pinia";
import { ref,computed } from "vue";

export const useCounterStore = defineStore('counter', () => {
    //声明变量
    const count = ref(100)

    //声明函数action
    const addCount = () => count.value++
    const subCount = () => {
        count.value--
    }

    //计算属性getters(computed)
    const double = computed(() => count.value * 2)

    //声明变量
    const msg = ref('hello')

    return {
        addCount,
        subCount,
        count,
        msg,
        double
    }

})

App.vue

<script setup>
import Son1Com from '@/components/Son1Com.vue';
import Son2Com from '@/components/Son2Com.vue';




</script>

<template>
  <Son1Com></Son1Com>
  <Son2Com></Son2Com>


</template>

Son1Com

<script setup>
import { useCounterStore } from '@/store/counter'



const counterStore = useCounterStore()

</script>
<template>
    <h1>{{ counterStore.count }}</h1>
    <div>我是Son1</div>
    <button @click="counterStore.addCount">+</button>

    <h3>{{counterStore.double}}</h3>
</template>

Son2Com

<script setup>
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()
</script>
<template>

    <h1>{{ counterStore.count }}</h1>
    <div>我是Son2</div>
    <button @click="counterStore.subCount">-</button>
</template>

3、异步函数

在这里插入图片描述

4、storeRefs方法

注意直接解构不会响应式
在这里插入图片描述

如何变成响应式
在这里插入图片描述

5、持久化persistedstate插件

官网
使用

安装

npm i pinia-plugin-persistedstate

将插件添加到 pinia 实例上在main.js当中

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
createApp(App).use(pinia).mount('#app')

使用在counter.js中

import { defineStore } from "pinia";
import { ref,computed } from "vue";
export const useCounterStore = defineStore('counter', () => {
    //声明变量
    const count = ref(100)
    return {
        count
    }
},{
    // 开启持久化
    persist: true,
})

持久化参数

import { defineStore } from "pinia";
import { ref,computed } from "vue";
export const useCounterStore = defineStore('counter', () => {
    //声明变量
    const count = ref(100)
    return {
        count
    }
},{
    // 开启持久化
    persist: {
	//看文档
	}
})

其中paths持久存储哪些值
在这里插入图片描述

6、封装

记得在main.js中vue实体记得use一下pinia
在这里插入图片描述

在这里插入图片描述

使用
在这里插入图片描述

十三、pnpm创建项目

命令

npm install -g pnpm
pnpm create vue

在这里插入图片描述

项目创建
在这里插入图片描述

十四、eslint和prettier配置代码风格

1、下载插件

vscode中prettier插件卸载
安装ESLint插件

2、配置.eslint.cjs文件

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },



//此处开始配置
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, //无分号
        printWith: 80, //行宽
        trailingComma: 'none', //不加对象|数组最后的逗号
        endOfLine: 'auto' // 换行符号不限
      }
    ],
    //ESLint关注代码规范
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] //vue组件名称多单词组成(忽略index.vue)
      }
    ],
    'vue/no-setup-props-destructure': ['off'], //关闭prop结构的校验(props结构丢失响应式)
    //变量未定义报错
    'no-undef': 'error'
  }
}

3、打开设置（左下角）

在这里插入图片描述
在这里插入图片描述

1和2加上去

{
    "explorer.confirmDelete": false,
    "security.workspace.trust.untrustedFiles": "open",
    "workbench.editorAssociations": {
        "*.dll": "default"
    },
    
    // 1保存自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 2关闭保存自动格式化
    "editor.formatOnSave": false
}

十五、路由

在这里插入图片描述
简单介绍
在这里插入图片描述

其中这个文件是router文件夹下的index.js文件
import.meta.env.BASE_URL这个是比如使用了hash模式，其中那个#号可以在这通过变量传来，变量在vite.config.js文件中
在这里插入图片描述
语法
支持vue2的用法直接在模板中进行$xxx.push
在这里插入图片描述

十六、axios

pnpm add axios

封装跟vue2差不多，你自己看着找找

十七、路由守卫

唯一不同的就是next换成了

//全局前置路由，配合浏览器localStorage进行鉴权操作
const urls = ['/pay','/myOrder']
router.beforeEach((to, from, next) =>{
    
    // console.log(to, from);
    
    if(!urls.incloudes(to.path)){   
    	 
     	return true
    }
    //如果没有token并且还是鉴权路径
    return '/login'
})

// 全局后置路由，简单写一个弹窗，在进入每一个路由组件后弹出一句话
router.afterEach(() =>{
    alert('欢迎你！！');
})
张航柯
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
黑马程序员 vue3小兔鲜电商项目笔记 一、项目初始化
qq_63787455的博客
09-05 965
同样的方法我们在src目录下的views文件夹中创建两个名为Home和Category的文件夹，并给他俩都创建一个名为index.vue的文件，里面分别添加如下代码。保存之后我们重启一遍我们的按需导入就完成啦，那么接下来我们进行一下试验，我们来到官网，打开组件，我们选择按钮。里面有很多导入方式，因为我们所需的组件并不是他全部的，所以我们选择按需导入，接着我们在终端中输入如下命令安装。因为我们用的是vite，所以安装成功后我们需要添加代码到我们的vite.config.js中。
Vue3-42-组件-给组件指定名称 + defineOptions 函数的简单使用
northcastle的博客
01-07 998
vue3 的组合式API中 指定组件的名称 - defineOptions 方法的使用
Vue3当中通过script和defineOptions两种方式指定组件的name
qq_44212319的博客
01-22 828
Vue3当中通过script和defineOptions两种方式指定组件的name
Vue3入门笔记【黑马】
最新发布
m0_59778008的博客
04-08 1286
默认情况下在 script setup语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问。补充：setup语法糖只是帮你省略了一些代码，但是它的底层原理仍然是把定义的数据和方法导出后再使用。而 setup 为组合式API的入口，只有先写setup，才能往里面写组合式API的函数。在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。
Vue3-黑马（一）
dengfengling999的博客
05-09 1682
我们访问的使用的localhost，这个ip地址去访问的，这就意味着，只能自己去访问，在局域网中别人是不能访问你这个vue的应用的，这个怎么该呢。因为刚才的变量不是响应式的变量，在vue3里只要响应式的变量才能在页面达到响应式的更新，可以使用vue的函数把普通的变量包装成响应式的变量。vue3的技术选型，它提供了两套API，一个是选项式的API（vue2的东西）和组合式的API。项目默认监听的5173，还可以修改端口，想改项目的配置文件：vite config.ts。我们用组合式的API，因为它更简单。
在webpack中通过 unplugin-vue-define-options 插件， 实现 在Vue3 setup语法糖中，自定义组件的 name 属性，最后实现组件的全局自动注册,
qq_42544091的博客
07-09 8353
Vue3 setup语法糖中，自定义组件的 name 属性，最后实现组件的全局自动注册
前端项目学习Vue3项目实战商店后台管理系统
Blue_Pepsi_Cola的博客
02-15 1466
https://www.bilibili.com/video/BV15v4y1b7Bw/?vd_source=240d9002f7c7e3da63cd9a975639409a#reply151314916928//TODO
vue笔记黑马
04-08
vue所有笔记--黑马
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue
vue学习笔记，B站黑马程序员的javaweb
11-05
vue学习笔记，B站黑马程序员的javaweb
Vue2+Vue3笔记（黑马程序员+尚硅谷）
05-26
Vue2+Vue3笔记（黑马程序员+尚硅谷）
Vue2.0渐进式框架黑马笔记
08-20
Vue2.0渐进式框架笔记，vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面...
从零开始JavaScript学习第13天笔记：DOM的应用
2203_75620248的博客
08-24 45
alert()用于显示简单的警告消息，confirm()用于显示确认对话框，并返回用户的选择结果，prompt()用于显示提示对话框，用户可以在其中输入信息。可以使用location.href获取当前页面的URL，使用location.assign()跳转到新的URL，使用location.reload()重新加载当前页面。使用history对象可以操作浏览器的历史记录。例如，可以使用open()方法打开新的窗口或标签页，使用close()方法关闭当前窗口或标签页，使用print()方法打印当前页面。
【Web前端学习之路】Vue3.0 前端必会框架 （黑马课程笔记01）
a123456_9的博客
12-01 634
模块化(JS的模块、css的模块、其他资源的模块化)组件化（复用现有的UI结构、样式、行为）规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）自动化（自动化构建、自动部署、自动化测试）2、webpack基础什么是webpackwebpack是前端项目工程化的具体解决方案，提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性、性能优化等强大功能。提高了前端开发效率和项目的可维护性。webpack 的安装webpack 的配置。
使用javascript实现一个简单的表单验证！！！
DANGLi_的博客
04-03 342
最后，我们还定义了一个用于验证电子邮件地址的函数isValidEmail0。在这个示例代码中，我们首先获取了表单元素和各个输入字段的引用。4.验证电子邮件地址是否有效。如果电子邮件地址无效，则弹出警告消息并返回。3.验证用户输入是否为空。如果任何必填字段为空，则弹出警告消息并返回。单的正则表达式来验证电子邮件地址的格式是否正确。2.获取用户输入，并去掉输入字段前后的空格。5.如果所有验证都通过，则提交表单。1.阻止表单默认提交行为。
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67265919的博客
03-11 3480
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
2021高薪版全套前端Vue2+Vue3，全网率先推出，秋招高薪大杀器！
weixin_51689029的博客
08-04 555
互联网发展至今，前端工程师以其高需求量和高薪酬成为IT行业职场新贵。 走进现代前端开发行业，小编发现，每一位前端开发人员都面临着一个重要决策，选择一个合适的框架。 这时，更符合时代大势所趋的前端框架Vue，以其独有的优势受到开发人员追捧。 盘点黑马程序员超百万播放量的视频，其中有一套便是《4个小时带你快速入门Vue》，115万播放量，4.7万收藏量，获得全网好评。 当然！这还不够！ 技术在更新，我们也不曾停止脚步 我带着最新前端Vue教程来了 历经 5 年的反复打磨与锤炼 黑马程序员课研老师呕心沥血 从
VueDemo3：音乐播放器[黑马Vue基础网课跟写](vue,axios)
旗袍不开、怎么得胜？
07-01 1398
VueDemo3：音乐播放器 一.歌曲搜索 1。按下回车(v-on,enter) 2.查询数据(axios 接口 v-model) 3.渲染数据(v-for 数组 that) 服务器返回的数据比较复杂时，获取的时候需要注意层级结构 通过审查元素快速定位到需要操纵的元素 二.歌曲播放 根据服务器检索结果,找到歌曲播放的url。 通过v-bind,刷新标签中的src属性,以实现播放不同音乐的效果。 歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注。 三.播放动画 audio标签的play事件会在音频播放的时
vue3 黑马最新教程
09-07
黑马程序员最新的Vue...如果你对Vue3感兴趣，可以查看黑马程序员的最新教程，跟着视频一步步学习Vue的开发。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张航柯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值