- 博客(25)
- 收藏
- 关注
RSS订阅原创 plugins插件
本质：包含install方法的一个对象，install的第一个参数时Vue，第二个以后的参数时插件使用者传递的数据。对象.install = function (Vue,options) {//2.添加全局混入（合）//3.配置全局混入（合）//1.添加全局过滤器。使用插件： Vue.use()//4.添加实例方法。功能：用于增强Vue。src下建plugins文件。main.js中引入。
2025-06-04 18:18:48
357
原创 mixin混入
src下建mixin.js（export暴露一下，为其他文件提供导入途径）（1）.全局混入：Vue.minxin(xxx)（2）.局部混入：mixins:['xxx']功能：可以把多个组件共用的配置提取成一个混入对象。
2025-06-04 17:09:49
162
原创 关于不同版本的Vue
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数收到的createElement函数去指定具体内容。（2）.vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；（1）.vue.js是完整版的Vue,包含：核心功能+模板解析器。
2025-06-03 17:53:50
137
原创 VueComponent
data函数，methods中的函数，watch中的函数，computed中的函数 它们的this均是【VueComponent实例对象】data函数，methods中的函数，watch中的函数，computed中的函数 它们的this均是【Vue实例对象】1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！Vue的实例对象，以后简称vm。
2025-05-30 18:07:44
209
原创 组件注意的几个点
会导致后续组件不能渲染。第一种写法（首字母小写）：school。第二种写法（首字母大写）：School。第一种写法：<school>
2025-05-30 15:45:59
200
原创 非单文件组件
（1）el不要写 —————最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。（2）data必须写成函数 ————避免组件被复用时，数据存在引用关系。（1）局部注册：靠new Vue的时候传入components选项。（2）全局注册：靠Vue.component（'组件名'，组件）备注：使用template可以配置组件结构。三.使用组件（写组件标签）一.定义组件（创建组件）1.如何定义一个组件？
2025-05-30 14:20:28
191
原创 key的原理
面试题：react，Vue中的key有什么作用？（key的内部原理）1.虚拟DOM中key的作用：key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：2.对比规则：（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没变，直接使用之前的真是DOM！若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
2025-04-29 14:49:32
439
原创 列表渲染—基本列表
2.语法：v-for="(item,index) in xxx" :key="yyy"3.可遍历：数组，对象，字符串（用的很少），指定次数（用的很少）原因是 undefined不会显示在页面上。1.用于展示列表数据。value对应着a, k对应着b。遍历指定次数（使用频率最少）
2025-04-28 18:21:23
164
原创 条件渲染案例
注意：v-if可以和：v-else-if,v-else一起使用，但要求结构不能被"打断"3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。template不影响结构，但只能配合v-if使用不能配合v-show。(2)v-else-if="表达式"特点：不展示的DOM元素直接被移除。(3)v-else="表达式"写法：v-show="表达式"（1）v-if="表达式"视觉上的不见了，在控制台中只是被隐藏了。
2025-04-28 16:01:14
196
原创 深度监视简写
写在methods中的函数，计算属性中的get,set，监视属性里的函数。写在const vm = new Vue({})外部。所有Vue管理的函数 都要写成普通函数。没写成箭头函数的this。注意不能写成箭头函数。指向的是window。
2025-04-27 15:45:49
232
原创 深度监视案例
（1）Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以。（2）使用watch时根据数据的具体结构，决定是否采用深度监视。（1）Vue中的watch默认不监测对象内部值的改变（一层）（2）配置deep：true可以监测对象内部值改变（多层）若写成numbers.a 会报错，错误原因是：写的是不合法的Key。a不存在，存在的是isHot，numbers，计算属性info。Vue默认可以监测到多层级改变，但是提供的watch默认不行。当a变化时 控制台并没有监测到。
2025-04-27 14:39:36
374
原创 监视属性watch
不适用watch的情况下 在const vm = new Vue({})外层写。1.当被监视的属性变化时，回调函数自动调用，进行相关操作。（1）new Vue时传入watch配置。因为还没点击按钮，所以olavalue的值是undefined。当不明确的时候，要根据后续一些用户的行为判断时使用第二种情况。（2）通过vm.$watch监视。2.监视的属性必须存在，才能进行监视。当明确要监听的对象时，使用watch的情况。若watch里监听更改为info。
2025-04-25 18:21:37
253
原创 计算属性实现
vm.fullName = XXX 改变对应着 set改变， set改变data中的firstName也会改变，从而页面中随之改变。fullName中的get，Vue已经帮助维护好了，get中的this指向已经是Vue。因为firstName在data中，调用的fullName在computed当中。在控制台打印vm，但并不知道哪个是计算属性，fullName在Vue当中。注意：get不能写成箭头函数，否则this指向的是window。set get是被Vue管理的函数，不能写成箭头函数。
2025-04-25 15:27:45
222
原创 methods案例
只要data中的数据发生改变，Vue会重新解析模板，只有解析模板才能知道哪个位置。控制台打印出来的this，能够获取到当前的firstName和lastName。fullName后不加括号情况下。fullName后加括号情况下。打印一下当前this。
2025-04-25 13:11:39
172
原创 Vue开关关联
change只实现了开关之间的关联，前面关闭后面跟着关闭，i表示item1.is_show,然后使用三目运算符进行判断，进行关联；此段代码只能在蓝色开关关闭后后面开关跟着关闭，但是可以手动打开开关，并不能实现禁用。实现效果：点击蓝色开关的时候，若关闭则后面的开关也跟着关闭且禁用；若开启则后面的开关也跟着打开，并且可以选择性的选择是否使用。需求：需关联是否开启、是否必填，当是否开启关闭时，同步关闭是否必填。通常，你会将 @change 事件与 v-model 一起使用。因此第二个加入的代码实现了禁用功能。
2025-03-17 18:21:37
433
原创 事件修饰符
此处button的点击冒泡到div的点击上，需要阻止事件冒泡；如果div的点击会响应到上一级的div，此时需要在里面的div里添加.stop。如果没用prevent的话点击出现弹窗后，会自动跳转，加上prevent后出现弹窗后不会跳转。3.once:事件只触发一次（常用）scroll指的是滚动条滚动会触发相应条件。2.stop:组织事件冒泡（常用）1.prevent:阻止默认事件（常用）wheel指的是滚轮滚动会触发相应条件。prevent:阻止默认事件（常用）
2025-03-14 18:17:37
205
原创 Vue的事件处理
5.@click="demo"和@click="demo($event)"效果一样。4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。老师学的，然后随手记录一下相关笔记，方便自己以后复习，也希望提供大家一些方便的服务）3.methods中配置的函数，不要用箭头函数！1.使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名；2.事件的回调需要配置在methods对象中，最终会在vm上。如果此处是箭头函数，则this指的是window的实例。
2025-03-14 17:01:38
440
原创 MVVM模型
2.vm身上所有的属性及Vue原型上所有属性，在Vue模版中都可以直接使用。3.vm：视图模型（ViewModel）：Vue实例。1.data中所有的属性，最后都出现在了vm身上。1.M：模型（Model）：data中的数据。2.V：视图（View）：模版代码。
2025-03-08 18:55:32
216
原创 el和data的两种写法
（此内容是跟着B站尚硅谷老师学的，然后随手记录一下相关笔记，方便自己以后复习，也希望提供大家一些方便的服务）Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。如何选择：初学阶段哪种都可以，学到组件时，data必须使用函数式，否则会报错。原因是箭头函数没有自己的this，就会向外找，然后就找到了全局的window。下面的方法也可以显示出想要的结果，其中mount是挂载的意思。若换成箭头函数，则变成如下情况：变成了全局的window。有$符的是给程序员看的。
2025-03-08 18:18:57
359
原创 Vue数据绑定
2.v-model：value可以简写成v-model，因为v-model默认收集的就是value值。备注：1.双向绑定一般都是应用在表单类元素上（如：input、select等）2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上。（此内容是跟着B站尚硅谷老师学的，然后随手记录一下相关笔记）1.单向绑定（v-bind）：数据只能从data流向页面。
2025-03-08 15:53:48
184
原创 Vue模版语法相关知识
举例：v-bind：herf="xxx"或简写成 :herf="xxx",xxx同样要写成js 表达式，且可以直接读取到data中的所有属性。写法：{{ xxx }}，xxx是js表达式，且可以直接读取到data中的所有属性。功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）如果想要显示出链接，我们需要使用v-bind绑定（v-bind可以简写成：）此处我们只是拿v-bind举个例子。功能：用于解析标签体内容。这里我们想要在控制台显示出对应的链接。
2025-03-08 15:05:22
207
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人