VUE
前端小码田
这个作者很懒,什么都没留下…
展开
-
前端实现树形表格搜索功能
前端实现树形表格搜索功能原创 2022-06-08 17:11:05 · 914 阅读 · 0 评论 -
前端实现打印
先下载插件print-jsnpm install print-js --save 然后在页面引入import printJS from 'print-js'具体使用<template> <div> <el-button round class="btn" @click="handlePrint(item)">打印</el-button> </div></template><s原创 2022-04-12 16:32:01 · 1002 阅读 · 0 评论 -
前端实现在浏览器下载图片
首先在项目中untils中增加一个工具函数,downloadPng.jsfunction downloadIamge(imgsrc, name) { // 下载图片地址和图片名 var image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { const canvas = document.createE原创 2022-04-12 14:48:01 · 631 阅读 · 0 评论 -
Vue3.0学习笔记
目录一、组合API二、reactive函数三、ref函数四、ref和reactive的区别:五、递归监听和非递归监听递归监听非递归监听应用场景六、toRaw七、markRaw八、ref、toRef、toRefs一、组合APIsetup函数是组合API的入口函数。setup函数执行时机是在beforeCreate和Created之间。在setup函数中,不能使用data和methods,为了避免出现错误,setup中的this为un...原创 2021-07-26 18:04:27 · 240 阅读 · 0 评论 -
vue中父子组件通信
父子组件之间进行通信的方式如下:父子通信:通过props向子组件传递数据子父通信:通过事件向父组件发送消息1.父组件向子组件传递消息props的值有两种方式:方式一:字符串数组,数组中的字符串就是传递时的名称。方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。// Parent.vue<template> <div class="parent"> <v-child :msg="message"></v-chi..原创 2020-11-16 11:25:12 · 196 阅读 · 1 评论 -
Vue程序运行过程
如果在开发中,使用template,就需要选择Runtime-Compiler如果在开发中,使用的是.vue文件夹开发,那么可以选择Runtime-onlyruntime-compiler:template -> ast ->render -> v-dom -> domruntime-only:render -> v-dom -> dom...原创 2020-11-18 16:24:55 · 256 阅读 · 0 评论 -
url中的hash和H5中的history
hash模式URL的hash也就是锚点(#), 本质上是改变window.location的href属性.我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新history模式history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.通过window.history来处理url history在H5之前有go(),back(),forword()三个API,后来增加pushState(),replaceState()...原创 2020-11-19 10:21:45 · 847 阅读 · 0 评论 -
Vue-Router详解
1.安装和使用vue-router步骤一:安装vue-router :npm install vue-router --save步骤二:在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 第一步:导入路由对象,并且调用 Vue.use(VueRouter)import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ...原创 2020-11-26 18:45:38 · 114 阅读 · 0 评论 -
v-model的使用以及原理
v-model的使用以及原理vue中的v-model主要是用于表单元素和数据的绑定。除了在input中使用,也可在textarea中使用。方法一:<div id="app"> <input type="text" v-model="message" /> <h2>{{message}}</h2></div><script src="./js/vue.js"></script><script&.原创 2020-11-13 17:07:22 · 455 阅读 · 0 评论 -
vue中的数组哪些方法是响应式的
vue中的数组哪些方法是响应式的,通过刷新改变DOM我们常用到的操作数组的方法都是响应式的,可以对数组进行相应的操作push()尾部插入DOM// push方法 this.letters.push('aaa') this.letters.push('aaaa', 'bbbb', 'cccc')pop() 尾部删除//pop(): 删除数组中的最后一个元素 this.letters.pop();shift()头部删除//shift(): 删除数组中..原创 2020-11-11 17:46:04 · 726 阅读 · 1 评论