Vue学习笔记（三）

组件基础（上）

（一）单页面应用程序特点和优缺点（327-328）



Vue3.0-01.SPA - 了解单页面应用程序的概念及特点 P327 - 02:46 · 单页面



（二）Vue的spa创建方式（vite和vue-cli）的特点

vite相关（330-332）



Vue3.0-03.SPA - 了解vue中创建工... P329 - 02:13 · vue的单页面spa项目



（三）组件化开发思想（写入论文）

组件化开发：把页面上可重用的部分封装为组件，方便项目的开发和维护

好处：代码复用性和灵活性提高，提升了开发效率和后期的可维护性

Vue就是一个完全支持组件化开发的框架，vue中规定逐渐的后缀名是.vue。，每个,vue 组件由三部分构成，分别是template（模板结构，必须有！），script（JavaScript行为）和style（组件的样式）

（四）Vue组件的构成

1.template节点：支持指令语法

2.script节点：写JavaScript语句

可以用export default{}写组件，在里面用name定义组件名称（建议每个单词首字母大写），方便调试的时候判断功能；在data(){return{}}里定义渲染需要用的数据；用methods定义事件处理函数；

3.style节点：lang可选

（五）Vue组件的使用

Vue组件引用原则：先注册后使用

1.组件注册

①全局注册：全局任意一个组件内都可用（使用频率高使用）

方法：在main.js文件中导入需要注册的组件，然后调用app.component(“注册完毕后组件的名称”,需要注册的组件的名称），后续就可以在其他组件直接以标签的形式使用注册的全局组件

②局部注册：只能在注册的范围内使用（只在特定情况用到时使用）

方法：在需要使用的组件内的script里先import（跟全局一样），然后再再component节点内部提供键值对（“注册后的名称”：要注册组件）

③命名方式：

kebab-case（短横线命名）eg：my-app

PascalCase（帕斯卡/大驼峰命名法）eg：MyApp

【可以转化为短横线名称使用，适用性更强】

p·s：camelCase是驼峰命名法，注意跟大驼峰的区别

也可以用组件内部name（规范命名）来注册组件，使用“点”方法

2.样式冲突

①原因：每个组件的dom结构都是基于唯一的index.html页面呈现的，每个组件中的样式会影响整个index页面的dom元素

②解决办法：给style节点加上scoped属性来防止样式冲突

3.样式穿透

①使用时机：加了scoped属性后想要某些样式对子②组件生效

方法：使用/deep/深度选择器（在style样式之前）

原理 Vue3中使用:deep(选择器名称)!!!!!!



Vue3.0-22.样式冲突 - deep样式穿透 P348 - 02:45 · /deep/原理



4.props

①提高组件复用性的原则：dom结构、style样式尽量复用；要展示的数据尽量由使用者提供

②props：组件的自定义属性，使用者通过props让父组件向子组件传递要展示的数据，通过数组的形式传递，eg：props["title","author"] 具体有什么属性是定了的，但是属性值可以传递

③父组件传递的属性必须在子组件里头有声明才可以传递并在子组件里面使用

④动态绑定props的值：通过v-bind绑定在父组件的data里面设置的数据，然后传给子组件使用

⑤props的大小写命名：如果使用了camelCase(驼峰命名法)来命名，可以用短横线方式和驼峰方式来为其传递属性，但是在使用的时候必须用定义的名称来对应

5.Class与Style绑定：

使用v-bind动态绑定class属性值和行内style样式

（1）动态绑定class：三元表达式的选项对应的class名

①使用三元表达式。eg：:

②绑定多个class：用数组语法，数组里写多个三元表达式。

eg：:

③简化数组语法臃肿问题：对象语法。

data内部定义一个对象（就是一个类，类似于DTO），里面属性就是class名，对应是否使用。

eg：

data内：classObj：{thin: false, fat: false}

（2）对象语法绑定内联style，冒号+style

里面的css对象名要用驼峰命名法或者短横线（要用引号包裹）；绑定data里头定义的数据