Vue学习
文章平均质量分 63
骆 小 洛
前端开发
展开
-
Vue2组件
一、组件的基本示例组件是可复用的Vue 实例,且带有一个名字:在以下例子中是。因为组件是可复用的 Vue 实例,所以它们与new Vue接收相同的配置选项,例如datacomputedwatchmethods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。我们可以在一个通过new Vue创建的 Vue 根实例中,把这个组件作为自定义元素来使用。二、组件的复用组件可以进行任意次数的复用。原创 2023-12-12 11:35:29 · 1195 阅读 · 0 评论 -
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 · 256 阅读 · 1 评论 -
Vue2组件中的插槽
但在某些场景下插槽的内容可能想要,同时使用父组件域内和子组件域内的数据。子组件模板中的表达式只能访问子组件的作用域。插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的。vue通过使用slot插槽实现。现在组件可以用在不同的地方渲染各异的内容,但同时还保证都具有相同的样式。插值表达式渲染的内容都是一样的,都是父组件作用域的变量message。在组件标签的标签体中,没有提供任何内容的情况下,可以为插槽指定默认内容。所处的作用域,这和 JavaScript 的词法作用域规则是一致的。原创 2023-12-14 10:52:47 · 1059 阅读 · 0 评论 -
Vue2中事件处理
vue事件,事件修饰符,按键修饰符,系统修饰符原创 2023-11-09 15:00:59 · 285 阅读 · 1 评论 -
Vue2的生命周期
可以在钩子 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。keep-alive是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。以上是需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可。可以对子组件使用v-if,当异步数据请求成功后方开始渲染数据,这样页面渲染的就是最新的数据了。原创 2023-11-08 17:12:52 · 230 阅读 · 1 评论 -
Vue2循环列表v-for
任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。有时,我们想要显示一个数组经过过滤或排序后的版本,而不实际变更或重置原始数据。在这种情况下,可以创建一个。,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。变更方法,顾名思义,会变更调用了这些方法的原始数组。原创 2023-11-06 14:53:37 · 1948 阅读 · 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 · 112 阅读 · 0 评论 -
Vue2的class和style动态样式分析
操作元素的 动态class 列表和动态内联样式是数据绑定的一个常见使用场景。动态class和style有字符串,对象,数组三种形式。class动态样式#对象语法1、我们可以传给一个对象,以动态地切换 class:上面的语法表示active这个 class 存在与否将取决于数据isActive属性的。2、我们可以在对象中传入多个对这样的属性及属性值来动态控制多个class。此外,指令也可以与普通的 class共存。代码如下:data: {原创 2023-11-03 14:17:29 · 2155 阅读 · 1 评论 -
Vue2的ref属性
打标签:...... 定义:被用来给元素或者子组件 注册引用信息(打标签,以获取元素或者子组件实例标签)(id的替代者)使用:应用在html标签上,获取的是真是dom元素;应用在组件标签上,获取的是组件实例对象vc。获取所有具有ref属性的元素或者组件:this.$refs。原创 2023-10-24 15:47:17 · 161 阅读 · 0 评论 -
vue2的计算属性computed和侦听属性watch
2) 所有不被Vue管理的函数(定时器的回调函数,ajax的回调函数,promise回调函数)最好写成箭头函数;2)侦听器变化的值是data中存在的值,并且不包含return, 在侦听器中可以执行异步操作,并控制操作的频率,这些都是计算属性无法做到的。watch适合处理的场景是:侦听一个数的变化,当该数据变化,来处理其他与之相关数据的变化(该数据影响别的多个数据)3)vue自身是可以监视对象内部值的变化的,但vue提供的watch默认不可以;4)使用watch时,根据数据的具体结构,决定是否采用深度监视;原创 2023-10-13 14:52:51 · 645 阅读 · 0 评论 -
vue2中的事件绑定、事件修饰符、键盘事件
(3).指定其他键:@keyup.ctrl.y = "事件名" 4.也可以使用keyCode去指定具体的按键 (不推荐:keyCode特性已经从web中移出,虽然部分浏览器任然支持,但不建议使用) 5.Vue.config.keyCode.自定义键名 = 键码,可以去指定按键别名,(也不太推荐,一般常用地8个就够用了,因为存在不同的键盘keyCode不统完全一) 6.不是所有的按键都有键盘事件;(1).配合keyup使用: 按下修饰符键的同时,再按下其他键,随后释放其他键,事件才被出发;原创 2023-10-12 17:46:45 · 314 阅读 · 0 评论 -
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 · 133 阅读 · 0 评论 -
vue2中data的两种写法
注意:由vue管理的函数,用普通函数,一定不用箭头函数,箭头函数没自己的this,往外会找到window身上,而不再指向Vue实例了。vue2中data的两种写法:对象式、函数式。组件中必须使用函数式,非中间中两种方式都可以。原创 2023-10-12 15:49:46 · 1124 阅读 · 0 评论 -
Vue中el的2中写法
2、第二种写法:先创建Vue实例,随后再通过vm.$mount('#app')指定el的值;1、第一种写法:new Vue时候配置el属性;原创 2023-10-11 15:43:32 · 57 阅读 · 0 评论 -
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 · 60 阅读 · 0 评论 -
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 · 93 阅读 · 0 评论 -
vue的MVVM模型理解
工作原理:如下图,当视图模板中DOM元素发生变化时,VM监听到DOM的变化后,更新模型中对应的数据;当模型中数据发生变化后,MV通过数据绑定,重新更新模板,渲染页面。VM:视图模型(ViewModel):对应vue实例vm;M:模型(Model),对应data中的数据;V:视图(View),对应模板(页面);原创 2023-10-11 11:24:56 · 74 阅读 · 2 评论