mantou_riji的博客

在directives中创建如下文件。注册成功之后就可以在全局范围内使用了。

创建mock文件创建 src/mock/index.js文件，使用mock接受请求发送请求.vue文件发送请求

Vue2.x有许多全局API和配置。例如注册全局组件、注册全局指令等。注册全局组件注册全局指令。

CompositionAPI(组合式API)是vue3的写法，通俗地理解组合式API就是在setup中对数据（data），方法（methods）等进行配置。vue2中使用的是OptionsAPI(配置式API)

customRef用于创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。eg

代码】Vue3的其他组和API——shallowReactive与shallowRef、readonly与shallowReadonly。

什么是hook?——本质是一个函数，把setup函数中使用的进行了封装。类似于vue2.x中的mixin。就是把setup中具有一定逻辑功能的代码提取出去，放在hooks的函数中，以后哪个组件需要使用该功能，就直接调用该hook函数即可。hook函数一般放在src文件夹下的hooks中。eghooks/usePoint.js（定义hooks函数获取鼠标点击坐标）import{//实现鼠标打点的数据letpoint=reactive({x0,y...

egApp组件中嵌套着Child子组件，使用异步引入的方式的话，如果child组件没有加载进来，app组件已经加载好了，那app组件就会先显示在页面上，Child组件什么时候加载完什么时候在进行显示。egApp组件中嵌套着Child子组件，使用静态引入的方式的话，如果child组件没有加载进来，app组件是不会显示在页面上的，所以App组件最终会和Child组件一同渲染到页面上。//importChildfrom'./components/Child'//静态引入。上述引入方法就是异步引入。...

Vue的单文件组件，即*vue文件，简称SFC是一种特殊的文件格式，是我们能够将一个Vue组件的模板()、逻辑()、样式()封装在单个文件中。选项式：data() {return {exportdata() {return {defaultdata() {return {data() {return {datadata() {return {data() {return {returndata() {return {data() {

组合式api编写方法比配置项编写方法的优先级高一些，但是一般只写一种即可。//通过配置项的形式使用生命周期钩子。Vue3.0也提供了。

可以监视一个数据也可以同时监视多个数据。import{//监视一个数据watch(监视属性,(newValue,oldValue)=>{监视的回调}，{监视的配置})//监视多个数据watch([监视属性1，监视属性2],(newValue,oldValue)=>{监视的回调}，{监视的配置})}eg效果代码demo.vue......

setup是Vue3中一个新的配置项，值为。eg：返回一个对象:App.vueeg2：返回的是在vue2中中的属性会通过原理最终包装成响应式数据_data。vue3中为我们提供了两种包装响应式数据的方法：ref和reactive注意这里的ref和vue2中的ref不一样，这里是一个。上面使用setup包裹页面数据，但是这样编写出的数据不是响应式的，即数据改变页面不会被重新加载。从vue2中我们知道一个数据要实现响应式一定有对应的响应式得getter和setter方法，在vue3中通过帮我们生成响

指令是带有v-前缀的特殊 attribute。Vue 提供了许多内置指令。

Vue 使用一种基于HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。

其实使用脚手架创建的vue项目的main.js文件中已经为我们配置好vue应用的创建。

httpshttps什么是vite?——新一代前端构建工具。（老大哥是webpack）优势如下。开发环境中，无需打包操作，可快速的冷启动。。轻量快速的热重载(HMR)。。真正的按需编译，不再等待整个应用编译完成。。速度比webpack快很多传统构建与vite构建对比图传统构建将所有的项目文件打包好之后放到服务器上，显示服务器准备好了vite构建上来先显示服务器准备好了，然后根据请求去找路由再去解析相应的模块。...

vue-cli创建vue项目报错ParsingerrorNoBabelconfigfiledetectedfor。在package.json文件的parserOptions中添加。

vue的ui组件库

1.路由就是一组的对应关系。 路由——2.多个路由,需要经过的管理。 路由器——路由是为了实现 ，即。单页面开发：单页面开发整个应用只有一个完整的页面单页面开发即不跳转其他页面的页面开发点击页面中的导航链接不会刷新页面，只会做页面的局部更新。数据需要通过ajax请求获取。单页面开发的例子（路由实现）原理解释：不同的页签对应着，然后(路由器)根据请求地址在所管理的路由中查找请求地址，将该组件显示在显示区。—个路由就是一组映射关系()key为, value可能是vue-router是vue的一个库，专

vuex是专门在Vue中实现状态(）管理的一个Vue，对vue应用中多个组件的共享状态(）进行(读/写)。vuex也是一种，且适用于任意组件间通信。引入：需求：组件B、C、D 都需要组件A上的数据X。如果使用：这时候我们就会想既然所有组件都要使用组件A中的数据我们为什么不直接把组件A中的数据提取出来作为公共数据呢，这就引入了vuex。vuex不属于任何一个组件，里面存储的是组件公用的数据，任何组件都可以获取和修改vuex中的数据：所以只要用到共享数据就可以使用vuex。如果vue组件的请求有任

插槽的作用让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。httpshttpshttpshttpshttpshttps。

使用vue脚手架解决ajax跨域请求。

transition可以有name属性，但是如果transition设置了name属性，对应的动态类属性的名字也要及逆行改变，将。编译的时候transition标签不会被编译进去，transition只是vue的一个标签。动画的定义和样式还是先用css写好，vue帮助我们在合适的事件调用动画效果。即显示的时候从左向右滑入，隐藏的时候从右向左滑入。/*谁变给谁配置transition*//*谁变给谁配置transition*/指定变换的事件和样式，一般谁变就给谁配置。上面的是.come的样式。......

不在外面嵌套$nextTick，就会出错，这是因为Vue是在执行完这个函数之后再判断数据发生了变化，重新渲染模板，也就是说函数执行完之后input框才可见，而添加焦点是在函数中执行，即没有input框就进行获取焦点，这显然是不可以的。绑定了一个input输入框的是否可见性，即如果todo.isEdit=true，输入框才可见。方法中的函数会在VUE渲染完页面之后再执行，这样就可以正常获取焦点了。进行某些操作时，要在nextTick所指定的回调函数中执行。我们想要实现的效果是输入框一可见就获取焦点。...

一种组件间通信的方式，适用于。//订阅消息，编写回调函数。（A是订阅者，B是发布者）2.发布消息︰消息内容。1.订阅消息∶消息名。

所以所有的组件实例对象都可以通过原型链找到Vue原型对象上的内容。当组件想要接收数据时在X上绑定自定义事件，编写事件回调函数。为保证所有组件都可以看到x，可以将x放在Vue的原型对象上。需要将赋值为vc（组件实例对象）或vm(vue实例对象)。当组件想要传递数据是去触发X上的事件，可以携带参数。School接收数据，Student组件发送数据。//该组件销毁时记得解绑，避免占用$bus的资源。全局事件总线︰可以实现任意组件间通信。在组件实例对象上可以直接调用。//绑定事件，编写回调函数。.........

我们也可以定义组件的自定义事件，这样定义出来的事件是给组件用的。父组件定义自定义事件和触发的函数

/所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）//所以如果想要传递对象可以调用JSON.stringify方法，将对象转换为json字符串（json字符串可以显示对象内容，但本质也是一个字符串）sessionStorage的4个操作存储数据、获取数据、删除数据、清空数据（和localStroage一样）localStorage的4个操作存储数据、获取数据、删除数据、清空数据。手动删除如清空缓存。...

如果两个兄弟组件需要共用一个data，就将data定义在app中，再由app.js将数据分贝传给各兄弟组件。nanoid是单机生成id的一个第三方库。

Mixin混入，即放置两个组件共享的配置，然后组件使用的时候进行引入即可，一般将混入的组件定义在mixin.js文件中，和main.js平级。组件中的style中的样式最终会汇总在一起，所以组件中的style样式名应该各不相同避免造成冲突。Mixin混入，即放置的是组件共享的配置，所以很有可能混合中的配置和自己组件中的配置产生冲突。插件的本质是一个对象，对象中必须包含install方法,install的第一个参数是。这种情况下，一般以自己组件中的定义的配置为准。因为app组件中的样式应该给全局的组件使用。.

/组件交互的代码（数据、方法），相当于非单文件中的出了template的配置。//组件交互的代码（数据、方法），相当于非单文件中的出了template的配置。可以对接收参数的数据格式进行限制，同时可以限制属性是否是必需的，也可以设置默认值。//组件交互的代码（数据、方法），相当于非单文件中的出了template的配置。需求学生页面的数据是动态传入的，而不是写死的——引入props配置。App.vue传入数据的时候通标签的属性传入，/*组建的样式*//*组建的样式*//*组建的样式*/.........

ref属性应用在组件上时，和使用id获取得结果是不一样的。id获取的是DOM元素，ref属性获取的是。ref属性应用在html标签上时，和使用id获取得结果是一样的都是DOM元素；组件实例对象(vc)组件实例对象(vc)...

Vue脚手架是Vue官方提供的标准化开发工具(开发平台)https需要定义文件（和package.json平级），在里面进行配置https入口文件配置pages{index{//page的入口entry'src/index/main.js',//模板来源template'public/index.html',//在dist/index.html的输出filenamehttpshttpshttpshttpshttpshttpshttps。......

每个组件拥有自己的。模块定义：模块即向外提供特定功能的js程序，一般一个模块就是一个js文件模块作用: 复用js,简化js的编写,提高js运行效率当应用中的都以来编写的,那这个应用就是一个模块化的应用。将一个大的js拆分成多个小的js以实现模块化组件是实现应用中功能和的集合：html、css、js：mp3 mp4 ttf .zip：将所有功能写在一个组件中是没有意义的所以要分开写。组件的作用:复用编码,简化项目编码,提高运行效率当应用中的功能都是的方式来编写的，那这个应用就是一个组件化的应用

实际上vue中不止有mounted函数，他前面有很多vue提供的函数，后面也有很多vue提供的函数。这些函数做成了vue的生命周期vue的生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。vue的生命周期就是Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm或组件实例对象。......

需要在directives：中进行指令的配置定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。尝试使用函数形式实现但是focus函数需要等element的值修改成功并插入页面后执行才奏效，而使用函数的写法我们无法指定在elemen插入页面后执行focus函数才执行，所以这样写第一次是无法获取焦点的。所以需要采取对象的（键值对）写法：(1).bind:指令与元素成功绑定时调用。

作用使用css配合v-cloak可以解决网速慢时页面展示出未解析的页面的问题。原理v-cloak本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

定义对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法{{xxx│过滤器名}}xxx会作为参数传递给过滤器，过滤器执行完毕之后返回结果会直接代替页面的{{xxx│过滤器名}}进行显示。（局部过滤器）或{}}（全局过滤器）{{xxx│过滤器名}}或v-bind属性=“xxx|过滤器名"xxx会作为参数传递给过滤器，过滤器执行完毕之后返回结果会直接代替页面的{{xxx│过滤器名}}进行显示。httpshttpshttpshttps。......

v-model默认绑定value。

我们在页面模板中使用data中的数据时，data中的数据会在页面显示，并且当data中的数据发生改变时页面中相应的数据也发生改变。//this.persons[0].name="yang"//奏效。//this.persons[0].age="18"//奏效。点击更新按钮之后，vm中的数据发生了改变但是页面数据没有改变。那么vue是如何监视data中的数据改变的呢？..................