![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
某绿
这个作者很懒,什么都没留下…
展开
-
vue2中 组件之间的通信
1、prors 和 this.$emit ( 父子之间的传参 )// 组件A<template> <div id="app"> <HelloWorld :data1="data1" @addData="addData" /> </div></template>// 组件B<template> <div class="hello"> <h1>{{data1}}</h1&原创 2022-03-18 14:44:12 · 792 阅读 · 0 评论 -
vue尺寸的自适应 大屏自适应
我在一些大屏的项目中,碰见自己电脑写好的样式,但是在大屏中出现了变形。后来在经过百度,可以通过postcss-px2rem 插件,实现项目的自适应使用:** 1、安装包**npm install postcss-px2rem px2rem-loader --save2、文件创建在src目录下创建一个util的工具文件夹,然后创建一个js文件,这里我叫pxtorem.js,文件中写上一下代码// rem等比适配配置文件// 基准大小const baseSize = 16// 设置 rem 函原创 2021-08-03 16:12:45 · 6433 阅读 · 9 评论 -
vue3学习 provide 与 inject实现祖先与后代组件之间的通信
provide(提供) 和 inject(获取)可以实现祖先与后代( 跨级之间通讯 )组件之间的通信祖先组件中:setup() { let person = reactive({ name:'green', age:10 }) provide('msg',person) // 向后代提供数据 return {person} }后代组件中: setup () { let person = inject('msg') // 通过inj原创 2021-08-02 15:49:06 · 433 阅读 · 0 评论 -
vue3 学习 customRef 函数
customRef 函数:创建一个自定义的ref,并对其依赖跟踪和更新触发进行显式控制(可以用于实现防抖)基本使用<template> <div>这myRef渲染的值{{obj}}</div> <button @click='obj++'>改变myRef渲染的值</button></template>import {customRef} from 'vue'export default { setup () {原创 2021-08-02 15:22:42 · 194 阅读 · 0 评论 -
vue3学习 watch、watchEffect的使用
使用方法watch(person,(newValue,oldValue)=>{// person为你要监听的数据})情况一、监视ref定义的一个响应式数据情况二、监听ref所定义的多个响应式数据情况三、监听reatcive所定义的一个响应式数据情况四、监听reactive所定义的一个响应式数据中的某一个属性...原创 2021-07-29 16:34:11 · 396 阅读 · 0 评论 -
Vue (element ui库、Less、axios 安装及引用)
Vue 学习element ui库导入1.安装npm i element-ui -S2.引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Less环境的安装如果项目中的css样式,需要引用less语法的话,那么对应就需要安装两个模块,分别为less,less-loadernpm install less less-loader --原创 2021-02-01 15:34:43 · 301 阅读 · 0 评论 -
vue3学习 computed
computed 函数和vue2中的计算属性的用法基本差不多 <div> 商品单价:{{price}}<br> 商品数量:{{number}}<br> 商品总价:{{total}} <button @click="number++">点击增加商品数量</button> </div> setup () { const price = 8 const number = ref(1原创 2021-07-28 11:11:54 · 68 阅读 · 0 评论 -
vue3学习 ref / reactive 让数据变成响应式数据
ref 函数 和 reactive 函数这两个函数可以让一个原始数据(普通数据)变成响应式数据,但他们实现的原理方式不一样。在vue3中你可以在setup中定义数据,但你定义的都是一个普通数据,当你对它进行修改时,它是视图没有发送变化,但实际上数据已经发生了变化。而ref和reactive就可以帮助你,将数据变成响应式数据<div>我叫{{uName}}</div><button @click="changeName">我要改名了</button>s原创 2021-07-28 11:10:07 · 4067 阅读 · 0 评论 -
vue3学习 setup,props,context
setup 函数1、执行时机在 beforeCreate 和 created这两个钩子函数之前,是最早执行的,在程序运行中,setup函数只执行一次2、在setup中没有this , 打印返回undefinedvue3里的生命周期:① 可以和vue2里一样选项式写法,和setup平级,beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted② 可以在setup里原创 2021-07-28 11:08:49 · 8149 阅读 · 0 评论