随笔分类 - Vue
摘要：依赖版本 "vite": "^5.0.10" 在vite.config.js中写入以下 export default defineConfig({ plugins: [ vue(), ], // 添加以下配置去除打包后的代码中的console build: { minify: 'terser', t
阅读全文
摘要：使用的是vue3-count-to组件 安装: npm install vue3-count-to --save 全局注册: // main.js import countTo from 'vue3-count-to' app.use(countTo) 局部引入组件并使用 // xx.vue文件 <
阅读全文
摘要：一般而言, 在vue中引入图片会使用类似import slideImg1 from '@/assets/imgs/kenny-eliason-Ak5c5VTch5E-unsplash.jpg'这种方式, 但是当需要引入的图片数量众多的时候, 这么写就非常麻烦了. 参考vite+v3批量一次性引入本地
阅读全文
摘要：目录常规示例子组件: /components/testCom1.vue父组件: App.vue监听defineExpose返回的数据的变化实现子组件向父组件传递数据父组件中修改子组件defineExpose抛出的数据, 实现父组件向子组件回传数据 官网说明 defineExpose用于子组件向其父组
阅读全文
摘要：以以下代码为例： <div id="app"> <tabs></tabs> </div> tabs为vue实例下的组件 加载渲染过程中 app(beforeCreate)-->app(created)-->app(beforeMount)--> tabs(beforeCreate)-->tabs(c
阅读全文
摘要：出现这个错误的缘由是因为我在vue3中的computed中, 把computed的回调函数当做数据监听器处理程序, 在里面修改了ref定义的变量数据的值. const curArticle = computed(() => { if (curArticleList.value.length 0) {
阅读全文
摘要：## 中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件的问题 - 今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想
阅读全文
摘要：- 今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想当然地使用了input事件用于触发输入事件, 但是被测试出bug: 当输入法是中文时, 在选字
阅读全文
摘要：data: { datas: { a: 77, b: 86 } } 使用deep:true深层次监听 'datas':{ handler:function(newVal){ console.log(this.datas); }, deep:true } 监听某一个具体的属性 'datas.a':{
阅读全文
摘要：以resize事件为例，要获取窗口变化时的窗口大小：在created钩子函数中为window对象添加事件处理程序 var app = new Vue({ el: '#app', data: { winWidth: { type: Number }, winHeight: { type: Number
阅读全文
摘要：##下载 通过git命令git clone https://github.com/vuejs/vue-devtools从远程库下载vue-devtools到本地 下载后会有一个vue-devtools文件夹 ##进入该文件夹 cd ./vue-devtools/ ##切换到master分支 下载后会
阅读全文
摘要：Vue中文文档_按键修饰符 ##常用的按键码的别名 .enter .tab .delete .esc .space .up .down .left .right 有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。 ##自
阅读全文
摘要：使用单独的事件中心管理组件间的通信 var eventHub=new Vue() 使用eventHub.$on和eventHub.$off来监听和关闭事件监听,使用eventHub.$emit来触发事件. <div id="app"> <com1></com1> <com2></com2> <hr>
阅读全文
摘要：在html模板里,子组件通过事件绑定自定义事件来调用父组件的方法. 在子组件模板中,子组件需通过 this.$emit(自定义事件,传递的数据) 来触发自定义事件并向父组件传值. <div id="app"> <p>{{msg1}}</p> <p>{{msg2}}</p> <com1 @func="
阅读全文
摘要：在子组件的props属性(它是一个数组)中添加一个自定义变量,并在子组件中调用这个变量. 在html模板中添加子组件,通过属性绑定该props值到vm实例中的数据,从而达到父组件向子组件传值的效果. <div id="app"> <son-com :data-from-father="msg"></
阅读全文
摘要：对html文档内的标签添加ref属性,其值为自定义命名. 在vue实例vm中通过调用 this.$refs.自定义命名 来获取相关的DOM元素. 对html文档中的组件添加该属性后,可以获取组件的data或调用组件的methods. <div id="app"> <input type="butto
阅读全文
摘要：v model指令对数据进行双向绑定 或者用eval()函数偷个懒 eval()函数能不用就不用
阅读全文
摘要：v for循环普通数组 v for循环对象数组 v for循环对象 v for迭代数字
阅读全文
摘要：[Toc] 如何注册指令 如何注册一个全局自定义指令 //注册一个全局自定义指令 Vue.directive("focus",{ //当被绑定的元素插入到DOM中时： inserted:function(el){ //聚焦元素 el.focus() } }) directives:{ focus:{
阅读全文
摘要：##为了防止模板复用 在vue中，为了提高渲染效率会尽可能复用模板。 例如: <div id="app"> <template> <div> <label for="" v-if="type 'name'"> <span>name:</span><input type="text" name=""
阅读全文