随笔分类 - vue
摘要：下载插件 npm install -D unplugin-vue-components unplugin-auto-import 配置 vite.config.js 文件 import { defineConfig } from 'vite' import vue from '@vitejs/plu
阅读全文
摘要：使用ref属性获取DOM <script setup> import {reactive,} from 'vue' const arr = reactive([1,2,3,4,5,6,7,8]) const domList = reactive([]) const getLi = (li) => {
阅读全文
摘要：获取环境变量 import.meta.env 修改环境变量 修改 package.json 中的文件 "dev": "vite --mode development" .env 文件 项目根目录创建 .env.development 文件，该文件会在 development 模式下加载，文件内新增
阅读全文
摘要：下载 npm install vue-router@4 基本配置与使用 /src/router/index.js import {createRouter, createWebHashHistory} from 'vue-router' import Home from '../components
阅读全文
摘要：下载 npm install vuex@next --save 思想 vuex 是一个数据管理的仓库 vuex 中有5个核心的配置选项 state 、 getters 、 mutations 、 actions 、 modules state 选项用于存放数据 getters 选项用于存放一些对 s
阅读全文
摘要：Fragment <template> <h1>我是APP组件</h1> <p>没有根标签时 vue会自动再最外层添加一个 Fragment 组件</p> </template> <script> export default { setup() { return { } } } </script>
阅读全文
摘要：isRef 检查一个值是否由 ref 函数创建出来的 isReactive 检查一个对象是否是由 reactive 函数创建出来的 isReadonly 检查一个对象是否由 readonly 函数创建出来的 isProxy 检查一个对象是否是由 reactive 或者是 readonly 创建出来的
阅读全文
摘要：provide函数 用于祖先组件传递后代组件数据 接收两个参数：字符串名字，变量 inject函数 用于接收祖先组件传递的数据 接收一个参数： provide 函数的第一个字符串名字 <template> <div id="app"> <h1>我是APP组件 {{name}} {{price}}</
阅读全文
摘要：customRef 函数 使用 customRef 函数创建一个自定义的 ref ，并对其依赖项跟踪和更新触发进行显示控制 customRef 接收一个函数作为参数，这个函数接收两个函数作为参数 track (通知vue需要追踪后续内容的变化) 和 trigger (通知vue重新解析模板)。 <t
阅读全文
摘要：toRaw函数 <template> <div>当前求和为 {{sum}}</div> <div>{{name}} {{age}} {{job.j1.salary}}</div> <div> <button @click="name+='~'">改名</button> <button @click=
阅读全文
摘要：readonly函数 readonly 接收收一个对象或一个响应式对象 readonly 返回的对象的代理，该对象的属性是只读的(深层) <template> <div>当前求和为 {{sum}}</div> <div>{{name}} {{age}} {{job.j1.salary}}</div>
阅读全文
摘要：shallowReactive函数 只将对象的第一层属性变成响应式 <template> <div>姓名 {{name}}</div> <div>年龄 {{age}}</div> <div>工资 {{job.j1.salary}}</div> <div> <button @click="name+=
阅读全文
摘要：toRef <template> <div>姓名 {{name}}</div> <div>年龄 {{age}}</div> <div>工资 {{salary}}</div> <div> <button @click="name+='~'">修改姓名</button> <button @click="
阅读全文
摘要：什么是hook？ 是一个函数，把 setup 函数中使用的 Component API 抽离出来进行封装复用 <template> <div>{{sum}}</div> <button @click="sum++">自增</button> <div>坐标 {{point.x}} {{point.y}
阅读全文
摘要：vue3的生命周期钩子函数有2种写法 一种是写在配置项中 一种是写在 setup 函数内 写在配置项中的生命钩子函数 <template> <div>{{sum}}</div> <button @click="sum++">自增</button> </template> <script> impor
阅读全文
摘要：vue-cli 中配置代理服务器 项目根目录下新建 vue.config.js 文件 module.exports = { // 开启代理服务器 devServer: { proxy: "http://localhost:3000", // 前端请求 http://localhost:8080 会被
阅读全文
摘要：默认插槽 <template> <div> <h1>App</h1> <Son> <p>传递给默认插槽的内容</p> </Son> </div> </template> <script> import Son from '@/components/Son' export default { comp
阅读全文
摘要：安装 下载脚手架 npm install -g @vue/cli 创建项目 vue create vue3-test 项目根目录创建 vue.config.js 并进行配置 module.exports = { lintOnSave: false, // 关闭语法检查避免折磨 } 常用的 Compo
阅读全文
