Vue2.0学习小结

关于Vue和VueComponent 一个重要的内置关系:VueComponent.prototype.proto===vue.prototype 为什么要有这个关系? 让组件实例对象(vc)可以访间到Vue原型上的属性、方法. ref属性 1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">.....</h1>或<School ref="xxx"></School> 获取:this.$refs.xxx 配置项props 功能: 让组件接收外部传过来的数据 (1).传递数据: <Demo name="xxx"/> (2).接收数据: 第一种方式(只接收): props:['name'] 第二种方式(限制类型): props:{ name:String } 第三种方式(限制类型、限制必要性、指定默认值): props:{ name:{ type:String,//类型限制 required:true,//必要性 default:"JQF"//默认值 } } 备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告, 若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据. mixin(混入) 功能: 可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步:定义混合 const mixData={ data(){...} }, const mixMethods= { methods:{...} } 第二步:使用混入 (1).全局混入:Vue.mixin(xxx) (2).局部混入:mixins:[xxx'] 插件 功能:用于增强vue 本质:包含install方法的一个对象,install的第一个参数是vue,第二个以后的参数是插件使用者传递的数据。 定义插件: 对象.install = function (Vue, options) { //1....

Apr 2, 2022 · 6 min · Archai

Vue路由地址改变,页面却不刷新?

在网易云项目时,在歌手详情页点击相似的歌手跳转到query参数不同的另一个歌手详情页时,出现地址栏query参数变化,而页面却没有实时更新的现象,经过搜索找到以下解决方案: 方案一:watch监听路由 watch: { // 方法1 //监听路由是否变化 '$route' (to, from) { if(to.query.id !== from.query.id){ this.id = to.query.id; this.init();//重新加载数据 } } } //方法 2 设置路径变化时的处理函数 watch: { '$route': { handler: 'init', immediate: true } } 方案二:给router-view添加一个不同的key 给router-view添加一个不同的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。 <router-view :key="$route.fullpath"></router-view> 小洁🙎🏼‍♀️ 抽象问题描述:同一path的页面跳转时路由参数变化,但是组件没有对应的更新。 实际原因:主要是因为获取参数写在了created或者mounted路由钩子函数中,路由参数变化的时候,这个生命周期不会重新执行。

Apr 16, 2022 · 1 min · Archai

Vue在页面直接展示模板语法{{xx}}

用vue.js写成的页面中,可能出现由于外部请求导致的页面展示阻塞现象,进而导致模板语法{{xxx}}直接展示在页面上,这其实跟页面加载的流程有关,整个页面加载的流程是: 解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造HTML DOM模型 -> 加载图片等外部文件 -> 页面加载完毕 所以,当HTML加载的时候,就会把{{}} 当成文本加载出来,只有当vue初始化完成后,才会把{{}}解析成vue的语法。 遇到这种情况有以下几种解决方案: 方案一(不推荐):在head里面加入引入vue的script标签 如果把引入vue的script放到head里面,那页面就不会出现{{}},因为在body之前,vue就已经引入进并且加载完成了。 方案二:v-text|v-html 使用v-text插入文字,使用v-html插入HTML结构,替换原本使用的模板语法{{xxx}} 方案三:template 使用<template>标签包裹要渲染的HTML结构,那么只有vue解析时才会展示出该结构 方案四:v-cloak指令 + CSS样式 标签上的v-cloak属性在被vue解析到时会自动去掉,那么我们可以利用CSS的属性选择器,给有v-cloak属性的元素设置display:none样式,那么,在加载HTML时自然不会显示{{xxx}},而在vue解析时又会显示出来,问题得以解决!

Apr 7, 2022 · 1 min · Archai

Vue中的数据监视原理

1.vue会监视data中所有层次的数据. vue对于配置在data中的所有对象都会以key值作为目标进行监视,不论多少层,都会递归地为每一个key配置getter和setter(通过Object.defineProperty())。 相关阅读 MDN关于defineProperty的说明 2.如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据,即在data中提前配置。 (1).对象中后追加的属性,Vue默认不做响应式处理 直接通过修改vm._data或者vm来添加key,并不会配置getter和setter,因此不会做响应式 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,key/index,value)或vm.$set(target,key/index,value)(可以同时修改数组和对象) ​ 特别注意: Vue.set()和vm.$set()不能直接给vm或vm的根数据对象(vm._data)添加属性!!! 3.如何监测数组中的数据? 在数组中直接通过索引的方式修改数组并不会引起Vue的响应,那么要如何做呢?Vue通过包裹数组更新元素的方法(对原数组方法进行修改)实现,本质就是做了两件事: (1). 调用原生对应的方法对数组进行更新. (2). 重新解析模板,进而更新页面. 就包裹了下面的七种数组方法: push() pop() shift() unshift() splice() sort() reverse() 也就是说,通过上面七种方法修改数组,会让Vue做出响应。 例如想要修改数组中索引为0的位置的数据,可以通过 vm.data.arr.splice(0,0,val)或Vue.set(vm.data.arr,0,val)又或者vm.$set(vm.data.arr,0,val),在具体的由Vue管理的方法中this指向的应该就是vm!! 数据劫持 Vue通过setter,getter对数据进行动态监测,其实就是“劫持”了数据😯

Mar 21, 2022 · 1 min · Archai

vue.js学习心得

1. 关于元素显示与隐藏 # v-show="name" 说明: 如果data中name为true就显示,否则该元素display:none # v-if="name" 说明: 如果data中name为true就显示,否则该元素变成一段注释<!---->,就被删掉了! v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 2. 访问data  # v-model 说明: 与data中的值绑定,会随着data中的值得改变而改变,如果是input则data中的值会随着input中的值的改变而改变 # v-if **说明:**用于条件性地渲染一块内容 在<template>元素上使用 v-if 条件渲染分组 因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换(隐藏或显示)多个元素呢?此时可以把一个<template>元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含<template>元素。 这样做的好处就是不用再写一个<div>将需要隐藏的元素包裹 # v-show 说明: 条件切换display属性 # v-for 说明: 在data中定义一个数组arr,然后用v-for="val in arr"访问到 3....

Jul 18, 2020 · 2 min · Archai