文章目录 computed简介 computed简介 使用场景：模版中有逻辑代码，可以使用计算属性进行维护。同时，计算属性也有缓存效果，可以监听数值是否发生改变，改变了，才能出发重新计算。这也是为什么有些逻辑代码使用计算属性，有些使用普通方法 代码展示: <template> <div class="itemStyle"> <div> 名称:<span> {{handleTestComputed}} <...

创建第一个vue3的应用 之前看书学习vue,书籍对应的版本是vue2,今天群里看小伙伴聊天，觉得他们说得对 ，反正是从零开始学，而且vue2都不维护了，那为什么不直接学习vue3呢，于是乎，又开启了从0学vue3之路。 参考教程：https://cn.vuejs.org/guide/quick-start.html 安装nodejs环境之后，执行 npm create vue@latest 命令就可以...

目录 一、vite简介 二、混淆工具 三、使用方法 1. 安装插件： 2. 配置插件： 3. 运行构建： 4. 自定义混淆选项： 5. 排除文件： 下面是Vue 3+Vite开发的项目进行加密打包的方法。 一、vite简介 Vite 是一个由 Evan You 创造的现代化、轻量级的前端构建工具。它旨在提供更快的开发和构建体验，并且具有即时冷启动的特性。Vite 主要用于开发基于 Vue.js 框架的前...

<template> <!-- 通过class绑定开启或关闭某个CSS --> <view class="box" :class="{box2:true}">box1</view> <view class="box" :class="{box2:isActive}">box2</view> <!-- 使用三元表达式实现开启关闭CSS的效果 --> <view class="box" :class="tr...

文章目录 toRefs简介toRef简介错误案例 toRefs简介 toRefs对对象内多个值转换成响应式数据 代码展示 let testData = reactive({ aa:"111", bb:"222", cc:"333" }) //转为响应式数据 let {aa,bb,cc} = toRefs(testData) console.log(aa); console.log(bb); consol...

文章目录 情况一:监听ref定义的基本类型数据情况二:监听ref定义的对象类型数据情况三:监听reactive定义的对象类型数据情况四:监听ref或reactive定义的对象类型数据中某个属性情况五:监听上述多个数据 #watch使用结构watch(被监视的数据,监视的回调,配置对象(deep,immediate等...)) let xxx = ref("1111") 或者 reactive({a:1...

<template> <!-- v-if如果是false，则不会出现在DOM中，不会被渲染； v-show如果为false，则会出现在DOM中，并加载资源（如图片），只是CSS隐藏了。 --> <view v-if="day===1">星期1</view> <view v-else-if="day===2">星期2</view> <view v-else-if="day===3">星期3</view> ...

效果： 代码： <template><div> <div v-move class="box"> <label class="move">拽我</label> </div></div></template><script setup lang="ts"> import { ref, Directive } from 'vue'; const vMove: Directive = { mounte...

文章目录 ref简介 ref简介 vue3是使用proxy代理，让数据变成响应式数据。反观，vue2是使用数据劫持，使数据达到响应式。作用: 定义响应式变量用法: let xx = ref(初始值)返回值: 一个RefImpl的实例对象，简称ref对象，ref对象的value属性是响应式的特别注意: js中操作数据，需要xxx.value,但是在模版中不需要.value。let test = ref('...

🌟 Vue2与Vue3 的区别 🔮 双向数据绑定：Object.defineProperty vs Proxy Vue2通过Object.defineProperty实现了经典的双向数据绑定机制💡： // Vue2const vm = new Vue({ data: { message: 'Hello Vue2!' }}); console.log(vm.$data.message); // 输出 ...