Vue框架
Vue3基础：组件化开发
前面简单介绍了vue的两个特性：数据驱动视图，双向数据绑定； 分别就是使用插值表达式或者v-model来操作，并且分享了vue2的过滤器，在vue3中直接采用方法调用或者计算属性的方式来操作即可；还有各种事件修饰符，v-model修饰符和按键修饰符
而页面的一
单页面应用程序SPA
single page application 单页面应用程序SPA，指的是一个web网站只有唯一的一个HTML页面，所有的功能和交互都在这唯一的一个页面完成；单页面应用程序将所有的功能局限在一个web页面中，只是在该页面初始化的时候加载响应的资源(HTML，JavaScript和CSS)
一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或者跳转，而是利用JavaScript动态变换HTML的内容，实现页面与用户的交互【只有一个html网页】
-
良好的交互体验
- SPA的内容改变不需要重新加载整个页面（全局刷新）
- 获取的数据通过AJAX异步实现
- 没有页面之间的跳转，不会出现白屏
-
前后端分离
- 后端专注于API接口，更容易实现API接口的复用
- 前传专注于页面的渲染，有利于前端工程化
-
减轻服务器压力
- 服务器只提供数据，不负责页面的合成和逻辑的处理，吞吐能力提高
SPA缺点
- 首屏加载慢
- 路由懒加载， 代码压缩，CDN加速，网络传输压缩
- 不利于SEO（搜索优化）Search Engine Optimization
- 可以使用SSR服务器端渲染
上面分析了这么多SPA项目的优缺点，那么如何创建一个SPA项目呢？ 这里提供两种方案
- 基于Vite创建SPA项目 ：只是支持Vue3.x， 不是基于webpack，运行速度快，功能小而巧，不建议企业开发使用 -----> 会慢慢变强
- 基于vue-cli创建 ： 都支持，基于webpack，运行速度较慢，功能大而全，建议企业开发的时候使用【高版本变为了@vue】
Vite基本使用
Vite仅支持vue3.x，想要使用vite来快速建立一个vue项目，可以运行如下命令
npm init vite-app XXX //这里建议使用英文
cd XXXX //打开项目
npm install //下载相关的依赖包
npm run dev //执行dev脚本，打包运行程序
创建项目之后装包，npm run dev就可以将项目给跑起来
PS D:\Vueprogramm> npm init vite-app vueTest
Need to install the following packages:
create-vite-app
Ok to proceed? (y)
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in D:\Vueprogramm\vueTest...
Done. Now run:
cd vueTest
npm install (or `yarn`)
npm run dev (or `yarn dev`)
PS D:\Vueprogramm> cd vueTest
PS D:\Vueprogramm\vueTest> npm install
added 285 packages in 1m
PS D:\Vueprogramm\vueTest> npm run dev
> vueTest@0.0.0 dev
> vite
[vite] Optimizable dependencies detected:
vue
Dev server running at:
> Network: http://192.*.56.1:3000/
> Network: http://10.*.206.29:3000/
> Local: http://localhost:3000/
这里成功将项目在网页上运行，打开地址访问即可
项目目录结构
使用HBudilerX打开项目
- node_modules ： 第三方的依赖包
- public ： 公共的静态资源目录 ----- 页面导航上面的小图标就放在这里
<link rel="icon" href="/cfeng.ico" /> <!-- 使用link rel为图标icon，加上href就可以显示 -->
这里的ico的位置一定是在public下面，也就是是公共的资源； 所以普通的项目如果不处理是没有小图标的
- src ： 项目的源代码目录（ 开发者写的所有的代码都要放在这个目录下）
- assets ： 存放项目的所有的静态资源文件（.css、.less）等
- components ： 存放项目中所有的自定义组件
- App.vue ： 项目的根组件
- index.css ： 全局样式表文件
- main.js ： 整个项目的打包文件的入口 【之前的webpack类似的index.js】
- .gitigonore ： Git的忽略文件
- index.html ： SPA单页面应用程序的唯一的HTML页面
- package.json 项目的包管理配置文件
vite项目的运行流程
在工程化的项目中，vue所发挥的功能很easy ： 通过main.js将App.vue渲染到index.html的指定区域中
其中：
- App.vue用来编写待渲染的模板结构
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
//所有的模板文件都要使用template标签来定义，模板文件中的内容就是之后会通过main.js将其放入到index.html的控制的el区域中
- index.html需要预留一个el区域【被vue对象控制】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/cfeng.ico" /> <!-- 使用link rel为图标icon，加上href就可以显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<!-- 这里可以明显看到预留了一个被vue控制的div -->
- main.js把App.vue渲染到index.html的el区域中
vue3.x的vue对象的创建和2.x不同，这点在之前已经分析过，
- 从vue中按需导入createApp函数【函数作用： 创建vue的SPA实例】单页面应用程序
- 导入待渲染的App组件
- 调用那个createApp()函数，返回值为spa实例，【前面说的vue对象:happy:】，用常量spa_app接收，同时把App组件作为参数传递给create函数，表示将App渲染到el区域
- 调用spa_app实例的mout方法，指定vue实际控制的区域
//这里就是之前我们手动写的script脚本
//导入createApp函数，创建spa实例
import { createApp } from 'vue'
//导入待渲染的App组件
import App from './App.vue'
//导入样式表模块,这里应该使用的loader
import './index.css'
//创建实例并渲染APP到指定的el区域
createApp(App).mount('#app')
/*
之前没有定义常量接收spa实例，直接Vue.createApp(),并且没有接收组件来渲染
*/
组件化开发思想
组件化开发： 根据封装的思想，把页面上可以重用的部分封装为组件，从而方便项目的开发和维护【比如把轮播图封装为一个组件，需要用到时候就行】 — ES6模块化； 比如http://www.ibootstrap.cn/展示的效果就是组件化的思想
组件化开发的好处：
- 提高了前端代码的复用性和灵活型
- 提升了代码的开发效率和后期的可维护性
Vue中的组件化开发
vue是一个支持组件化开发的框架，vue中组件的后缀名为.vue，App.vue就是一个根组件
vue组件构成
每一个.vue的组件都是3个部分构成，分别是：
- template -> 组件的模板结构
- script -> 组件的JavaScript行为
- style -> 组件的样式
每一个组件必须含有template模板结构，但是script行为和style样式是可选的，如果不需要美化，就可以省略
template结点
vue规定 ： 每个组件对应的模板结构，都需要定义到< template> 结点中
<template>
<!-- 当前组件的DOM结构，需要定义到template标签的内容 -->
</template>
注意： template 是vue提供的容器标签，只是起到包裹性质的作用， 不会被渲染成真正的DOM元素！！【template标签只是一个包裹作用，不是DOM的标签】 也就是只要通过main.js渲染到el区域中才会生效
但是在template结点中，支持使用之前的vue指令，辅助渲染当前的DOM结构【因为本质上里面的DOM结点都会出现在el区域称为html页面的结点】
<template>
<h1>这是一个APP的自定义组件</h1>
<!-- 使用{{}}插值表达式 -->
<p>生成一个随机数： {{(Math.random()*10).toFixed(3)}}</p>
<!-- 使用v-bind属性绑定指令 -->
<p :title="new Date().toLocaleDateString()">和Cfeng一起学习vue3</p>
<!-- 使用v-on实现事件绑定 -->
<button @click= "console.log('Hello')">事件绑定</button>
</template>
在vue2.x版本中，< template> 结点内的DOM结点只是支持单个根结点，也即是，template中最外层【最高层】只能由一个根节点，多个就会报错
<template>
<div> <!-- 最外层的根节点，vue2中支持一个根节点 -->
<h1>.......</h1>
<h2> </h2>
</div>
</template>
在vue3.x中，支持定义多个根结点
<template>
<h1>.......</h1>
<h2> </h2>
</template>
script结点
vue规定： 组件内的script结点是可选的，可以在script结点中封装组件的JavaScript业务逻辑
<script>
//组件相关的data数据，methods方法，都需要定义到export default所导出的对象中【默认导出】
export default{}
</script>
script默认导出的对象，可以有如下的属性【结点】
- name :可以通过name为当前组件自定义一个名称【首字母大写】，使用vue-tools调试的时候，可以清晰的看到是某一个组件【方便调试】
- data ： vue组件渲染期间需要用到的数据，就定义到data中【vue的dom结点中可以通过vue指定使用data数据，和之前的是相同的】,和之前相同，还是闭包的形式 【 在组件中，不能直接指向数据，会报错，必须return一个对象】
data() {
return {
count: 0
}
- methods ： 组件的事件处理函数，必须定义到methods结点
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0,
str: 'Cfeng, hello'
}
},
methods:{
addNum(){
this.count ++;
}
}
}
//行间进行事件绑定的时候，其中可以是methods中的方法的名称，还可以是一个JavaScript表达式，比如count++; flag = !flag；必须要这种对数值进行变化操作，但是console，alert等语句不行
- props： 属性【类似于java的变量】，放置的变量，props接收的属性值
不可以直接修改， 要想修改就要通过data中定义变量接收props中的数据，然后修改，优先级props > data【下面👇会详细解释】
配置项props接收数据的3中方式：
- 只是接收 ： props:[‘name’,‘age’,‘sex’]
- 接收并限制类型 ： props: {name:Number}
- 限制类型，必要性指定默认值
props:{
"name":{type:String,required:true},
"age":{type:Number,default:18}
}
style结点
vue规定：组件的< style> 结点是可选的，可以在style结点中编写样式美化当前组件的UI结构 ，其实可以给style标签指定lang，lang = ‘css’，属性可选，表示使用的样式语言，默认支持普通的css，可选值还有less，scss
<style lang="css">
h1 {
color: aqua;
}
</style>
使用less（增强的css）会更加方便，因为less支持嵌套，css不支持，并且还可以定义变量
style支持less语法
如果希望使用less语法编写组件的style样式，需要进行配置
- 运行
npm i less -D安装依赖包，提供less语法的编译支持【-d是安装到dev结点之下】 - 在< style>标签上添加lang = 'less’属性，就可以使用
<style lang="less">
h1 {
color: aqua;
i{
color: blue;
}
}
</style>
//css是不支持嵌套的，所以h1内部的都是aqua，但是不会报错，改为less之后就可以显示两种颜色
可以看看整个helloworld组件
<template>
<h1>{{ msg }}<i> cfeng.com</i></h1>
<button @click="addNum">count is: {{ count }}</button><br>
姓名 ：<input type="text" v-model="str"/>
<button @click="str += 'x'">test</button>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0,
str: 'Cfeng, hello'
}
},
methods:{
addNum(){
this.count ++;
}
}
}
</script>
<style lang="less">
h1 {
color: aqua;
i{
color: blue;
}
}
</style>
组件的基本使用
组件的注册
组件之间可以相互的引用： 比如App.vue根组件就引用了HelloWorld.vue这个自定义的子组件，引用之后根组件就可以使用子组件
组件注册有两种方式，分别是全局注册和局部注册
- 全局注册： 可以在全局任何一个组件内使用，比如将轮播图组件swapper.vue注册为全局，那么A.vue和B.vue都可以使用
- 局部组件：局部注册组件，只能在当前的注册范围中使用，比如在A.vue中注册，就只能在A.vue中使用
全局注册：
首先需要在main.js中导入需要注册的组件， 之后使用spa_app实例的component()方法，在全局注册组件，该方法第一个参数为注册成的名称，第二个参数为组件 其中，第一个参数时可省略的，和局部相同，如果省略，应用的时候就是直接时默认导入时的名称，而不是后面的重命名
//1.默认导入需要全局注册的组件HelloWorld.vue
import HelloWorld from './components/HelloWorld.vue'
//2.调用spa_app的实例components()方法，全局注册
spa_app.component("my-hello",HelloWorld)
spa_app.mount("#app")
全局注册组件时，要先注册之后，在mount挂载，不然会报错，Failed to resolve component
注册之后，就可以在任何位置，使用标签的形式来应用组件，标签名就是上面注册的名称;下面就是在根组件APP中应用Hello
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!-- <HelloWorld msg="Hello Vue 3.0 + Vite" /> -->
<my-hello msg = "Hello Vue 3.0+ Vi" /> //这里最好时独目的，双目的不报错
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
// components: {
// HelloWorld
// }
}
</script>
局部注册
上面的注释就是局部注册，就是在需要使用的组件的内部，首先在script中导入待使用的组件； 之后就是默认导出的对象中与data平级的结点components中，注册组件， 注册的时候也可以自定义名称，也可以直接使用原来的名称
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
'my-hello':HelloWorld //直接注册，就HelloWorld即可
}
}
然后再template模板中直接使用标签引用即可
<my-hello msg="Hello Vue 3.0 + Vite" />
全局注册的组件：再任何一个组件中都可以使用全局注册组件；但是局部注册的组件，只能在注册的那个组件中使用
应用场景
如果某些组件在开发期间使用频率高，推荐全局注册，比如swaper
只是在特定情况下使用，推荐局部注册
组件注册的名称
之前说过，组件注册的时候，可以不重命名，直接使用默认导出的名称；也可以重命名成其他的名称，定义组件注册名称的方式有两种
- 使用kebab-case命名法【短横线命名】 比如my-swaper，my-hello ； 使用的时候必须严格按照短横线名称来进行使用
- 使用PasclCase命名法【大驼峰命名法（不是小驼峰）】，例如MyHello，
可以严格按照帕斯卡名称使用，也可以转化为短横线命名名称来使用
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<my-hello msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
'MyHello':HelloWorld
}
}
//这里就不会报错
所以在开发中，最好使用帕斯卡命名法【大驼峰命名法】来对组件进行重命名，适用性更好
通过name属性注册名称
在注册组件期间，处理可以直接提供组件的注册名称之外，还可以把组件的name属性作为注册后组件的名称 【就是上面所演示的】，但是不是和默认导入相同，而是和name属性相同，只是恰好两者相同】
使用name属性注册，相当于使用的帕斯卡命名法
//全局注册
spa_app.component(HelloWord.name,HelloWord)
//局部注册
components: {
HelloWorld
}
组件样式冲突
这里的例子就是App.vue嵌套了HelloWorld.vue,将父组件App.vue渲染到el区域
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<h1>APP.vue的文本内容</h1>
<my-hello msg="Hello Vue 3.0 + Vite" />
</template>
这样根组件和子组件都有标签h1，现在想要将App组件的h1变为aqua颜色，那么加上样式
<style lang="less">
h1 {
color: aqua;
}
</style>
出现了问题： 子组件HelloWord中的h1也变为了aqua，这就产生了样式冲突【没有独立】； 然后交换，父组件不声明样式，子组件使用之前的less样式，发现还是都变化了【…父子相互影响】
组件样式冲突原因
默认情况下，.vue组件中的样式全局生效，因此容易造成组件间的样式冲突 ----- 单页面程序SPA中，所有组件的DOM结构，都是基于唯一的index.html进行运行后呈现，每一个组件的样式，都会影响整个index.html页面的DOM元素
组件样式冲突的解决
为每一个组件分配唯一的自定义属性，在编写组件样式的时候，通过属性选择值来控制样式的作用域； 其实就是原生js中的选择器
比如将子组件HelloWorld的所有的结点按照vue2的格式放在一个根结点div中，为这个div添加属性选择值，定义样式时加上选择器
<template>
<h1 data-v-001>{{ msg }}<i> cfeng.com</i></h1>
<button data-v-001 @click="addNum">count is: {{ count }}</button><br>
姓名 ：<input data-v-001 type="text" v-model="str"/>
<button data-v-001 @click="str += 'x'">test</button>
</template>
这里就给每一个结点加上了属性选择值data-v-001
然后下面编写样式的时候，就可以加上这个属性选择值，和之前的选择器类似，但是还是标签调用，而不是. #等， 加上域[]即可
<style lang="less">
h1[data-v-001] { //这里加上了作用域，就不会影响其他地方的h1标签
color: aqua;
i{
color: blue;
}
}
</style>
style结点的scoped属性
手动像上面一样维护属性选择值很麻烦，并且发现同一个组件使用的都是唯一一个属性选择之并且都相同，所以就加上scoped属性，加上之后，系统自动为该组件所有的结点添加一个唯一的属性选择值，并且声明样式的时候只会作用与当前组件
<template>
<h1>{{ msg }}<i> cfeng.com</i></h1>
<button @click="addNum">count is: {{ count }}</button><br>
姓名 ：<input type="text" v-model="str"/>
<button @click="str += 'x'">test</button>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0,
str: 'Cfeng, hello'
}
},
methods:{
addNum(){
this.count ++;
}
}
}
</script>
<style lang="less" scoped>
h1 {
color: aqua;
i{
color: blue;
}
}
</style>
所以一般情况下，组件之间都是独立的，所以所有的组件都要加上scoped属性
这样就会自动创建一个唯一的scope属性选择值 比如 < h1 data-v-62a9ebed="">Hello Vue 3.0 + Vite cfeng.com< /h1> 组件之间的值不一样，和之前手动写法时类似的；
/deep/样式穿透【vue3为:deep(选择器)】
如果给当前组件的style结点加上了scoped属性，那么当前组件的样式对子组件是不生效的，因为是不同的属性选择值；如果想要生效【比如两者就是样式相同】，那么就可以使用/deep/深度选择器
[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
这样子组件就会向上寻找到父组件中是否有该样式
<style lang="less" scoped>
// /deep/ h1 {
// color: aqua;
// i{
// color: blue;
// }
// }
:deep(h1) {
color: aqua;
}
</style>
组件的props
为了提高组件的复用性，在封装vue组件时要遵守的原则：
- 组件的DOM结构，Style呀要尽量复用
- 组件要展示的数据，尽量由组件使用者提供 之前的App使用HelloWord就传入了msg
为了方便使用者提供数据，vue使用了props
props时组件的自定义属性，组件的使用者可以通过props把数据传送到子组件的内部 供子组件内部进行使用
<my-hello msg = "你好，我是Cfeng"/> //这里就将数据传递给了子组件HelloWord的msg这个props中
props作用： 父组件【使用者】通过props向子组件传递要展示的数据； 这样就可以提高复用性
组件中声明props
在vue组件中，可以将动态的数据声明为props自定义属性【data时常量，其中return的其实都是静态的数据，只是在dev-tools中调试可以修改，实际上没有变化，props类似于java中的变量】，自定义属性可以在当前组件的模板结构中直接被使用template中
<template>
<h1>{{ msg }}<i> cfeng.com</i></h1>
<button @click="addNum">count is: {{ count }}</button><br>
姓名 ：<input type="text" v-model="str"/>
<button @click="str += 'x'">test</button>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
接收的3中形式，没有定义类型var，就是一个数组，定义了类型，和默认值就是json格式
1. 只是接收 ： props:['name','age','sex']
2. 接收并限制类型 ： props: {'name':Number}
3. 限制类型，必要性指定默认值
这里就声明了一个String类型的变量msg，然后App调用的时候传入数据
无法使用未声明的props
如果父组件给子组件传递了未声明的props属性，则这些属性会被忽略，无法被子组件使用
就是要使用的值必须要在props中进行声明，没有声明，data静态量中也没有，就渲染不出结果
动态绑定props的值
props和data的常量是相同用法，比如上面演示的插值表达式，v-bind属性绑定，还有就是v-modle双向数据绑定都是可以的
这里的动态绑定： 就是说props定义的属性也是组件标签的属性，那么就可以像普通标签进行动态的属性绑定，比如在APP.vue中，动态绑定msg 【 这样就可以一环套一环，不用一开始就赋值】
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<h1>APP.vue的文本内容</h1>
<my-hello :msg = 'str'></my-hello>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
str:'Hello Vue 3.0 + Vite1'
}
},
components: {
'MyHello':HelloWorld
}
}
</script>
这样就在data中动态将数据绑定给属性props
props的大小和命名
组件中如果使用cameCase小驼峰命名法声明props属性的名称，【这和之前的大驼峰命名组件相同】，那么就可以使用两种方式绑定值
直接使用驼峰原名，比如myMsg， 还可以使用短横线的方式，比如my-msg【但是只是在传递属性的时候才可以修改，在内部使用，比如插值表达式中必须相同】
Class与Style绑定
在实际开发中经常遇到动态操作元素样式的需求，因此vue允许通过v-bind属性绑定指令，为元素动态绑定class属性值和行内的style样式
动态绑定HTML中的class
可以通过三元表达式，动态为元素绑定class的类名
//比如这里isItalic为boolean类型，判断是否倾斜
<h1 class= 'beblue' :class = "isItalic ? 'italic' : ''">{{ msg }}<i> cfeng.com</i></h1>
<button @click="isItalic = !isItalic">test</button>
data() {
return {
count: 0,
str: 'Cfeng, hello',
isItalic: true
}
},
----下面就是两种不同的样式----
<style lang="less" scoped>
.beblue {
color: aqua;
i{
color: blue;
}
}
.italic {
font-style: italic;
}
</style>
这样简单点击按钮就可以修改样式： 注意：这里的italic一定要加上""，不然就会被认为是一个property，找不到就报错
通过数组语法绑定Html的class
如果元素需要动态绑定多个class的类名，可以通过数组的方式实现
因为一个三元组可以动态添加或者移除一个样式，所以数组中就存放多个三元组就可以实现多个样式的绑定了
//这里在上面的基础上新增一个class
<h1 class= 'beblue' :class = "[isItalic ? 'italic' : '',isDelete ? 'delete' : '']">{{ msg }}<i> cfeng.com</i></h1>
<button @click="isItalic = !isItalic">倾斜</button>
<button @click="isDelete = !isDelete">删除线</button>
data() {
return {
count: 0,
str: 'Cfeng, hello',
isItalic: false,
isDelete: false
}
},
<style lang="less" scoped>
.beblue {
color: aqua;
i{
color: blue;
}
}
.italic {
font-style: italic;
}
.delete {
text-decoration: line-through;
}
</style>
这样点击按钮就可以实现样式的切换
以对象的方式绑定
以数组的方式绑定的缺点就是非常的冗余，模板结构臃肿，此时可以使用对象的语法进行简化\
在data中定义一个对象classObj，其中属性名为class，值为boolean类型
<h1 class= 'beblue' :class = "classObj">{{ msg }}<i> cfeng.com</i></h1>
<button @click="classObj.italic = !classObj.italic">倾斜</button>
<button @click="classObj.delete = !classObj.delete">删除线</button>
data() {
return {
count: 0,
str: 'Cfeng, hello',
classObj:{
italic: false,
delete: false
}
}
<style lang="less" scoped>
.beblue {
color: aqua;
i{
color: blue;
}
}
.italic {
font-style: italic;
}
.delete {
text-decoration: line-through;
}
</style>
需要注意的是，classObj对象中，键值对的键就直接是定义的类名，值为boolean
以对象语法绑定内联的style
:style 的对象语法十分直观 ----- 这是一个JavaScript对象。CSS property名可以用驼峰或者短横线命名
<h1 :style = "{color: XX, font-size: XX, background-color: XX}"></h1>
这样就可以将数据源中的数据动态绑定到标签上
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<h1 :style="{'background-color':backColor,'font-size': fontSize,'font-style': fontStyle}">APP.vue的文本内容</h1>
<my-hello :msg = 'str'></my-hello>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
str:'Hello Vue 3.0 + Vite1',
backColor: 'red',
fontSize: 20,
fontStyle: 'italic'
}
},
components: {
'MyHello':HelloWorld
}
}
</script>
这里的样式名要么直接写驼峰的方式，如果要用原来的名称，必须用单引号包裹；在dev-tool中直接会转换成小驼峰的方式
封装组件案例
这里的案例就是要封装一个MyHeader组件，需求：
- 允许用户自定义title标题
- 允许用户自定义bgcolor颜色
- 允许用户自定义color文本颜色
- MyHeader组件需要在页面顶部进行fixed固定，z-index为990【防止被覆盖】
<template>
<div class="header-container" :style="{backgroundColor:bgcolor,color:color}"> <!-- 这里简单放一个根结点 -->
{{title || 'Header 组件'}}
</div>
</template>
<script>
export default {
name: 'MyHeader',
props: ['title','bgcolor','color']
}
</script>
<style lang="less" scoped>
.header-container {
height: 45px; //一般标题就是45px高度
background-color: pink;
text-align: center;
line-height: 45px;
position: fixed; //就不会浮动
top: 0; //上间距和左间距
left: 0;
width: 100%;
z-index: 999;
}
</style>
然后在App.vue中使用这个组件即可；
<my-header :title = "mytitle" :bgcolor = "mybgcolor" :color = "mycolor"/>
传入属性即可看到完整的效果🌳