weixin_46372074的博客

适用于父子, 祖孙①父:②子:

①父组件1.在父组件中的内定义2.用ref绑定子组件(ref相当id)②子组件内③父组件中使用子组件的数据这个是个人尝试过.使用子组件方法,还没尝试.

vue3新组件1.fragment2.teleport使用（eg：弹窗）Suspense内置标签引入组件的两种方式其他1.fragment说明：vue2模板中必须要有一个根标签，vue3中却不用，就是用这个Fragment标签作为根标签，包裹住我们写的内容。渲染的时候又将其去掉。小结：2.teleport使用（eg：弹窗）<template> <div> <button @click="isShow = true">显示弹窗</butt

祖孙组件通信，响应式数据判断provide 和 inject(祖先)provide提供数据, (后代)inject注入使用响应式数据判断组合式api的优势provide 和 inject(祖先)provide提供数据, (后代)inject注入使用响应式数据判断返回值是true，或false。组合式api的优势说明:vue2采用的是OptionsAPI，数据多的情况下就很乱，进行修改时，要上上下下找来找去。vue3采用组合式API。同一个功能的数据、方法、计算属性都在一个地方。最后

toRef处理一个对象的一个属性toRef存在引用关系, 改变时会改变源数据格式toRef(对象,'对象的某个属性')返回该对象这个属性的引用toRefs处理一个对象的多个属性返回一个对象(包含对象的所有属性)实例 – toRefsetup内的返回值 setup() { let person = reactive({ name: "李四", age: 18, job: { salary: 10, },

vue3生命周期、和hookvue3生命周期图生命钩子(与name、setup配置项同级)组合api形式写法hook位置：内容：使用:总结vue3生命周期图生命钩子(与name、setup配置项同级) beforeCreate() { console.log("-----beforeCreate-----"); }, created() { console.log("-----created-----"); }, beforeMount() { consol

vue3监视属性watchwatchwatch的三个参数一.监视ref数据二.监视reactive对象数据监视对象的全部属性监视对象的某个属性监视对象的某些属性特殊情况,监视对象的某个对象属性总结watchsetup内可以写多个watch函数, 分别监视多个不同的数据.可以将多个监视数据放入数组watch的三个参数一.监视ref数据第一个: 监视对象(ref,多个ref数据)第二个: 回调函数// 组合api--watch,监视一个ref数据watch(sum, (newValue, ol

计算属性computed

setupsetupsetup总结ref函数setupsetup是个函数, 包含数据、方法等，是组合api的“舞台”。setup返回值：1.对象，其中的属性、方法都可以在模板中直接使用2.渲染含数（了解就好）export default { name: "App", components: {}, setup() { // 非响应式变量 let name = "欧西里斯"; let age = 18; function sayHello() {

步入vue3vue3的进步创建vue3工程1脚手架2vitevite创建vue3的进步创建vue3工程1脚手架2vitevite创建

@toc配置路由后,网页路径中出现的/#是hash从#开始到结束都是路劲里面的hash值, 这个hash值不会随http请求发送给服务器这是前端人员自己在玩, 不会影响到后端路由器有两种工作模式: hash(默认), history(有历史记录)history模式路由const router = new VueRouter({ // mode: 'history', routes: [ {} ]});hash兼容性好√√√√√√√√√connect-histo

路由守卫前置路由守卫 -- 设置权限meta为路由添加检验权限后置路由守卫独享路由守卫 -- beforeEnter组件内 路由守卫总结前置路由守卫 – 设置权限切换前执行,next()执行切换import VueRouter from 'vue-router';const router = new VueRouter({ routes: [ { path: '/about', component: MyAbout },... ]});// 全

不用router-link的路由导航、缓存路由组件使用`this.$router`跳转路由push / replaceforward、back与go总结缓存路由组件总结:路由仅有的生命周期钩子总结route只是一个规则router是路由器有绝对的指挥权使用this.$router跳转路由push / replace在方法中, methods: { pushShow(message) { // 方式一: **push跳转路由**, 需要制定个命名路由,以及参数对象

路由

路由前提路由简介vue-router前提生活中的路由是为了上网vue中的路由是SPA(单页面应用),根据路由进行局部更新(比如导航使用路由选择展示什么内容)路由简介vue-routervue-router是一个插件库, 专门实现SPA应用局部更新.router检测路径变化...

vuex插件的模块化编码根据组件模块化 --- vuex的modules步骤 -- 此处模块名(a,b)与配置名不同在组件中使用(vuex中的4个map同理)mapState用法一, 映射模块mapState用法二, 要求: 每个对应组件的配置中都写了`命名空间为真`( namespaced: true, )根据组件模块化 — vuex的modules步骤 – 此处模块名(a,b)与配置名不同1.在main.js中为每个组件分别配置一个有vuex实例相同内容的对象2.组件的配置对象放入名为sto

vuex 四个mapvuex 四个mapmapState与mapGetter ---多组件数据共享mapState映射状态(数据) -- 用计算属性映射共享数据state数据mapState使用1 -- 对象写法mapState使用2 -- 数组写法√mapGetters映射 加工后的数据(Getters)mapMutations与mapActions位与methods内mapMutations 事件回调函数要记得传参对象写法数组写法 (回调函数与mutations内函数同名)mapActionsmap

vuex插件vuex插件实现多组件共享数据的方法方法一:全局事件中线(乱)方法二:vuex实现多数组共享数据√vuex插件使用条件实现多组件共享数据的方法方法一:全局事件中线(乱)方法二:vuex实现多数组共享数据√...

vue插槽一.默认插槽二.具名插槽 (多个插槽)vue3已弃用该方法vue3支持\vue3的作用域插槽总结一.默认插槽1.在组件中留下插槽slot<template> <div class="category"> <h3>{{ title }}分类</h3> <!-- 插槽 --> <slot>我是默认值, 使用者没有传递具体结构时, 显示</slot> </div>&lt

引入静态资源vue引入静态资源一.放入public√二.放入src/assets内vue引入静态资源一.放入public√例如新建一个css文件夹, 放css样式, 在public/index.html内用link引入二.放入src/assets内例如新建一个css文件夹, 放css样式, 然后再使用它的组件中用import引入.(但是引入文件内有依赖其他文件的话会报错,如下图)...

代理Axios注意: 同源策略代理服务器配置写法一写法二AxiosAxios 是一个基于 promise 的网络请求库1.安装npm i axios --save2.引入import axios from "axios";3.使用模板axios.get("http://localhost:5000/students").then( (response) => { console.log("成功" , response.data); }, (error) => {

动画效果1.默认动画默认动画实例默认动画语法2.指定name动画1.默认动画默认动画实例<template><div> <button @click="isShow = !isShow">显示/隐藏</button> <transition> <h2 v-show="isShow">动画效果</h2> </transition></div></template&g

@tocvue3判断对象是否含有某个属性Object.hasOwnProperty.call(todo, "isEdit")向对象添加响应式属性this.$set(对象, "属性名")this.$set(对象, "属性名", 赋值数据data)

消息订阅和发布pubsub

全局事件总线任意组件间通用

vue自定义事件事件组件使用原生事件组件使用自定义事件绑定事件 -- 子给父传递数据方法一: 父给子组件一个方法 -- 通过v-bind和props方法二: 自定义事件 -- 父组件通过v-on绑定事件和子组件通过$emit触发事件方法三: $ref传递多个数据解绑自定义事件 -- $off('eventName')总结:用于子组件向父组件传递东西事件分为js内部事件(click, keyup, … 由html元素使用 ) 与 自定义事件( 为vue组件服务 )组件使用原生事件native指定该

组件化编码流程一.实现静态组件一.实现静态组件按功能划分, 一个小功能一个组件(没有绝对的对错)组件←→复用的东西1.划分组件2.搭建结构(引入)

ref属性与props属性refref作用使用ref实例props三种方式数组 -- 简单声明接收对象 -- 接收并指定属性对象:{对象} -- 接收+指定属性+默认/必要性props实例props使用模板注意export 暴露、导出1. 默认暴露2. 分别暴露3. 统一暴露mixin -- 混入refref作用在不用原生js的情况下, 操作DOM.原生:document.getElementByIddocument.querySelectorref 相当于原生js的 id 在元素位置打个

使用Vue脚手架说明安装 vue脚手架创建新项目脚手架内部文件说明默认文件配置查看配置命令(只是看)红色框不可以改可以改的关闭语法检查说明vue脚手架(vue CLI)是vue官方提供的开发平台vue CLI(command line interface)是向下兼容的, 所以选最新的就好安装 vue脚手架换源: 配置npm淘宝镜像npm config set registry https://registry.npm.taobao.org全局安装脚手架(第一次才用)npm inst

Vue组件之单文件组件

Vue组件Vue组件1.什么是Vue组件2.组件式编程有什么好处Vue组件1.什么是Vue组件2.组件式编程有什么好处

Vue的生命周期函数Vue的生命周期mountedVue的生命周期Vue的生命周期就是Vue实例的一生Vue的生命周期又名生命周期回调函数mounted解析模板生成虚拟dom, 转化为真实dom, 然后把真实的dom元素放入页面.放入页面后就是挂载完成 – mounted...

vue内置指令内置指令v-textv-htmlcookiev-cloakv-oncev-pre自定义指令内置指令v-bindv-modelv-onv-showv-ifv-forv-text不会解析html标签, 全布当成字符串文本替换标签内的文本还是{{ }}好用v-html会解析html标签cookiecookie（储存在用户本地终端上的数据）v-cloak只有属性名没有属性值.使用方法在页面网络较慢时, 网页还在加载 Vue.js, 隐藏Vue 来不及

收集表单数据(测重v-model用法)<body> <!-- 容器 --> <div id="root"> <form @submit.prevent="submitUserMsg"> <label for="userAccount">账号:</label> <input type="text" name="" id="userAccount" v-model.lazy.trim="us

vue监测数据改变的原理Vue监测数据改变的原理Vue实例中的_data原理(对象)Vue.set()Vue实例中的_data原理(数组)修改Vue数组替换数组Vue监测数据改变的原理只要你改变数据(调用setter),Vue就会重新解析模板, 重新渲染(diff虚拟dom, 渲染)Vue实例中的_data原理(对象)Vue对象下的属性都有getter/setterVue.set()只能给data内的属性添加key, 不能在_data上添加.因为:所以:Vue实例中的_d

vue条件渲染、列表渲染条件渲染列表渲染v-for遍历数组keykey的选择v-for遍历对象遍历字符串遍历指定次数列表过滤列表排序条件渲染v-if 值为false，v-if在的标签直接在HTML文档中删除；v-show值为false，v-show在的标签display的值为none。v-if=“表达式” //表达式就是会返回一个值，此处要能转换为Boolean值。template标签最大的好处是不影响文档的结构，渲染时会将template标签去掉template只能和v-if配合使用

vue样式绑定样式单个类样式的动态使用 -- 字符串写法多个类样式的动态使用 -- 数组写法对象写法内联style动态绑定样式 -- 用对象绑定样式不要自己动用DOM，使用Vue的属性 :class所以不改变的样式正常写，改变的样式用:class指定一个data变量class = “” //这是正常使用:class="表达式" // 会解析该表达式单个类样式的动态使用 – 字符串写法用于要绑定的类的名字不确定 <style> /* 类样式 */ .basic

vue计算属性与监听属性计算属性 computed监听属性 watch（又名侦听属性）@事件="方法"监听属性 (watch)的两种写法深度监听(用`deep:true`监听多级结构变化)简写监听属性计算属性与监听属性的区别计算属性 computeddata内的是属性计算属性是用data内的属性经过计算得到的新属性。计算属性：初次读取和依赖数据改变读取。计算属性：obj 是对象格式，get（）返回值就是computed内的obj对象的值；set（）通过传入的值修改依赖项来修改obj的值。完整写

前端之vue事件处理事件处理元素绑定事件无参有参，事件用 `$event` 占位事件修饰符(6个).prevent.stop.once.self键盘事件事件处理事件的基本使用：1,使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;2,事件的回调需要配置在methods对象中，最终会在vm上;(没有代理)3,methods中配置的函数，不要用箭头函数！否则this就不是vm了;4,methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;5.@click

vue数据代理与劫持Object.defineProperty()什么是数据代理Vue中的数据代理数据劫持Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。Object.defineProperty(object, prop, descriptor);参数: 对象,属性(字符串类型),{getter and setter}用于数据与对象属性的双向绑定。 let nu