vue组件 |
您所在的位置：网站首页 › 帕斯卡图像 › vue组件 |
vue组件
在main.js中进行渲染
组件化开发的思想
组件化开发：指的是根据封装的思想，把页面上重复使用到的部分封装为组件，从而方便项目的开发和维护。 组件化开发的好处：提高前端代码的复用性和灵活性、提升了开发效率和后期的可维护性。 vue中的组件化开发：vue是一个完全支持组件化开发的框架。vue中规定组件的后缀名是 .vue。App.vue的本质就是一个vue的组件。 vue组件组成结构例如 ：
有template部分，是组件的模板结构，它是必须存在的，其他的两个部分script和style是可选的，所以里面也可以不写东西。 甚至可以直接不写script和style。像这样子：
细讲template节点
❗ 只起到包裹性质的作业。
在template中定义根节点 在vue3中，可以定义多个根节点，而vue2的template中所有内容必须包含在同一个根节点中，且有且仅有这一个根节点。 细讲script节点
作用和html里的script作用是一样的，但是写法有些不一样噢。 用法展示：
路由声明，export default导出，name设置组件名称，data节点，components组件，methods方法。 tip： 1.组件的名称name属性指向的是当前组件的名称（建议是把每个单词的首字母大写）作用: 演示：
组件的数据
vue组件渲染期间需要用到的数据，可以定义在data节点中
格式：（记得要加return ,data指向一个函数，函数直接返回对象的形式噢）
data{
return {
a：xxx,
}
}
不加return，直接指向数据的话会报错的 3. method节点组件中的事件处理函数，必须定义到methods节点中。可以带参数，无需写参数类型，直接写接收参数的参数名称。
细讲style节点
默认为css语法，和之前写javaweb是一样的，给不同选择器定义不同样式。 如果用less语法
less语法可嵌套，展示：
注意这里的 标签中还有个 _标签
less语句，可以在h1的样式中再设置它里面的 i 的样式。 得到的效果：
✅组件的基本使用
-组件的注册
那么如何全局注册组件？ 声明路由后，用app.component(‘标签形式’，组件名字) tip：自定义的标签形式建议两个单词之间用-连字符连接。
在main.js中声明了全局组件之后，直接以标签的形式进行使用即可！
那么如何局部注册组件？
在vue文件中声明路由（导入），组件。 实际使用展示：
那么全局注册和局部注册有什么区别？ 显而易见
对应的应用场景：
组件命名规范
帕斯卡命名法，比如我命名为MyApp，那么我既可以这样子使用，也可以这样子使用，适用性更强，所以开发中推荐使用帕斯卡命名法。 也可以通过name属性注册主键，直接文件名.name即可。
这样子写会更加的方便，统一。
组件之间样式冲突问题
如何解决？ 前面写项目的过程中碰到过这个问题，已经解决了。当时是为style添加了scoped属性将样式规定是局部样式解决的。 当然，也可以像写web项目时一样，设置不同的class，通过class选择器，分辨不同的css样式。
但是有时候我们希望部分样式可以在自组件中起作用，这个时候就需要用到 /deep/ 样式穿透
⚠
组件的props
什么是组件的props？
可以通过props把要的值传递给组件，这点是尊的很妙哉！ ❗❗❗
如何使用props给组件传值？ 需要在组件内部声明props！通过props数组的方式声明。
实际运用展示：
子组件
根组件 如何动态绑定props的值？ 实际操作展示：
props的大小写命名？ 和帕斯卡类似，也是可以变通的。但只是在传递属性时可以改变写法，在当前组件中必须严格按照定义的名称使用。
动态绑定HTML的class
基本操作：
以 数组语法 绑定HTML的class
不同三元表达式之间用逗号隔开，整体用方括号包裹。 以 对象语法 绑定HTML的class
当对象作为class的值时，内部元素为true时运用该元素作为类名之一，反之不作为。 以 对象语法 绑定内联的 style
总结
_ Original: https://blog.csdn.net/m0_62742402/article/details/127812337Author: STATICHIT静砸Title: vue组件 相关阅读 Title: R语言合并数据框的行与列大家好，这里是想做生信大恐龙🦖的生信小白。先赞后看养成习惯，还没关注的小伙伴点点关注不迷路。今天熟悉数据操作中的数据合并。 rbind()（按列合并应该有相同的行数）和cbind()函数分别用于按行或按列合并给定向量、矩阵、数据框，并创建新矩阵或数据框（不了解的小伙伴可以看我之前写的R语言的数据结构 https://blog.csdn.net/ouyangk1026/article/details/121582431）。 rbind() cbind()举个列子😶🌫️： rbind(c(1,2,3),c(4,5,6)) [,1] [,2] [,3] [1,] 1 2 3 [2,] 4 5 6 cbind(c(1,2,3),c(4,5,6)) [,1] [,2] [1,] 1 4 [2,] 2 5 [3,] 3 6也可以用来向已存在的数据中添加数据，举个列子😶🌫️： a matrix(c(1,2,3,4,5,6),2,3) a [,1] [,2] [,3] [1,] 1 3 5 [2,] 2 4 6 cbind(a,c(5,7))得到的结果如下： cbind(a,c(5,7)) [,1] [,2] [,3] [,4] [1,] 1 3 5 5 [2,] 2 4 6 7使用rbind（）和cbind（）函数要求等长，意思就是如果按列合并，数据的长度是列数的正整数倍数。 merge()函数具有cbind()函数与rbind()函数的功能，而且可以根据相同的行名和列名合并数据。 merge( x y by all = FALSE )举个列子😶🌫️： math data.frame(name=c("迪迦","泰罗","赛文"),math=c(76,84,64)) english data.frame(name=c("泰罗","赛文","迪迦"),english=c(95,59,42))可以看到我故意将姓名一行顺序改变了，然后我们用merge()函数将两个数据框合并。 (c merge(math,english)) name math english 1 迪迦 76 42 2 赛文 64 59 3 泰罗 84 95可以看到merge()函数将题目按想同列名进行了合并。如果我们使用cbind()函数，看看是什么效果？ (d cbind(math,english)) name math name english 1 迪迦 76 泰罗 95 2 泰罗 84 赛文 59 3 赛文 64 迪迦 42cbind()函数直接将他们合并，即没排序也没消除相同列。接下来讲一下all的使用，举个列子😶🌫️： math data.frame(name=c("迪迦","泰罗","赛文"),math=c(76,84,64)) english data.frame(name=c("艾斯","赛文","迪迦"),english=c(95,59,42))如果我们按照之前的使用方法，将会得到下面的结果： (c merge(math,english)) name math english 1 迪迦 76 42 2 赛文 64 59接下来我们使用all： (c merge(math,english,all = TRUE)) name math english 1 艾斯 NA 95 2 迪迦 76 42 3 赛文 64 59 4 泰罗 84 NA好啦！今天我们讲了数据的合并，讲了三个函数，分别时：cbind(),rbind(),merge()。希望小伙伴们可以多多练习。都看到这里了，请给大恐龙🦖点点赞点点关注！下次再见啦！ Original: https://blog.csdn.net/ouyangk1026/article/details/122363301Author: Bio大恐龙Title: R语言合并数据框的行与列 原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/205788/ 转载文章受原作者版权保护。转载请注明原作者出处！ |
【本文地址】