vue.js
文章平均质量分 51
stars满天繁星
键盘敲烂,月入过万
展开
-
组件进阶之props校验
props校验大家都知道props属性是在父传子的时候会使用到,那么props在接收到父组件传递的数据时是可以进行校验的。props校验的书写格式//这里的props是一个对象 props:{ //这里的name是来自父组件传递的数据 name:{ //type就是父组件传递数据的类型进行校验 type:'数据类型', //required是必填,代表这里的name属性必须要从父组件传过来,不然就会报错 required:tru原创 2022-05-10 16:25:38 · 589 阅读 · 0 评论 -
vue组件的生命周期和父子组件生命周期执行顺序
什么是组件的生命周期?一个组件从创建到销毁的整个过程就叫生命周期。生命周期函数(钩子函数)生命周期函数是vue框架的内置函数,随着组件的生命周期,自动按序执行。作用特定的时间点,执行某些特定的操作。生命周期的四个阶段初始化阶段该阶段是为了创建组件,里面又有两个钩子函数,beforeCreate、createdbeforeCreat==>创建前created==>创建后,一般用于ajax发送请求挂载阶段该阶段是为了渲染显示组件,里面又有两个钩子函原创 2022-05-09 21:39:08 · 1949 阅读 · 0 评论 -
vue指令之v-model双向绑定
v-model的作用把表单标签的value属性和vue中js的数据变量进行双向绑定。语法v-model="data数据变量"<!--绑定data中的username变量--><input type="text" v-model="username" />什么叫双向数据绑定?数据变化==>视图自动同步当我修改data中的数据变量的时候,视图也会随着变量的变化而改变当我将name变量存放的值改为李四的时候,页面中也会改变。视图..原创 2022-05-08 21:24:16 · 631 阅读 · 0 评论 -
vue的指令之v-bind
v-bind的作用v-bind是动态绑定标签上的属性的值,也可以给标签的class设置动态的值,还可以给标签的style设置动态的值。v-bind动态绑定标签的属性值语法<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素> <!-- 完整写法 --> <!-- v-bind动态绑定标签的属性值 --> <img v-bind:src="imgUrl" alt="">简原创 2022-05-07 19:12:46 · 666 阅读 · 0 评论 -
vue实现组件私有样式和深度选择符
什么叫私有样式?当父组件中导入子组件的时候,如果父组件和子组件都设有样式,那么就会出现样式的冲突,这时候我们就需要借助scoped这个属性来让组件的样式私有。导致样式冲突的原因父组件是会导入子组件的,当webpack进行打包的时候,是会将两个组件打包到一块的,这样也就导致结构、样式和行为都会打包到一个共同的html文件中,那么如果子组件中和父组件同时用到一个样式的话,那么就会导致样式的冲突。通过一张图来加深理解解决方法直接在需要私有化样式的组件中的style标签内部加上sco原创 2022-05-06 20:54:08 · 547 阅读 · 0 评论