- 博客(19)
- 收藏
- 关注
RSS订阅原创 Vue2动态组件
重新创建动态组件的行为通常是非常有用的，但是在有些案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。同样也是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。要求被切换到的组件都有自己的名字，不论是通过组件的。缓存的根组件，也适用于缓存树中的后代组件。强制被切换掉的组件仍然保持“存活”的状态。以上代码中a和b均为两个组件的组件名。
2023-12-14 15:21:48
1753
1
原创 Vue2组件中的插槽
但在某些场景下插槽的内容可能想要，同时使用父组件域内和子组件域内的数据。子组件模板中的表达式只能访问子组件的作用域。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。vue通过使用slot插槽实现。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。插值表达式渲染的内容都是一样的，都是父组件作用域的变量message。在组件标签的标签体中，没有提供任何内容的情况下，可以为插槽指定默认内容。所处的作用域，这和 JavaScript 的词法作用域规则是一致的。
2023-12-14 10:52:47
1041
原创 Vue2组件
一、组件的基本示例组件是可复用的Vue 实例，且带有一个名字：在以下例子中是。因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的配置选项，例如datacomputedwatchmethods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用。二、组件的复用组件可以进行任意次数的复用。
2023-12-12 11:35:29
1161
原创 Vue2中的表单双向数据绑定
2、.number：当输入的内容为数字时，正常data中保存为字符串类型的数字，使用.number后得到的data中的数据为number类型的。多个复选框收集的是设置的value的值，可以通过checkboxArr数组设置初始值（比如[1]）；v-model收集的是input的value值，需要在data中设置初始值message；多单选框收集的是设置的value的值，可以通过pick设置初始值（比如pick为‘1’）；v-model收集的是textarea的value值，需要在data中设置初始值。
2023-11-10 15:12:40
245
1
原创 Vue2的生命周期
可以在钩子 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。以上是需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可。可以对子组件使用v-if，当异步数据请求成功后方开始渲染数据，这样页面渲染的就是最新的数据了。
2023-11-08 17:12:52
222
1
原创 Vue2循环列表v-for
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个。，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。变更方法，顾名思义，会变更调用了这些方法的原始数组。
2023-11-06 14:53:37
1888
1
原创 Vue2条件渲染
1、指令1：v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。2、指令2：v-else-if(2.1.0 新增): 可以连续使用v-else-if必须紧跟在带v-if或者v-else-if的元素之后,，否则它将不会被识别。3、指令3：v-elsev-else元素必须紧跟在带v-if或者v-else-if的元素的之后，否则它将不会被识别。
2023-11-03 15:55:41
106
原创 Vue2的class和style动态样式分析
操作元素的 动态class 列表和动态内联样式是数据绑定的一个常见使用场景。动态class和style有字符串，对象，数组三种形式。class动态样式#对象语法1、我们可以传给一个对象，以动态地切换 class：上面的语法表示active这个 class 存在与否将取决于数据isActive属性的。2、我们可以在对象中传入多个对这样的属性及属性值来动态控制多个class。此外，指令也可以与普通的 class共存。代码如下：data: {
2023-11-03 14:17:29
2027
1
原创 Vue2的ref属性
打标签：...... 定义：被用来给元素或者子组件 注册引用信息（打标签，以获取元素或者子组件实例标签）（id的替代者）使用：应用在html标签上，获取的是真是dom元素；应用在组件标签上，获取的是组件实例对象vc。获取所有具有ref属性的元素或者组件：this.$refs。
2023-10-24 15:47:17
152
原创 vue2的计算属性computed和侦听属性watch
2) 所有不被Vue管理的函数(定时器的回调函数,ajax的回调函数,promise回调函数)最好写成箭头函数;2)侦听器变化的值是data中存在的值，并且不包含return, 在侦听器中可以执行异步操作，并控制操作的频率，这些都是计算属性无法做到的。watch适合处理的场景是：侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）3）vue自身是可以监视对象内部值的变化的，但vue提供的watch默认不可以；4）使用watch时，根据数据的具体结构，决定是否采用深度监视；
2023-10-13 14:52:51
621
原创 vue2中的事件绑定、事件修饰符、键盘事件
(3).指定其他键：@keyup.ctrl.y = "事件名" 4.也可以使用keyCode去指定具体的按键 (不推荐:keyCode特性已经从web中移出，虽然部分浏览器任然支持，但不建议使用) 5.Vue.config.keyCode.自定义键名 = 键码,可以去指定按键别名,(也不太推荐,一般常用地8个就够用了，因为存在不同的键盘keyCode不统完全一) 6.不是所有的按键都有键盘事件；(1).配合keyup使用: 按下修饰符键的同时,再按下其他键,随后释放其他键,事件才被出发;
2023-10-12 17:46:45
308
原创 vue2的数据劫持和数据代理
4.步骤: 1-把vue实例中的data,通过Object.defineProperty的setter和getter进行数据劫持,使得data改写为到_data(使得数据改写为响应式的数据，具有getter和setter);_data中的数据又通过数据代理（也是通过defineProperty的getter和setter实现），放置到vm身上，vm身上同时又具有对应属性的getter和setter。把vue中的data数据改写成_data的具有getter和setter的形式,就是数据劫持。
2023-10-12 17:35:38
123
原创 vue2中data的两种写法
注意：由vue管理的函数，用普通函数，一定不用箭头函数，箭头函数没自己的this，往外会找到window身上，而不再指向Vue实例了。vue2中data的两种写法：对象式、函数式。组件中必须使用函数式，非中间中两种方式都可以。
2023-10-12 15:49:46
1004
原创 Vue中el的2中写法
2、第二种写法：先创建Vue实例，随后再通过vm.$mount('#app')指定el的值；1、第一种写法：new Vue时候配置el属性；
2023-10-11 15:43:32
45
原创 vue2中2中数据绑定的方式
v-model一般都应用在表单类元素上（如input select等等），这些元素都有value属性；v-model:value可以简写为v-model，因为v-model默认收集的就是value的值；写法：v-bind:value="xxx"，简写:value="xxx"；v-model：数据不仅可以从data流向页面，也可以从页面流向data；v-bind：数据只能从data流向页面；
2023-10-11 15:24:49
55
原创 vue2中的模板语法
举例：v-bind:href="xxx"，简写为 :href="xxx" ,其中xxx同样为js表达式，而且可以直接读取data和computed中的属性；写法：{{xxx}} ，其中xxx是js表达式，且可以直接读取到data和computed中的所有属性；备注：vue中有很多指令，其形式都为v-?，例如v-on v-if v-for等等；功能：用于解析标签（包括：标签属性，标签体内容，绑定事件等）功能：用于解析标签体的内容；差值语法{{}} 和 指令语法。
2023-10-11 15:09:37
90
原创 vue的MVVM模型理解
工作原理：如下图，当视图模板中DOM元素发生变化时，VM监听到DOM的变化后，更新模型中对应的数据；当模型中数据发生变化后，MV通过数据绑定，重新更新模板，渲染页面。VM：视图模型（ViewModel）：对应vue实例vm；M：模型（Model），对应data中的数据；V：视图（View），对应模板（页面）；
2023-10-11 11:24:56
67
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人