哈哈hyc的博客

一、setup函数的特性以及作用　　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多　　Vue3 的一大特性函数 ---- setup　　1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件.

一、vue监听数组vue实际上可以监听数组变化，比如data () { return { watchArr: [], };},watchArr (newVal) { console.log('监听：' + newVal);},created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000);},在比如使用splice(0,2,3)从数组下标0删除两个元素，并在下标0插入一个元

基于vuex的任务管理的小demo，适合学习vuex，充分运用了vuex程序demo页面使用到的vuex方法总概况大家可以自己看看，探讨一下，附git地址：https://github.com/erdfty/vuex-todos

路由跳转的淡入淡出在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性<transition name="fade" mode="in-out"><router-view ></router-view></.

1.directive.jsimport Vue from "vue";// 提交验证Vue.directive("clickOutside", { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false; }

ant-design-vue开源了一段时间后，收到了一些反馈，尤其是Form组件上线后，很多用户对JSX的使用感到迷惑和不习惯，为此专门介绍下Vue JSX的使用姿势及注意事项。Form组件的自动收集校验功能需要在JSX下使用，当然如果不需要自动收集校验，你依然可以使用templateVue 推荐在绝大多数情况下使用template来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，就需要使用render函数，它比 template 更接近编译器...

目标：JS 将有父子关系的平行数组转换成树形数据方法：双重遍历，一次遍历parentId,一次遍历id == parendId;该方法应该能很容易被想到，实现起来也一步一步可以摸索出来；const oldData = [{id:1,name:'boss',parentId:0},{id:2,name:'lily',parentId:1},{id:3,name:'jack',parentId:1},{id:4,name:'john',parentId:2},...

方法1：用计时器改变按钮可点击状态<template> <div class="test"> <button @click="btnClick">button</button> </div></template><script> export default { name: 'HelloWorld', data() { return { is_...

使用vue阻止子级元素的click事件冒泡，很简单，用stop<div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span></div>这样点击div里面的按钮1，就不会触发div绑定时间test1()方法...

将HTML页面转化为PDF下载是前端经常会遇到的需求，下面就列举两种方式进行实现。以下两种方式默认都是在Vue项目环境下，其他框架项目自行灵活运用。方式一：使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下：1,下载插件模块npm install html2canvas jspdf --save2,定义功能实现方法在项目工具方法存放文件夹utils中创.

表单关键代码<FormItem prop="province" label="省份"> <Select v-model="formValidate.province" placeholder="请选择省份" @on-change="changeProvince"> <Option v-for="(item,index) in provin...

逻辑介绍：　　1、表单获取焦点时，显示搜索建议框　　2、输入内容时，请求后台接口，并将返回的数据展示在搜索建议框内　　3、表单获取焦点情况下，按键盘上下箭头可实现搜索列表项的切换，按回车可以选择当前激活的选项并获取当前选项的数据，然后你可以用数据做其他事了<template> <div class="container"> <div clas...

开发中遇到的一个简单问题 却花了我很长时间//在一个js文件中导出fetch请求方法import fetch from 'utils/fetch';export function getCompanyList() { return fetch({ url: '/wx/company/list', method: 'get' })}//在vue的s...

在我们制作移动端折叠面板的时候，可以按照ref的方式获取高度来调节，但是我们在写小程序的时候，要按照小程序的api来获取修改高度，以下为完整的折叠面板代码，可以实现自动识别高度，是否折叠v-for里面写class="changeBox" :style="{'height':flag[index] ? heightArr[index] < staticHeight ? heightA...

v-for 里面写 :class ='{active:flag[index]} @click="showContent(index)"data:{ flag:[]}showContent:function(index){ var f=this.flag[index] = !this.flag[index] this.$set(this.flag,index,f);...

初学者vue可以制作一个简单的跑马灯效果的项目，效果如上图，代码如下图，大家可以自己尝试：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script

实现效果如下图所示：添加按钮直接添加删除按钮可以删除其中的知识点有：bootstrap运用，v-model，@keyup，@click，全局过滤器，私有过滤器，自定义全局按键修饰符，Vue.directive() 定义全局指令，自定义一个颜色的指令等一些知识点，大家可以参考参考，代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="e...

在页面中加上如下代码： <!-- 下面这段Js是为了解决移动端点击300ms延迟问题 --> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('...

在localhost环境下跑项目时，接口地址是 http://xxxx.com/save/index 这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，我们进入 config/index.js 代码下如下配置即可。dev: { // 静态资源文件夹 assetsSubDirectory: 'static', // 发布路径 assetsPu...

先来看看vue官网对vue生命周期的介绍Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始...

vue使用钩子函数制作简单动画效果，代码如下，仅供参考交流：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...