信息网站开发网络公司,wordpress 电商版本,专业做化妆品的网站有哪些,网站公司可以做英文网吗文章目录 章节介绍本章学习目标学习前的准备工作Vue.js文件下载地址 组件的概念及组件的基本使用方式组件的概念组件的命名方式与规范根组件局部组件与全局组件 组件之间是如何进行互相通信的父子通信父子通信需要注意的点 组件的属性与事件是如何进行处理的组件的属性与事件 组… 文章目录 章节介绍本章学习目标学习前的准备工作Vue.js文件下载地址 组件的概念及组件的基本使用方式组件的概念组件的命名方式与规范根组件局部组件与全局组件 组件之间是如何进行互相通信的父子通信父子通信需要注意的点 组件的属性与事件是如何进行处理的组件的属性与事件 组件的内容是如何组合与分发处理的插槽slot内容分发与插槽的注意点 仿Element Plus框架的el-button按钮组件实现实现需求完整代码如下 单文件组件SFC及Vue CLI脚手架的安装使用为什么要使用 SFC如何支持SFC脚手架文件的组成单文件的代码组成 脚手架原理之webpack处理html文件和模块打包安装配置文件 脚手架原理之webpack启动服务器和处理sourcemap启动服务环境处理sourcemap 脚手架原理之webpack处理样式模块和图片模块loader预处理文件支持css模块化图片模块 脚手架原理之webpack处理单文件组件及loader转换处理单文件组件 仿Element Plus的el-rate评分组件实现(单文件组件)插件的安装实现需求总结内容 章节介绍
小伙伴大家好本章将学习Vue3组件应用及单文件组件 - 抽象独立的代码。
本章学习目标
全面了解Vue3组件的相关概念掌握组件之间的通信以及如何封装一个可复用的组件。了解什么是单文件组件SFC以及脚手架的使用和底层实现机制对工程化有一定的认知。
学习前的准备工作
官网地址https://cn.vuejs.org/可配套阅读文档作为学习的辅助资料。
Vue.js文件下载地址
下载地址https://unpkg.com/vue3.2.36/dist/vue.global.js
组件的概念及组件的基本使用方式
组件的概念
组件是带有名称的可复用实例通常一个应用会以一棵嵌套的组件树的形式来组织比如页头、侧边栏、内容区等组件。 组件可以拥有自己独立的结构样式逻辑。这样对于后期的维护是非常方便的。下面给出评分组件与按钮组件的抽离过程。 组件的命名方式与规范
定义组件可通过驼峰、短线两种风格定义调用组件推荐短线方式
div idappmy-head/my-head
/div
script
let app Vue.createApp({data(){return {}}
})
app.component(my-head, {template: headerdiv{{ message }}/divh2logo/h2ulli首页/lili视频/lili音乐/li/ul/header,data(){return {message: hello world}}
});
let vm app.mount(#app);
/script根组件
app容器可以看成根组件所以根组件跟普通组件都具备相同的配置信息例如data、computed、methods等等选项。
div idappmy-head/my-head
/div
script// 根组件let RootApp {data(){return {}}};// MyHead组件let MyHead {template: headerdiv{{ message }}/divh2logo/h2ulli首页/lili视频/lili音乐/li/ul/header};let app Vue.createApp(RootApp)app.component(MyHead, MyHead);let vm app.mount(#app);/script根组件与MyHead组件形成了父子组件。
局部组件与全局组件
局部组件只能在指定的组件内进行使用而全局组件可以在容器app下的任意位置进行使用。
组件之间是如何进行互相通信的
上一个小节中我们了解了组件是可以组合的那么就形成了父子组件父子组件之间是可以进行通信的 那么为什么要通信呢主要是为了让组件满足不同的需求。 父子通信
最常见的通信方式就是父传子或者子传父那么父传子通过props实现而子传父则通过emits自定义事件实现。
div idappmy-head :countcount custom-clickhandleClick/my-head
/div
scriptlet app Vue.createApp({data(){return {count: 10}},methods: {handleClick(data){console.log(data);}}})app.component(MyHead, {props: [count],emits: [custom-click], template: headerdiv{{ count }}/divh2logo/h2ulli首页/lili视频/lili音乐/li/ul/header,mouted(){this.$emit(custom-click, MyHead Data)}});let vm app.mount(#app);
/script父子通信需要注意的点
组件通信的props是可以定义类型的在运行期间会进行检测组件之间的数据是单向流动的子组件不能直接修改传递过来的值但是有时候也需要数据的双向流动可利用v-model来实现
组件的属性与事件是如何进行处理的
有时候组件上的属性或事件并不想进行组件通信那么Vue是如何处理的呢
组件的属性与事件
默认不通过props接收的话属性会直接挂载到组件容器上事件也是如此会直接挂载到组件容器上。可通过 inheritAttrs 选项阻止这种行为通过指定这个属性为false可以避免组件属性和事件向容器传递。可通过 $attrs 内置语法给指定元素传递属性和事件代码如下
div idappmy-head titlehello world classbox clickhandleClick/my-head
/div
scriptlet app Vue.createApp({data(){return {}},methods: {handleClick(ev){console.log(ev.currentTarget);}}})app.component(MyHead, {template: headerh2 v-bind:title$attrs.titlelogo/h2ul v-bind:class$attrs.classli首页/lili视频/lili音乐/li/ul/header,mounted(){console.log( this.$attrs ); // 也可以完成父子通信操作},inheritAttrs: false // 阻止默认的属性传递到容器的操作});let vm app.mount(#app);
/script$attrs也可以实现组件之间的间接通信。
组件的内容是如何组合与分发处理的
在前面的小节中我们学习了组件之间的通信让组件之间实现了不同的需求我们通过给组件添加不同的属性来实现。那么在Vue中如何去传递不同的组件结构呢这就涉及到了组件内容的分发处理。
插槽slot
在Vue中是通过插槽slot方式来进行分发处理的Vue 实现了一套内容分发的 API这套 API 的设计灵感源自 Web Components 规范草案将 元素作为承载分发内容的出口。
div idappmy-headplogo/p/my-head
/div
scriptlet app Vue.createApp({data(){return {message: hello}}})app.component(MyHead, {data(){return {};},template: headerslot/slot/header,});let vm app.mount(#app);
/script组件内的结构即plogo/p会被分发到slot/slot所在的区域。
内容分发与插槽的注意点
渲染作用域 - 插槽只能获取当前组件的作用域具名插槽 - 处理多个插槽的需求通过v-slot指令实现简写为#作用域插槽 - 希望插槽能访问子组件的数据
完整代码如下
div idappmy-headtemplate #titleplogo, {{ message }}, {{ count }}/p/templatetemplate #list{ list }ulli v-foritem in list{{ item }}/li/ul/template/my-head/divscriptlet app Vue.createApp({data(){return {message: hello}}})app.component(MyHead, {data(){return {count: 123,list: [首页, 视频, 音乐]};},template: headerslot nametitle/slothrslot namelist :listlist/slot/header,});let vm app.mount(#app);
/script仿Element Plus框架的el-button按钮组件实现
本小节利用前面学习的组件通信知识来完成一个仿Element Plus框架的el-button按钮组件实现。仿造的地址uhttps://element-plus.org/zh-CN/component/button.html
实现需求
按钮类型按钮尺寸按钮文字添加图标
完整代码如下
style.el-button{display: inline-flex;justify-content: center;align-items: center;line-height: 1;height: 32px;white-space: nowrap;cursor: pointer;background-color: #ffffff;border: 1px solid #dcdfe6;border-color: #dcdfe6;;color: #606266;-webkit-appearance: none;text-align: center;box-sizing: border-box;outline: none;transition: .1s;font-weight: 500;user-select: none;vertical-align: middle;padding: 8px 15px;font-size: 14px;border-radius: 4px;}.el-button--primary{color: white;background-color: #409eff; }.el-button--success{color: white;background-color: #67c23a; }.el-button--large{height: 40px;padding: 12px 19px;font-size: 14px;}.el-button--small{height: 24px;padding: 5px 11px;font-size: 12px;border-radius: 3px;}
/style
link relstylesheet href./iconfont/iconfont.css
script src../vue.global.js/script
div idappel-buttondefault/el-buttonel-button typeprimary sizesmallPrimary/el-buttonel-button typesuccess sizelargeSuccess/el-buttonel-button typesuccess sizelargetemplate #iconi classiconfont iconfangdajing/i/templateSuccess/el-button/div
scriptlet ElButton {data(){return {buttonClass: {el-button: true,[el-button--${this.type}]: this.type ! , [el-button--${this.size}]: this.size ! }}},props: {type: {type: String,default: },size: {type: String,default: }},template: button :classbuttonClassslot nameicon/slotslot/slot/button};let vm Vue.createApp({data(){return {}},components: {ElButton}}).mount(#app);
/script单文件组件SFC及Vue CLI脚手架的安装使用
Vue 单文件组件又名 *.vue 文件缩写为 SFC是一种特殊的文件格式它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。
为什么要使用 SFC
使用 SFC 必须使用构建工具但作为回报带来了以下优点
使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件让本来就强相关的关注点自然内聚预编译模板避免运行时的编译开销组件作用域的 CSS在使用组合式 API 时语法更简单通过交叉分析模板和逻辑代码能进行更多编译时优化更好的 IDE 支持提供自动补全和对模板中表达式的类型检查开箱即用的模块热更新 (HMR) 支持
如何支持SFC
可通过项目脚手架来进行支持Vue支持Vite脚手架和Vue CLI脚手架。这里我们先来介绍Vue CLI的基本使用方式。
# 安装
npm install -g vue/cli
# 创建项目
vue create vue-study
# 选择default
default (babel, eslint)
# 启动脚手架
npm run serve通过localhost:8080进行访问。
脚手架文件的组成
src/main.js - 主入口模块src/App.vue - 根组件src/components - 组件集合src/assets - 静态资源
单文件的代码组成
template - 编写结构script - 编写逻辑style - 编写样式 其中style中的scoped属性可以让样式成为局部的不会影响到其他组件只会作用于当前组件生效同时在脚手架下支持常见的文件进行模块化操作例如图片、样式、.vue文件等。
脚手架原理之webpack处理html文件和模块打包
为了更好的理解项目脚手架的使用我们来学习一下webpack工具因为脚手架的底层就是基于webpack工具实现的。
安装
webpack工具是基于nodejs的所以首先要有nodejs环境其次需要下载两个模块一个是代码中使用的webpack模块另一个是终端中使用的webpack-cli模块。
npm install --save-dev webpack
npm install --save-dev webpack-cli配置文件
通过编写webpack.config.js文件来编写webpack的配置信息完成工具的操作行为。webpack最大的优点就是可以把模块化的JS文件进行合并打包这样可以减少网络请求数具体是通过entry和output这两个字段来完成的。
// webpack.config.js
module.exports {entry: {main: ./src/main.js},output: {path: __dirname /dist,clean: true}
}在终端中进行nodejs脚本build的调用这样去进行webpack执行需要我们自己配置一下package.json的脚本。
npm run build # - webpack这样在项目目录下就产生了一个 /dist 文件夹里面有合并打包后的文件。那么我们该如何预览这个文件呢一般可通过html文件进行引入然后再通过浏览器进行访问。
但是html的编写还需要我们自己引入要预览的JS文件不是特别的方便所以是否可以做到自动完成html的操作呢答案是可以利用webpack工具的插件HtmlWebpackPlugin来实现。
这样HtmlWebpackPlugin插件是需要安装的通过npm i HtmlWebpackPlugin来完成。
// webpack.config.js
module.exports {...,plugins: [new HtmlWebpackPlugin({template: ./public/index.html,title: vue-study}),new VueLoaderPlugin()]
}脚手架原理之webpack启动服务器和处理sourcemap
启动服务环境
目前我们的webpack是没有服务环境的那么如何启动一个web服务器呢可以通过webpack-dev-server模块下载使用即可。
npm install webpack-dev-server安装好后再package.json中配置scripts脚本serve: webpack-dev-server然后运行serve脚本。这样就会启动一个http://localhost:8080的服务。
当开启了web服务后咱们的/dist文件可以不用存在了服务会把dist的资源打入到内存中这样可以大大加快编译的速度所以/dist文件夹可以删除掉了不影响服务的启动和访问。
处理sourcemap
socurcemap启动映射文件的作用可以通过浏览器查找到原始的文件这样对于调试是非常有帮助的配置如下
module.exports {devtool: inline-source-map
}脚手架原理之webpack处理样式模块和图片模块
loader预处理文件
在模块化使用中默认只会支持JS文件那么怎么能够让其他类型的文件例如css文件、图片文件、json文件等等都可以当作模块化进行使用呢这就需要使用loader技术。
支持css模块化
可以通过安装css-loader和style-loader这两个模块来支持css模块化操作。其中css-loader作用是让css文件能够import方式进行使用而style-loader的作用是把css代码抽离到style标签中这样样式就可以在页面中生效。
module.exports {module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader]}]}
}注意数组的顺序是先执行后面再执行前面所以先写style-loader再写css-loader这样就可以通过import ./assets/common.css在main.js中进行使用。
图片模块
同样的情况如果让webpack支持图片模块化也要使用对应的loader不过在最新版本的webpack中已经内置了对图片的处理所以只需要配置好信息就可以支持图片模块化。
module.exports {module: {rules: [...,{test: /\.(png|jpg|gif)$/i,type: asset/resource}]}
}脚手架原理之webpack处理单文件组件及loader转换
处理单文件组件
目前我们的webpack还不支持对.vue文件的识别也不支持.vue模块化使用所以需要安装一些模块来实现。
npm install vue vue/compiler-sfc vue-loadervue模块主要是为了让vue功能生效。vue/complier-sfc是对单文件组件的支持。vue-loader是把单文件组件进行转换。下面看一下webpack的完整配置如下
const HtmlWebpackPlugin require(html-webpack-plugin);
const { VueLoaderPlugin } require(vue-loader);module.exports {entry: {main: ./src/main.js},output: {path: __dirname /dist,clean: true},devtool: inline-source-map,module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader]},{test: /\.(png|jpg|gif)$/i,type: asset/resource},{test: /\.vue$/i,use: [vue-loader]}]},plugins: [new HtmlWebpackPlugin({template: ./public/index.html,title: vue-study}),new VueLoaderPlugin()],mode: development
};通过配置操作后目前已经可以完成一个小型的脚手架支持模块化文件也支持.vue文件的使用还可以启动web服务器。
仿Element Plus的el-rate评分组件实现(单文件组件)
插件的安装
在完成本小节案例之前先安装一下vsCode和chrome的相关插件。
vsCode Plugin : Vue Language Features (Volar)vsCode Plugin : Vue VSCode SnippetsChrome Plugin: Vue.js devtools
这些插件都有助于vue框架的使用。下面就看一下我们要做的案例吧。
前面我们仿Element Plus实现了一个按钮组件不过没有在脚手架的环境下本小节会在脚手架的环境下完成一个仿Element Plus的el-rate评分组件实现。仿造组件的地址https://element-plus.org/zh-CN/component/rate.html
实现需求
最大分值选中分值事件交互
templateul classrateli v-forindex in max :keyindex mouseenter $emit(update:modelValue, index) mouseleave $emit(update:modelValue, initValue) click initValue index i :classrateClass(index)/i/li/ul
/templatescript
import /assets/iconfont/iconfont.cssexport default {data(){return {initValue: this.modelValue}},props: {max: {type: Number,default: 5},modelValue: {type: Number,default: 0}},emits: [update:modelValue],methods: {rateClass(index){return {iconfont: true,icon-xingxing: true,active: this.modelValue index}}}}
/scriptstyle scoped
.rate{display: flex;list-style: none;
}
.rate i{font-size: 30px;color: #ccc;
}
.rate .active{color: blueviolet;
}
/style调用评分组件如下
templateh2hello vue/h2el-rate v-modelvalue1/el-rate{{ value1 }}el-rate :max6 v-modelvalue2/el-rate{{ value2 }}
/templatescript
import ElRateVue from ./components/ElRate.vue
export default {name: App,data(){return {value1: 0,value2: 3}},components: {ElRate: ElRateVue}
}
/script总结内容
全面掌握组件的基本操作通信、属性、事件、内容分发等实现可复用的组件例如按钮组件、评分组件等实现可复用的组件例如按钮组件、评分组件等脚手架原理分析实现一个基于webpack工具的简易脚手架了解Vite脚手架下一代前端开发与构建工具
