随笔分类 - Vue
摘要：兼容微信内跳转 和 h5跳转 第一步 在index.html 里面引入 SKD <!-- 公众号 JSSDK --> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 云开发 Web SDK -->
阅读全文
摘要：### 1. v-model 和v-model:value为什么要的需要加: + v-model vue3中使用了`modelValue`来代替了`value`, 所以子组件触发emit的写法为 `emit('update:modelValue','xxx')` + v-model:value 为什
阅读全文
摘要：v-model原理 <input type="text" v-model="age"> <input type="text" v-bind="age" v-on:input="age = $event.target.value"> v-model的原理就是: v-bind 和 v-on的语法糖 vu
阅读全文
摘要：安装 npm install pinia --save 使用 创建store文件夹 建 src/store 目录并在其下面创建 index.ts，导出 store // src/store/index.ts import { createPinia } from 'pinia' const stor
阅读全文
摘要：vue路由去掉#号 刷新出现404的解决办法 配置nginx: 为什么本地不会这种问题: 因为vue-cli使用了: historyApiFallback 而vue-cli是基于webpack实现的: webpack源码里默认开启了 historyApiFallback historyApiFall
阅读全文
摘要：一.在高德官网申请key 二.在public/index.html引入: <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key= 你的key"></script> 三.创建一个容器: 四.在methods
阅读全文
摘要：父组件 <template> <div id="app"> <h-input v-model="name" /> </div> </template> <script> import hInput from "./views/demo/index"; export default { name: "
阅读全文
摘要：state：vuex的基本数据，用来存储变量geeter：从基本数据(state)派生的数据，相当于state的计算属性mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)action：提交的是mutation, 而不是直接更新数据, action可以包含异步操作mod
阅读全文
摘要：// uniapp安装依赖包npm i vue-i18n –S在根目录创建一个 lang的文件夹,并且在lang文件夹内创建cn.js 和 en.js打开 main.js, 注入Vue实例中import Vue from 'vue' import App from './App' import Vu
阅读全文
摘要：双向数据绑定是建立在单项数据绑定(model view)的基础之上的双向数据绑定的实现流程:a: 在解析v-model指令时 , 给当前元素添加input监听b: 当input的 value发生改变时, 将最新的值赋值给当前表达式对应的data属性v-model:绑定model:function(n
阅读全文
摘要：得到指令名 和指令值(表达式) text/html/class msg/myClass从 data 中根据表达是得到对应的值根据指令名确定需要操作元素节点的什么属性a: v-text text-textContent 属性b: v-html—innerHTML 属性c: v-class class
阅读全文
摘要：从指令名中取出时间名根据指令的值(表达式)从methods 中得到对应的事件处理函数对象给当前元素节点绑定事件名 和 回调函数的 dom事件监听指令解析完后, 移除次指令属性
阅读全文
摘要：根据正则对象得到匹配出的表达式字符串; 子匹配/RegExp.$1 name从data中取出 表达式对应的属性值将属性值设置为文本节点的textContent
阅读全文
摘要：数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写)vue数据代理: 通过vm对象来代理data对象中所有属性的操作好处:更方便的操作data中的数据基本实现流程:a: 通过Object.defineProperty()给 vm 添加 与 data 对象的属性对应的属性描述符b: 所有添加
阅读全文
摘要：非父子间传值事件总线:// 原理上就是建立一个 公共的js文件, 专门来传递消息 // bus.js import Vue from 'vue' export default new Vue // 在需要传递消息的地方引入 import bus from './bus.js' // 传递消息 bus
阅读全文
摘要：基础写法, 没有懒加载import Vue from 'vue' import Router from 'vue-router' import Comment from '@/assets/view/comment.vue' Vue.use(Router) export default new Ro
阅读全文
摘要：获取本页面的, dom元素节点: ref除了可以获取本页面的dom元素，还可以拿到 子组件中 的data 和 去调用子组件中的方法获取子组件中的 data子组件: 父组件: 父组件调用子组件中的方法子组件: 父组件: 子组件调用 父组件 中的 方法实际上是 子组件 触发一个自定义事件, 然后 父组件
阅读全文
摘要：需求 父组件点击 回复按钮; 子组件input 显示聚焦效果给子组件 绑定 一个 ref 给子组件绑定一个事件: 拿到 input 标签 在 父组件中 引用的 子组件 身上 也 添加一个 ref 给 父组件 绑定一个点击 事件 ,, 然后通过 $refs 直接调用 子组件中的 事件 父组件中的 点击
阅读全文
