vue-day4

一：单页面应用程序

单页面应用程序简称SPA，指一个web网站中只有唯一的一个HTML页面

快速创建SPA项目

1：vite创建       仅支持vue3x  运行快   小巧  不建议在企业级开发中使用 

2：vue-cli创建        运行慢   功能全面 建议在企业级项目中使用

1：vite的使用

创建一个vite项目:执行一下命令

npm init vite-app 项目名称

cd 项目名称

npm install

npm run dev

2:vite项目的运行流程

通过main.js把App.vue渲染到index.html的指定区域中

1：app.vue用来编写带渲染的模板结构

2：index.html中要预留一个el区域

3：main.js把把App.vue渲染到index.html的指定区域中

二：组件化思想

.vue组件由3部分构成，分别是

template -> 组件的模板结构

script -> 组件的js行为

style -> 组件的样式

每个组件中必须包含template模板结构，而script行为和style样式是可选的

1：script中的name节点

name节点定义组件的名字

 

 2：script中的data节点

vue组件渲染期间需要用到的数据，可以定义在data中

 3：script中的methods节点

组件中事件的处理函数，必须定义到methods中

4：style节点

当前组件的ul样式结构

 属性ang值 ，css，less，scss

 让style支持less语法

1：运行npm install less -D

2：在<style>标签上添加lang=”less“

三：组件化基本使用

1：组件的注册

组件的注册分为两种”全局注册“和”局部注册“

全局注册的组件可以在全局任何一个组件内使用

局部注册的组件，只能在当前注册的范围内使用

注册全局组件，在main.js中注册

 在App.vue中使用

在组件中注册局部组件

在注册组件时可以用组件的name属性来作为组件调用时的名称

2：组件之间的样式冲突

 scoped属性

 /deep/样式穿透

如果当前组件的style节点添加了scoped属性，则当前组件的样式对其子组件不生效，要是想让当前组件的样式在其子组件中生效，可以使用/deep/深度选择器

注意：/deep/是vue2x使用方法，在vue3x中使用   :deep()   代替/deep/

3：组件的props

props是组件的自定义属性，组件的使用者可以通过props把数据传递到子组件内部，供子组件内部使用

作用：父组件通过自定义属性向子组件传递要展示的数据，子组件用props接收这些自定义属性

在封装vue组件时可以把动态的数据项声明为props自定义属性。自定义属性可以在当前模板中直接使用

 

4：Class与Style绑定

在实际开发中会有动态操作元素的需求，vue允许开发者通过v-bind属性绑定指令，为元素动态绑定class属性的值的行内style样式

可以通过三元表达式动态绑定类名

 1，以数组语法为标签绑定class

当要为元素动态绑定多个类名时可以用数组语法

 

缺点会导致模板结构臃肿

 2，以对象语法为标签绑定class

解决数组语法导致的模板结构臃肿

 

 3，以对象语法绑定内联的style