wangatong的博客

input保留数据

字体

PC端Element Plus - 饿了么 UI 组件库 https://element-plus.org/zh-CN/Ant Design of Vue - 阿里 UI 组件库 https://github.com/vueComponent/ant-design-vue/TDesign Vue - 腾讯 UI 组件库 https://tdesign.tencent.com/Naive-UI - 图森未来 UI 组件库 https://w

<country-code-selector :countryCode.sync="value"></country-code-selector> import countryCodeSelector from 'vue-country-diacode-selector' components: { countryCodeSelector }

修改源地址位淘宝镜像npm config set registry http://registry.npm.taobao.org/

//阻止显示生产模式的消息Vue.config.productionTip = false如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at https://vuejs.org/guide/deployment.html意思是：您正在开发

/deep/是vue2.x中实现样式穿透的方案，在vue3.x中使用:deep()替代/deep/:deep(.title){ color:pink}

import {mixinstest} from './mixins/index' export default { name: 'App', mixins:[mixinstest], components: { HelloWorld }}index.jsexport const mixinstest = { data(){ return { testMix: '混入对象的data' } }, created(){

安装npm install vue-qr --savemain.jsimport VueQr from 'vue-qr'Vue.use(VueQr)template<vue-qr :logoSrc="src" :text="url" :size="200"></vue-qr>data(){ return{ src:require('./assets/logo.png'), url:'https://www.baidu.com'

<template> <div id="app"> <div class="tab"> <ul> <li @click="onActive(0)" :class="index==0?'active':''"> 版本1 </li> <li @click="onActive(1)" :class="index==1?'active':''"&g

<div class="gotop" v-show="gotop" @click="toTop">Top</div> data() { return { gotop:false } }mounted() { window.addEventListener("scroll", this.handleScroll, true);},handleScroll() { let scrolltop = document.do

<template> <div id="app"> <div class="list" v-for="(data,index) in datas" :key="index"> {{data}} </div> <img src="./assets/loading.gif" /> </div></template><script>export default {

Object.is(变量，变量)判断是否相等，相当===判断值的类型是否相等，还要判断引用地址是否相等Object.assign()用于对象的合并Object.assign(this._data, res.data)Object.keys()、Object.values()、Object.entries()Object.keys()方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名数组。Object.values()方法返回一个数组，成员是参.

安装echartscnpm install echarts -S或者按版本安装npm install echarts@4.8.0 --save在main.jsimport echarts from 'echarts'Vue.prototype.$echarts = echarts在.vue上js部分created(){ let that = this setTimeout(function () { that.drawLine() }, 1000)

class DateFun { constructor() { this.date = new Date() this.nowDayOfWeek = this.date.getDay() // 今天本周的第几天 this.nowDay = this.date.getDate() // 当前日 this.nowMonth = this.date.getMonth() // 当前月 this.nowYear = this.date.getYear() // 当前年 thi

vue3.0npm install swiper vue-awesome-swiper --savevue2.0npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --savemain.js中添加import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)import 'swiper/css/swiper.css'

生成package.json文件npm init修改package.json文件{ "name": "name", "version": "1.0.1", "description": "", "main": "dist/name.min.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --ho

// 数组去重 let arr = [1, 1, 2, 3]; let unique = [... new Set(arr)]; let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]);// 并集 let union = [...new Set([...a, ...b])];// 交集 let intersect = [...new Set([...a].filter(x => b.has(x)))]

安装： npm install -g @vue/clivue create my-projectnpm install -g cnpm --registry=https://registry.npm.taobao.org

.trim去掉字符串首尾空格、.lazy当离开焦点后触发change事件、.number可以将输入转换成Number类型，否则虽然输入的是数字，但它的类型其实是String

父组件调用 <child my-message="hello!"></child>子组件调用 props: ['myMessage'] props: { myMessage:{ type: Number, required: true } } fooMessage: { type: Number, default:

1.子组件调用父组件方法和变量 this.$parent.name this.$parent.getName() this.$emit('closeMain',flag);2.父组件调用子组件方法和变量 this.$refs.mychild.parentHandleclick("嘿嘿嘿"); this.$children[0].parentHandleclick("嘿嘿嘿");父组件传值给子组件父组件调用 <child :inputName="name">子组件调用

根据变量currentCom切换组件调用，当切换组件时不需要重新渲染可以调用

{{name | addStr}}filters:{addStr(name){return name + ‘111’}}

{{nameNew}}-{{name}}

1.普通监听watch:{username (newVal) {console.log(newVal)}}2.第一次就监听watch:{username:{handler (newVal) {console.log(111,newVal)},immediate:true}}对象，数组监听data(){return{info:{username:‘11’,age:‘22’}}},watch:{info:{handler (newVal) {console.

Object.is(value1, value2);Object.assign()用于对象的合并Object.keys(),Object.values(),Object.entries()

parseInt(this.$route.query.union_id)

<input type=“text” @click=“abc($event,1)” value=“123” /><input type=“text” @click=“abc” value=“123” />methods: {abc(event,n) {console.log(event.target.value,n);},abc(e) {console.log(e.target.value,n);}}

以上三种的效果均是在父组件改变子组件的样式。　　一些预处理器（例如Sass）可能无法正确解析>>>。在这些情况下，可以改用/deep/或::v-deep组合器，两者都是它的别名，并且和>>>工作原理完全相同。...

forEach遍历，map通过函数返回新数组（数组长度不会少），filter过滤返回新数组（数组长度会变少），some有一个为true,就返回true,every全部为true,才返回truereduce 返回求和或者求平均数some、every返回true、false。map、filter返回一个新数组。reduce让数组的前后两项进行某种计算，返回最终操作的结果。forEach 无返回值。find函数查找到第一个符合条件的元素，则立即返回...

let down_url = new Promise((resolve, reject) => {getConfig(‘url’).then(resp => {resolve(resp)})}).catch(err => {reject(err)})let keys = new Promise((resolve, reject) => {getConfig(‘key’).then(resp => {resolve(resp)})}).catch(err =

.webp {animation: myMove 2s linear infinite;animation-fill-mode: forwards;}@keyframes myMove {0% {transform: translateY(0);}100% {transform: translateY(-30px);}}

vue2.0 vue-cli安装npm install vue-cli -g查看版本vue -V项目创建vue init webpack project-namewebpack.config.js（自动添加）vue3.0 脚手架安装npm install @vue/cli -g项目创建vue create project-name(工程名要全部小写)//图形化界面vue ui手动添加：vue.config.js卸载脚手架npm uninstall vue-cl