随笔分类 - Vue3
摘要：自定义指令分为两个字情景1.在某一个vue文件里，而不是全局2.在main.ts文件里注册全局的自定义指令vue文件 <script setup> import {ref,onMounted} from 'vue' let n =ref(1) const vFocus={ mounted:(elem
阅读全文
摘要：组合式函数（封装/复用）实例：获取鼠标点击的位置坐标 import {reactive,onBeforeUnmount,onMounted } from 'vue' const getMousePoint = () => { let point = reactive({ x: 0, y: 0, })
阅读全文
摘要：provide与inject作用：实现祖孙组件间的通信实例：父组件 <script setup name="Parent"> import Child from './components/Child.vue' import {reactive,provide} from 'vue' let car
阅读全文
摘要：1.默认插槽父组件 <script setup> import Gategory from './components/Category.vue' import {ref} from 'vue' let foods=ref(['火锅','烧烤','小龙虾']) let games=ref(['LOL
阅读全文
摘要：动画效果 <script setup> import {ref} from 'vue' let name=ref('test') let isShow=ref(true) </script> <template> <button @click="isShow=!isShow">显示/隐藏</butt
阅读全文
摘要：绑定事件（子组件向父组件传参）方式一：School子组件通过props传递方式二：Student子组件通过自定义事件传递父组件代码 <script setup> import Student from './components/Student.vue' import School from './
阅读全文
摘要：实例App.vue文件 <script setup> import Student from './components/Student.vue' import {ref} from 'vue' let address=ref('上海') </script> <template> <div> <St
阅读全文
摘要：pinia的优点1.vue3、vue2、都支持2.抛弃了Mutations的操作，只有state、getters和actions3.不需要嵌套模块，符合vue3的Composition api4.完整的typescript支持5.代码更加简洁 挂载pinia在main.ts import { cre
阅读全文
摘要：路由 1.路由就是一组key-value的对应关系（key为路径，value可能是function或component） 2.多个路由，需要经过路由器管理 SPA(single page web application)应用 单页面Web应用：整个页面只有一个完整的页面 点击页面中的导航链接不会刷新
阅读全文
摘要：收集表单数据： 若<input type="text">，则v-model收集的是value值，用户输入的就是value值 若<input type="radio">，则v-model收集的是value值，且要给标签配置value值 若<input type="checkbox"> 没有配置inpu
阅读全文
摘要：v-for指令1.用于展示列表数据2.语法：v-for="(item,index) in xxx" :key="yyy"3.可遍历：数组、对象、字符串、指定次数 <template> <!-- 遍历数组 --> <h2>列表渲染</h2> <ul> <li v-for="p in persons"
阅读全文
摘要：1.虚拟dom中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，vue会根据“新数据”生成“新的虚拟DOM” 随后vue进行“新的虚拟DOM”和“旧的虚拟DOM”的差异进行比较，比较规则如下 2.对比规则 （1）旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容没变
阅读全文
摘要：class样式和style样式的绑定1.class样式写法：class="xxx" xxx可以是字符串、对象、数组 字符串写法适用于：类名不确定，要动态获取 对象写法适用于：要绑定多个样式，个数不确定、名字也不确定 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用 2.style
阅读全文
摘要：1.组合式API和声明式API的区别，组合式API的优点 2.Vue3的响应式原理通过Proxy（代理）：拦截对象中任意属性的变化：包括：属性值的读写、属性的添加、属性的删除等。通过reflect（反射）：对被代理对象的属性进行操作 let person={ name:'张三', age:18 }
阅读全文
摘要：一：事件处理解决点1.绑定事件2.事件传参3.保证事件的event不丢 <template> <div > 欢迎来到上海 </div> <button @click="showInfo">点击提示信息</button> <button @click="showInfo1(66)">点击提示信息</b
阅读全文
摘要：1.当被监视的属性变化时，回调函数自动调用，进行相关操作2.监视的属性必须存在，才能进行监视3.自定义属性和计算属性都可以被监听深度监视：（1）vue中的watch默认不检测对象内部值的变化（一层）（2）配置deep：true可以检测对象内部值的改变（二层）备注：（1）vue自身可以检测内部值的改变
阅读全文
摘要：get作用：当有人都去fullName时，get就会被调用，且返回的值作为fullNameget调用时机：1.初次读取fullName时，2.所依赖的数据会发生变化set调用时机：当fullName被修改时 <template> <div> <h1>一个人的信息</h1> 姓：<input type
阅读全文
