qq_46582421的博客

Teleport：什么是Teleport?——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。如图所示：文件目录：Child.vue代码：<template> <div class="child"> <h3>我是Child组件</h3> <Son/> </div></template><script>import Son

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。如图所示：

作用:实现祖孙组件间通信。套路:父组件有一个provide选项来提供数据，子组件有一个.inject选项来开始使用这些数据。具体写法:1.祖组件中:2.后代组件中:图示：Child.vue代码：<template> <div class="child"> <h3>我是Child组件（子）</h3> <Son/> </div></template>&.

自定义hook函数什么是hook?——本质是一个函数，把setup函数中使用的Composition API进行了封装。。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。文件目录：Demo.vue代码：<template> <h2>当前求和为：{{sum}}</h2> <button @click="sum++">点我+1</button> <hr&gt

1.Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名:beforeDestroy改名为beforeUnmountdestroyed改名为unmounted2.Vue3.0也提供了Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下:beforeCreate ===>setup()created =======>setup()beforeMount ===> onBeforeMountmounted=======&gt

App.vue代码：<template> <Demo/></template><script>import Demo from './components/Demo'export default{ name:'App', components:{Demo} }</script>Demo代码：<template> <h2>当前求和为：{{sum}}</h2>

setup的两个注意点setup执行的时机在beforeCreate之前执行一次，this是undefined。setup的参数：1.props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。2.context: 上下文对象2.1，attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于[this.attrs。2.2，slots:收到的插槽内容,相当于this.attrs 。2.2，slots:收到的插槽内容,相当于this.attrs。2.

与Vue2.x中computed配置功能一致，写法：App.vue代码：<template> <Demo/></template><script>import Demo from './components/Demo'export default{ name:'App', components:{Demo} }</script>compotent - Demo.vue代码：<template&.

理解: Vue3.0中一个新的配置项，值为一个函数。setup是所有Composition API(组合API)“表演的舞台”。组件中所用到的:数据、方法等等，均要配置在setup中。setup函数的两种返回值:a.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )b.若返回一个渲染函数:则可以自定义渲染内容。(了解)注意点:a.尽量不要与Vue2.x配置混用5a1， Vue2.x配置(data、methos、computed…）中可以访问到setup中的属性、.

ref函数作用:定义一个响应式的数据。语法: const xxx = ref(initvalue)创建一个包含响应式数据的引用对象(reference对象)。。JS中操作数据:xxx.value模板中读取数据:不需要.value，直接:{{xxx}}·备注:接收的数据可以是:基本类型、也可以是对象类型。基本类型的数据:响应式依然是靠object.defineProperty()的get 与set完成的。对象类型的数据:内部“求助”了Vue3.0中的一个新函数——reactive函数。

reactive函数作用:定义一个对象类型的响应式数据（基本类型别用它，用ref函数)语法: const 代理对象= reactive(被代理对象）接收一个对象（或数组)，返回一个代理器对象(proxy对象)reactive定义的响应式数据是“深层次的"。内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的。App.vue代码：<template> <h1>一个人的信息</h1> <h2>姓名:{{person.n

1.输入代码安装：npm i -vue-router如图所示：下载安装完毕：2.在main.js中引入vue-routerimport VueRouter from 'vue-router'如图所示：

第一步：安装bootstrap：npm install bootstrap -S如图所示：第二步：引入main.jsimport "bootstrap/dist/css/bootstrap.min.css"如图所示：

Count代码：<template> <div> <h1>当前求和为:{{$store.state.sum}}</h1> <select v-model.number="n"><!--强制放在number里转换--> <option value="1">1</option> <option value="2">2</option>

Count代码:<template> <div> <h1>当前求和为:{{sum}}</h1> <select v-model.number="n"><!--强制放在number里转换--> <option value="1">1</option> <option value="2">2</option> <option va

