VUE3

我的页面效果如下： Mine.vue 页面代码如下： 布局块代码： 1 <template> 2 <div class="mine"> 3 4 <div class="mine-top"> 5 <img src="/mine.png" /><br /> 6 <span class="mine-top ......

由于之前搜索其他modal框封装的文章时，发现大多数在使用时需要引入并注册组件，传入参数再写方法。每次引用时都要经过上述操作，觉得太麻烦了。后面通过一些资料摸索出vue3如何利用命令方式（即避免写组件标签）来弹出弹框，写下这篇文章，方便日后自己复习 调用及效果 先上使用方法及效果 代码 <templ ......

视频 8.生命周期 vue2.x的生命周期 vue3.0的生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition A ......

main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') router/inde ......

视频 3.watchEffect函数 watch的套路是：既要指明监视的属性，也要指明监视的回调。 watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 watchEffect有点像computed： 但computed注重的计算出来的值（回调函数的返回 ......

视频 #components ##Demo.vue <template> <h2>当前求和为：{{sum}}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为：{{msg}}</h2> <button @click="msg+='！' ......

上一篇使用的bootstrap-vue-next项目迭代很快，考虑还未发文档和正式版本(自己菜)改用原生bootstrap模板tabler项目。 tabler 安装运行 不想安装可直接打开tabler\demo目录下html文件浏览查看效果 #获取后目录下运行 npm install #需要先安装h ......

watch监视ref定义的数据视频 watch监视reactive定义的数据视频 2.watch函数 与Vue2.x中watch配置功能一致 两个小“坑”： 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。 监视reactive定义的响应 ......

本篇实现订单确认页面的功能，订单及订单明细表结构如下： 表名 字段 功能 order order_id (int) 订单编号 user_id (int) 用户编号 nickname (varchar) 昵称 mobile (varchar) 联系电话 address (varchar) 收货地址 t ......

Vue3 基于组合式 API 使异步获取的数据对象具有响应性 在 Vue 3 中，可以使用组合式 API 中的 ref 和 reactive 函数来使异步获取的数据具有响应性。 一、使用ref 首先，使用 ref 函数创建一个响应式的基本数据类型，例如字符串、数字或布尔值。然后，在异步获取数据的回调 ......

本篇显示购物车中的商品，购物车表结构如下，我们通过接口服务抓取登录用户的购物车信息。 表名 字段 功能 shoppingcart cart_id (int) 购物车编号 user_id (int) 用户编号 goods_id (int) 商品编号 goods_name (varchar) 商品名称 ......

视频 7.计算属性与监视 1.computed函数 与Vue2.x中computed配置功能一致 写法 import {computed} from 'vue' setup(){ ... //计算属性——简写 let fullName = computed(()=>{ return person.f ......

本篇实现在首页展示商品功能，表结构如下： 表名 字段 功能 goods goods_id (int) 商品编号 goods_name (varchar) 商品名称 photo (varchar) 商品图片 price (decimal) 价格 商品表 页面呈现效果如下： 第1步：在 api.js 中 ......

我们都知道,通常情况下我们使用 vue 大多都是用的 SFC(Signle File Component)单文件组件模式,即一个组件就是一个文件,但其实 Vue 也是支持使用 JSX 来编写组件的。这里不讨论 SFC 和 JSX 的好坏,这个仁者见仁智者见智。本篇文章旨在带领大家快速了解和使用 Vu ......

web-view是什么 web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些==常见或者奇怪问题解决方案==哦~ 为什么使用这种方式搞页面？有什么好处呢？ ......

使用 NPM: bash $ npm create vite@latest 使用 Yarn: bash $ yarn create vite 使用 PNPM: bash $ pnpm create vite附加的命令行选项# npm 6.x npm create vite@latest my-vue ......

在Vue3中，可以通过props将父组件的数据传递给子组件。具体步骤如下： 在父组件中定义要传递给子组件的数据，可以是data属性中的数据或者是计算属性computed中的数据。 在子组件中通过props属性声明接收父组件传递的数据。 在子组件中使用接收到的数据。 下面是一个示例： <templat ......

创建一个 Vue 应用 vue3快速上手 npm get registry #设置淘宝镜像 npm config set registry http://registry.npm.taobao.org #创建一个 Vue 应用 npm init vue@latest ✔ Project name: ......

Vue3 的状态管理主要是通过 Vuex 4 来实现。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 在Vue3的状态管理中，以下是各个属性的作用： state：存储应用程序中的状态数据。它 ......

在 Vue Router 中，可以为路由和路由组件注册全局的路由守卫，也可以在组件内部注册路由守卫。 组件内部的路由守卫有以下几种： beforeRouteEnter：在路由进入组件前被调用，但是在组件实例化之前被调用，因此在该守卫中无法访问组件实例的 this。 beforeRouteUpdate ......

视频 6.setup的两个注意点 setup执行的时机 在beforeCreate之前执行一次，this是undefined。 setup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 context：上下文对象 attrs: 值为对象，包含：组件外部传递过来，但 ......

众所周知，vue3因为用了Proxy来实现响应式，而Proxy是es6的特性，这个特性是无法shim的。 如果用本身的js写一个es6的js的虚拟机呢？有点像c语言的自举了哈，只要写出一个汇编的c语言编译器，后面就可以脱离汇编，用c本身来实现更多的功能。 当然速度肯定没办法保证了，跑肯定是可以跑的。 ......

视频 5.reactive对比ref 从定义数据角度对比： ref用来定义：基本类型数据。 reactive用来定义：对象（或数组）类型数据。 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。 从原理角度对比： ref通过Object.defineP ......

Proxy视频 Reflect视频 Vue3.0的响应式 实现原理: 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。 通过Reflect（反射）: 对源对象的属性进行操作。 MDN文档中描述的Proxy与Reflect： Proxy：https: ......

今天在项目开发中遇到一个 vue3 + Ts 的一个问题，项目运行没问题，但是就是代码就是报ts语法错误，如下： 原因：因为我们使用的是 ts 的语法，项目只识别 ts 后缀的文件，无法识别 .vue 文件，所以引入的时候会报错； tips：这里只是 ts 语法警告报错，实际并不影响我们项目的运行！ ......

1、子组建定义方法，并对外暴露 <script setup lang="ts"> import {computed, reactive, ref,defineExpose} from "vue"; /** * 定义方法 */ const initData = () => { console.info ......

导读： 使用vw和vh解决适配问题 vw：view width屏幕宽度，1vw等于屏幕宽度的百分之一 vh：view height屏幕高度，1vh等于屏幕高度的百分之一 使用插件postcss-px-to-viewport可以自动将px转换为vw/vh 安装 npm i postcss-px-to- ......

在 Vue.js 3.x 中，我们可以使用路由守卫来拦截路由的跳转，从而实现一些功能，例如：登录验证、页面权限控制等。 Vue.js 3.x 中的路由守卫和 Vue.js 2.x 中的基本相同，都包含了 beforeEach、beforeResolve 和 afterEach 等钩子函数。 下面是一 ......

在 Vue.js 3.x 中，我们可以使用 useRouter 和 useRoute 来获取当前路由对象和当前路由信息。 useRouter useRouter 可以用来获取当前路由对象。我们可以通过 router 对象调用一些路由操作方法，例如 push、replace、go 等。示例代码如下： ......

在 Vue.js 3.x 中，可以通过路由的 params 和 query 属性来传递参数。 通过 params 传递参数 我们可以在路由跳转时通过 params 传递参数。具体方法如下： // 在组件中跳转路由 import { defineComponent } from 'vue' impor ......