随笔分类 -  Vue

该分类下记载使用Vue框架,所产生的问题及学习心得
摘要:## 1. 问题 ### 1.1 场景 使用**Vue3 + setup**语法,使用`defineProps`时出现Eslint错误: ![](https://img2023.cnblogs.com/blog/2240374/202308/2240374-20230803101840773-197 阅读全文
posted @ 2023-08-03 10:42 青柠i 阅读(6693) 评论(0) 推荐(1)
摘要:有 Vue2 的基础,笔记只记载之前不熟悉的知识 一、Vue 基本知识 1. Vue3 基本指令 1.1 v-pre v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签: 跳过不需要编译的节点,加快编译的速度; <template> <div> <div v-pre>{{m 阅读全文
posted @ 2022-12-28 18:22 青柠i 阅读(163) 评论(0) 推荐(0)
摘要:Pinia 最初是在 2019 年 11 月左右重新设计使用Composition API。从那时起,最初的原则仍然相同,但 Pinia 对 Vue 2 和 Vue 3 都有效,并且不需要您使用组合 API。 Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 一、介绍 1.Pinia 阅读全文
posted @ 2022-11-01 20:40 青柠i 阅读(169) 评论(0) 推荐(0)
摘要:1. 定义 404 路由 当URL地址上的路径不能匹配到对应的路由时,可设置404路由界面。 router/index.js // router/index.js import { createRouter, createWebHashHistory } from 'vue-router'; imp 阅读全文
posted @ 2022-11-01 11:40 青柠i 阅读(189) 评论(0) 推荐(0)
摘要:一、响应式基础 前提:你会使用 setup 函数或 <script setup>语法 1.reactive 我们可以使用 reactive() 函数创建一个响应式对象或数组: import { reactive } from 'vue' const state = reactive({ count: 阅读全文
posted @ 2022-10-27 17:03 青柠i 阅读(190) 评论(0) 推荐(0)
摘要:一、响应式基础 前提:你会使用 setup 函数或 <script setup>语法 1.reactive 我们可以使用 reactive() 函数创建一个响应式对象或数组: import { reactive } from 'vue' const state = reactive({ count: 阅读全文
posted @ 2022-10-26 15:49 青柠i 阅读(117) 评论(0) 推荐(0)
摘要:💥💥💥 环境为:Vue3 1. 原生元素上的 v-model <p>{{ msg }}</p> <input v-model="msg" /> <!-- 上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开): --> <input :value="msg" @input="m 阅读全文
posted @ 2022-10-14 16:03 青柠i 阅读(52) 评论(0) 推荐(0)
摘要:一、Vue CLI脚手架 1. 安装和使用 1.1 系统全局安装 npm install @vue/cli -g 1.2 升级Vue CLI 如果是比较旧的版本,可以通过下面的命令来升级 npm update @vue/cli -g 1.3 创建项目 通过 vue 的命令来创建项目 vue crea 阅读全文
posted @ 2022-09-30 14:33 青柠i 阅读(1029) 评论(0) 推荐(0)
摘要:前提: 路由使用 BrowserRouter 模式 在 index.html 中引入了样式 1. 修改路径1 public/index.html 中引入样式时不写./写 /(常用) 2. 修改路径2 在 React 中 public/index.html 中引入样式时不写 / 写 %PUBLIC_U 阅读全文
posted @ 2021-11-06 17:04 青柠i 阅读(275) 评论(0) 推荐(0)
摘要:Toast组件用于展示提示信息,属于项目全局都可以使用。 1. Toast.vue <template> <div class="toast" v-show="isShow"> {{ message }} </div> </template> <script> export default { na 阅读全文
posted @ 2021-10-31 16:58 青柠i 阅读(235) 评论(0) 推荐(0)
摘要:1. 前言 当data中的数据发生改变,Vue内部是如何监听message数据的改变? 使用Object.defineProperty > 监听对象属性的改变 当数据发生改变,Vue是如何知道要通知哪些人?哪些页面进行更新? 使用 发布订阅者模式 实现 2. 过程 2.1 首先new Vue() n 阅读全文
posted @ 2021-10-28 14:58 青柠i 阅读(61) 评论(0) 推荐(0)
摘要:1. 找到C盘下的路径 Windows操作系统下: C:\Users\admin\.vuerc 2. 打开.vuerc文件 3. 修改完成 阅读全文
posted @ 2021-10-23 10:12 青柠i 阅读(614) 评论(0) 推荐(0)
摘要:1. 什么是异步渲染? **环境补充:**当数据在同步变化的时候,页面订阅的响应操作为什么不会与数据变化完全对应,而是在所有的数据变化操作做完之后,页面才会得到响应,完成页面渲染。 从一个例子体验一下异步渲染机制: import Vue from 'Vue' new Vue({ el: '#app' 阅读全文
posted @ 2021-09-28 02:24 青柠i 阅读(282) 评论(0) 推荐(0)
摘要:问题: 在vue中,使用表单form,如下: <div id="app2"> <form action="" @submit.prevent> enter后,控制台输出(esc清空):<br> <input type="text" v-model="value" @keyup.enter="ente 阅读全文
posted @ 2021-09-18 17:43 青柠i 阅读(1959) 评论(0) 推荐(0)