Category代码：<template> <div class="category"> <h3>{{title}}分类</h3> <slot :games="games" msg="hello">我是默认的一些内容</slot> </div></template><script> export default{ name:'Category', p

首先安装axios:npn i axios配置方法：说明:1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。2.缺点:配置略微繁琐，请求资源时必须加前缀。App.vue代码：<template> <div> <button @click="getStudents">获取学生信息</button> <button @click="getCars">获取汽车信息</button> </d

需要安装animate.css，打开网站：https://animate.style/安装代码：npm install animate.cssTest.vue代码<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你..

Test.vue代码<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊</h1> </transition> </div></template>&lt

Test.js代码<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊</h1> </transition> </div></template><

Test.js代码：<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊</h1> </transition> </div></template>&lt

npm install --save pubsub-js

School代码<template> <div class="school"> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <button @click="sendSchoolName">把学校名给App</button> </div></template><

关于不同版本的Vue:1.vue.js 与vue.runtime.xxx.js的区别:(1).vue.js是完整版的Vue，包含:核心功能+模板解析器。(2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。...

1.一个重要的内置关系: VueComponent.prototype._ proto__ === Vue.prototype2.为什么要有这个关系:让组件实例对象(vc) 可以访问到Vue原型上的属性、方法。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=

关于VueComponent:schoo1组件本质是一个 名为VueComponent的构造函数，且不是程序员定义的，是Vue . extend生成的。2.我们只需要写或, Vue解 析时会帮我们创建schoo1组件的实例对象，即Vue帮我们执行的: new VueComponent(options )。3.特别注意:每次调用Vue . extend,返回的都是一个 全新的VueComponent! ! ! !4.关于this指向:(1).组件配置中:data函数、methods中的函数、w

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

几个注意点:1.关于组件名:一个单词组成:第种写法( 首字母小写): +school第二种写法(首字母大写): School多个单词组成:第种写法(kebab-case命 名): my-school第种写法(CamelCase命名): MySchool (需要Vue脚 手架支持)备注:(1).组件名尽可能回避HTML中已有的元素名称，例如: h2、 H2都不行。(2).可以使用name配置项指定组件在开发者工具中呈现的名字。2.关于组件标签:第一 种写法: 第二种写法: 备注:不

Vue中使用组件的三大步骤:定义组件(创建组件)注册组件三、 使用组件(写组件标签 )如何定义-一个组件?使用Vue . extend(options )创建，其中options和new Vue ( options)时传入的那个options儿乎样， 但也有点区别:区别如下:1.el不要写，为什么?-最终 所有的组件都要经过一个vm的管理，由vm中的e1决 定服务哪个容器。2.data必须写成函数，为什么?-一避免组件被复用时，数据存在引用关系。备注:使用template 可以配置组件结

一、生命周期:1.又名:生命周期回调函数、生命周期函数、生命周期钩子。2.是什么:Vue在关键时刻桶我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm或组件实例对象。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-.

需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2:定义-个v-fbind指令，和Iv-bind功能类似，但可以i让其所绑定的input元素默认获取焦点。自定义指令总结:定义语法:(1).局部指令:new Vue({new Vue({directiyes:{指令名:配置对象}或directives(){}})})(2).全局指令:Vue . directive(指令名,配置对象)或Vue 。directive(指令名，回调函数)二、 配置对象

1.作用:向指定奶点中渲染包含htm1结构的内容。2.与插值语法的区别;(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。(2).v-html可以识别html结构。3.严重注意: v-html有安全性问题! ! ! !(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(2).定要在可信的内容上使用v-html,永不要用在用户提交的内容 上!<!DOCTYPE html><html lang="en"><head>

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

Vue监视数据的原理:vue 会监视data中所有层次的数据。2.如何监测对象中的数据?通过setter实现监视，且要在newVuel时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API:Vue。set(target, propertyName/index. value) 或Vm，set(target,propertyName/index,value)3.如何监测数组中的数据?通过包裹数组更新元素的方法实现，本质就是做

收集表单数据:若: , 则v- mode1收集的是value值，用户输入的就是value值。若: ,则v-model收 集的是value值，且要给标签配置value值。若: 1.没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)2.配置input的value属性:(1)v-mode1的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)(2)v-mode1的初始值是数组，那么收集的的就是value组成的数组备注: v-mode1

我们学过的指令:v-bind :单向绑定解析表达式，可简写为:xXXxv-model:双向数据绑定V- for：遍历数组/对象/字符串V- on:绑定事件监听，可简写为@v-if:条件渲染(动态控制节点是否存存在)v-else:条件渲染(动态控制节点是否存存在)V- show:条件渲染(动态控制节点是否展示)v-text指令:1.作用:向其所在的节点中渲染文本内容。2.与插值语法的区别: v-text会 替换掉节点中的内容，{{xx}则不会。代码：<!DOCTYPE html

链接：https://www.bootcdn.cn/步骤：1.2.这里直接下载，放防止没有网的情况下无法运行3.复制下来4.放在txt中，然后修改后缀5.引入项目中

react、 vue中的key有什么作用? (key的内 部原理)1.虚拟DOM中key的作用:key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下:2.对比规则:(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:国.若虚拟DOM中内容没变，直接使用之前的真实DOM!2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。(2).旧虚拟D

v-for指令;1.用于展示列表数据2.语法: v-for="(item, index) in xxx" :key=“yyy”3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt