u013140948的博客

一、理解Vuex1.1、Vuex是什么专门在vue中实现集中式状态(数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信1.2、什么时候使用Vuex2.1.多个组件依赖于同—状态2.2．来自不同组件的行为需要变更同—状态1.3、Vuex工作原理图二、求和案例2.1、使用vue编写src/App.vue文件<template> <div> <Count/&

作用让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件分类默认插槽、具名插槽、作用域插槽使用方式1、默认插槽父组件中：<Category> <div>html结构</div></Category>子组件中：<template> <div> <!--定义插槽--> <slot>插槽默认内容</slot> &

Vue脚手架配置代理方法一在vue.config.js中添加如下配置devServer:{ proxy:"https://localhost:5000"}说明：1.优点：配置简单，请求资源时直接发给前端（8080）即可。2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理。2.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）方法二编写vue.config.js配置具体代理规则：module.exports={ dev

Vue技术—Vue封装的过度与动画1、作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名2、图示3、写法（1）准备好样式：元素进入的样式：v-enter:进入的起点、v-enter-active:进入过程中、v-enter-to:进入的终点元素离开的样式：v-leave:离开的起点、v-leave-active:离开的过程中、v-leave-to:离开的重点（2）使用包裹要过度的元素，并配置name属性：<transition name="hello">

nextTick1、语法：this.$nextTick(回调函数)2、作用：在下一次DOM更新结束后执行其指定的回调3、什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作，要在nextTick所指定的回调函数中执行...

1、一种组件间通信的方式，适用于任意组件间通信2、安装全局事件总线：new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this } ......})3、使用事件总线：        （1）接受数据：A组件想接收数据mehods(){ demo(data){ ...... }}......mounted(){ //第一种写法 this.$b

总结1.一种组件间通信的方式，适用于：子组件 ===> 父组件2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（ 事件的回调在A中 ）3.绑定自定义事件：        （1）.第一种方式，在父组件中：<Demo @atguigu="text"/>或<Demo v-on:atguigu="text"/>    &

WebStorage1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制3.相关API：xxxxxStorage.setItem(‘key’,‘value’)该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值xxxxxStorage.getItem(‘person’)该方法接受一个键名作为参数，返回键名对应的值

总结TodoList案例1.组件化编码流程：（1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。（2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，害死一些组件在用：一个组件在用放在组件自身即可一些组件在用放在他们共同的父组件上**（状态提升）**（3）实现交互：从绑定事件开始。2.props适用于：（1）父组件==>子组件 通信（2）子组件==>父组件 通信（要求父先给子一个函数）3.试用v-model时要切记：v

App.vue<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addtodo="addtodo"/> <MyList :todolist="todolist" :checktodo="checktodo" :deltodo="deltodo"/>

作用让样式再局部生效，防止冲突写法<style scoped> ……</style>

功能用于增强Vue本质包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据定义插件对象.install = function(Vue,options){ //1.添加全局过滤器 Vue.filter(……) //2.添加全局指令 Vue.directive(……) //3.配置全局混入（合） Vue.mixin(……) //4.添加实例方法 Vue.prototype.$myMethod = function()(……) V

功能：可以把多个组件公用的配置提取成一个混入对象使用方式：第一步定义混合，例如：{ data(){……}, methods:{……} ……}第二步使用混入，例如（1）全局混入：Vue.mixin(xxx)（2）局部混入：mixins:[‘xxx’]...

功能：让组件接收外部传过来得数据传递数据：<Demo name="xxx"/>接收数据第一种方式（只接收）：`props:['name']`第二种方式（限制类型）：props:{ name:String}第三种方式（限制类型、限制必要性、指定默认值）props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 }}备注：props是只读得，Vue底层会检测你对

1.被用来给元素或子组件注册引用信息（id得替代者）2.应用在html标签上获取得是真实DOM元素，用用在组件标签上是组件实例对象（VC）3.使用方法：打标识：< h1 ref=“xxx”>…</ h1 > 或 < School ref=“sch”/>获取：this.$refs.xxx...

使用vue inspect > output.js可以查看到Vue脚手架的默认配置使用vue.config.js可以对脚手架进行个性化定制，详情请见：https.//cli.vuejs.org/zh

node_modulespublic |— favicon.ico:页签图标 |_ index.html:主页面src |—— assets:存放静态资源 |_ logo.png |—— component:存放组件 |_ HelloWorld.vue |—— App.vue:汇总说有组件 |—— main.js:入口文件.gitignore:git:版本管制忽略的配置babel.config.js:babel的配置文件package.json:应用包配置文件README.

关于不同本本的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函数去指定具体内容/*该文件是整个项目的入口*///引入vueimport Vue from 'vu

1. 文件目录：2. School.vue文件：<template> <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click = "button"></button> </div></template><script>export default {

1、一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype2、为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。<script>function Demo(){ this.a = 1 this.b = 2}//创建一个Demo实例var d = new Demo()//显式原型属性console.log(Demo.prototype)//隐式原型属性console.log(d.__pr

关于VueComponent：1、school组件本质时一个名为VueComponent的构造函数，且不是程序员定义的，时Vue。extend生成的2、我们只需要写< school ></ school >，Vue解析时会帮我们创建school组件的实例对象。即Vue帮我们执行的：new VueComponent(option)3、特别注意：每次嗲用Vue.extend ，返回的都是一个新的 VueComponent4、关于this指向（1）组件配置中：data函数、me

<div id="root"> <app></app></div><script> /*创建students组件*/ const students = Vue.extend({ template: ` <div> <h2>学生名称：{{name}}</h2> <h2>学生

几个注意点：1、关于组件名：一个单词组成：第一种写法（首字母小写）：school第二种写法（首字母大写）：School多个单词组成：第一种写法（kebab-case命名）：my-school第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）备注：（1）组件名尽可能回避HTML种已有的元素名称（2）可以使用name配置项指定组件在开发者工具中呈现的样子2、关于组件标签：第一种写法：< school ></ school >第二种写

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

生命周期1.又名：生命周期回调函数、生命周期函数、生命周期钩子2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数3.生命周期函数的名字不可更改，但函数地具体内容是程序员更具需求编写的4.生命周期函数中的this指向是vm或组件实例对象<div id="root"> <h2 :style='{opacity}'>你好呀</h2></div><script> new Vue({ el:'#root'

自定义指令总结一、定义语法：1、局部指令new Vue({directives:{指令名:配置对象}})或new Vue（{directives(指令名:回调函数)}）2、全局指令：Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)二、配置对象中常用的三个回调1 .bind：指令与元素成功绑定时嗲用2 .inserted：指令所在元素被插入页面时嗲用3 .update：指令所在模板结构被重新解析时调用三、备注1、指令定义时不加

v-pre指令：1.跳过其所在节点编译过程2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译<div id="root"> <h2 v-pre>Vue其实很简单</h2> <h2>当前n的值时：{{n}}</h2> <button @click='n++'>点我n+1</button></div><script> new Vue({ el:'#root',

v-once指令：1.v-once所在节点在初次动态选然后，就视为动态内容了，2.以后数据的改变不会引起v-once所在结构的变更，可以用于优化性能<div id="root"> <h2 v-once>当前n的值时：{{n}}</h2> <h2>当前n的值时：{{n}}</h2> <button @click='n++'>点我n+1</button></div><script> ne

v-cloak指令（没有值）：1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题<style> [v-cloak]{ display:none; }</style><div id="root"> <h2 v-cloak>{{name}}</h2></div><script type="text/jav

v-html指令1.作用：向指定节点中渲染包含html结构的内容2.与插值 语法的区别v-html会替换掉节点中所有的内容，{{xxx}}则不会v-html可以识别html结构3.严重注意：v-html有安全性问题！！在网站上动态渲染任何HTML是非常危险的，容易导致XSS攻击。一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！<div id="root"> <div>你好，{{name}}</div> <div v-h

我们学过的指令指令解释v-bind单项绑定解析表达式，可简写为 :xxxv-model双向数据绑定v-for遍历数组、对象、字符串v-on绑定事件监听，可间隙为@v-if条件渲染（动态控制节点是否存在）v-else条件渲染（动态控制节点是否存在）v-show条件渲染（动态控制节点是否展示）v-text指令作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会<div i

<!--收集表单数据：若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值。若：<input type="checkbo"/> 1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值） 2.配置input的value属性：

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

<div id="root"> <h2>人员列表</h2> <button @click="updatamei">更新马冬梅信息<button> <ul> <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul></div>new Vue({

<div id="root"> <h2>人员列表</h2> <button @click="updatamei">更新马冬梅信息<button> <ul> <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul></div>new Vue({

<div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyworld"> <button @click="sorttype = 2">年龄升序</button> <button @click="sorttype = 1">年龄降序</button> <button @click="sorttyp

面试题：react、vue中的key有什么租用？（key的内部原理）<div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyworld"> <ul> <li v-for="(p,index) in filpersons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} &

面试题：react、vue中的key有什么租用？（key的内部原理）1、虚拟DOM中key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：2、对比原理： （1）旧虚拟DOM中找到了与新虚拟DOM相同的key： ①若虚拟DOM中内容过没变，直接使用之前的真实DOM ②若虚拟DOM中内容变了，则生辰关心的真的DOM，随后替换掉页面中之前的真实DOM

v-for指令1.用于展示列表数据2.语法：v-for=“(item,index) in xxx” :key=“yyy”3.可遍历：数组、对象、字符串、指定次数<div id="root"> <h2>人员列表</h2> <!--遍历数组--> <ul> <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li> &lt

1.v-if写法：（1）v-if=“表达式”（2）v-else-if=“表达式”（2）v-else适用于：切换频率较低的场景特点：不展示的DOM元素直接被移除注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断2.v-show写法：v-show=“表达式”适用于：切换频率较高的场景特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉3.备注：使用v-if的时候，元素可能无法获取到，而是用v-show一定可以获取到<div id="root"&g