怎么样做淘宝优惠券网站,网站建设的功能描述,网站开发成功案例,百度关键词统计Vue3
Vue是一款用于构建用户界面的渐进式的JavaScript框架。
Vue由2部分组成#xff1a;Vue核心包#xff0c;Vue插件包
Vue核心包包含#xff1a;声明式渲染#xff0c;组件系统。
Vue插件包#xff1a;VueRouter#xff08;客户端路由#xff09;#xff0c;Vuex…Vue3
Vue是一款用于构建用户界面的渐进式的JavaScript框架。
Vue由2部分组成Vue核心包Vue插件包
Vue核心包包含声明式渲染组件系统。
Vue插件包VueRouter客户端路由Vuex/Pinia状态管理Webpack/Vite构建工具 Vue的开发形式分为2种基于核心包的局部开发整站开发。
基于核心包的局部开发只使用Vue核心包的局部开发。
整站开发使用整个Vue生态进行开发。 框架一套完整的项目解决方案用于快速构建项目。
框架的优点提升前端开发效率。
框架的缺点需要记忆框架的使用规则。 1.Vue快速入门
1准备工作
1.引入Vue模块 在html文件中 body .......... ......... script type‘module’ import {createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js /script /body 2.创建Vue程序的应用示例控制视图的元素 在html文件中 body .......... ......... script type‘module’ import {createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ }) /script /body 3.准备元素div被Vue控制。 body .......... ......... script type‘module’ import {createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ }).mount(#app); // 只针对与id为app的元素进行挂载 /script /body 示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlevue入门/title
/head
bodydiv idapph1{{ message }}/h1h1{{ count }}/h1/divh1{{ count }}/h1script typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({ data() {return {message: Hello Vue!,count:100}}}).mount(#app); // 只针对与id为app的元素进行挂载/script/body
/html
运行结果 2.Vue常用指令
在html标签上不同指令实现不同功能。
1.v-for
用于列表渲染遍历容器中的元素/对象。 使用方法 tr v-for(item, index) in itemList :keyitem.id{{item}}/tr 遍历itemList数组 遍历出来的元素是item 元素的索引是index :key为遍历出来的元素添加唯一标识 [ ]是数组 { }是对象 示例
table!-- 表头 --thead!-- 定义一行 --trth序号/thth姓名/thth性别/thth头像/thth职位/thth入职日期/thth最后操作时间/thth操作/th/tr/theadtbodytr v-for(e, index) in empList :keye.id!-- index表示索引从0开始 序号表示从1开始 --td{{index1}}/td td{{e.name}}/tdtd{{e.gender1?男:女}}/td!-- 插值表达式不能出现在标签内部 --tdimg classavatarsrc{{e.image}} :alt{{e.name}}/tdtd{{e.position}}/td //需要条件判断 td{{e.entryDate}}/tdtd{{e.lastOpTime}}/tdtdbutton typebutton修改/buttonbutton typebutton删除/button/td/tr/tbody/tablescript typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({ data() {return {searchFrome:{//封装用户输入的查询条件。name:,gender:,position:},empList: [ //定义数组{id:1, //定义一个对象name:张三,gender: 1,avatar: img/y2.png,position: 1,entryDate: 2020-01-01,lastOpTime: 2025-01-01},{id:2,name:李四,gender: 2,avatar: img/y2.png,position: 2,entryDate: 2020-01-01,lastOpTime: 2025-01-01},{id:3,name:王五,gender: 1,avatar: img/y2.png,position: 3,entryDate: 2020-01-01,lastOpTime: 2025-01-01}]} },// data后面添加方法methods:{search:function(){// 将搜索条件输出到控制台console.log(this.searchFrome);},clear:function(){// 清空搜索条件this.searchFrome{name:,gender:,position:};}}}).mount(#all); // 只针对与id为all的元素进行挂载/script 头像一栏显示不正确。原因插值表达式不能出现在标签内部。需要使用v-bind进行修饰。 职位一栏不能正确显示性别一栏只有男或者女可以使用三元运算符但是职业有5种无法使用三元运算符应使用v-if/v-else-if/v-else或者v-show进行处理。
2.v-bind 动态为标签属性绑定值插值表达式不能在标签内使用 使用方法: v-bind:属性变量 :属性变量 tdimg classavatar v-bind:srce.image :alte.name/td 可保证图片的正确显示。 !-- 表格主体内容 --tbodytr v-for(e, index) in empList :keye.idtd{{index 1}}/tdtd{{e.name}}/tdtd{{e.gender 1?男 : 女}}/td!-- 插值表达式是不能出现在标签内部 --tdimg classavatar v-bind:srce.image :alte.name/tdtd{{e.entrydate}}/tdtd{{e.updatetime}}/tdtd classaction-buttonsbutton typebutton编辑/buttonbutton typebutton删除/button/td/tr/tbody/table
3.v-if/v-else-if/v-else 用来控制元素的显示与隐藏。 基于条件判断来控制创建或移除元素节点条件渲染 使用场景网页运行时进行处理要么显示要么不显示。
示例
bodydiv idcontainer!-- 表格展示区 --table!-- 表头 --theadtrth序号/thth姓名/thth性别/thth头像/thth职位/thth入职日期/thth最后操作时间/thth操作/th/tr/thead!-- 表格主体内容 --tbodytr v-for(e, index) in empList :keye.idtd{{index 1}}/tdtd{{e.name}}/tdtd{{e.gender 1?男 : 女}}/td!-- 插值表达式是不能出现在标签内部 --tdimg classavatar v-bind:srce.image :alte.name/td!-- v-if: 控制元素的显示与隐藏 --tdspan v-ife.job 1班主任/spanspan v-else-ife.job 2讲师/spanspan v-else-ife.job 3学工主管/spanspan v-else-ife.job 4教研主管/spanspan v-else-ife.job 5咨询师/spanspan v-else其他/span/tdtd{{e.entrydate}}/tdtd{{e.updatetime}}/tdtd classaction-buttonsbutton typebutton编辑/buttonbutton typebutton删除/button/td/tr/tbody/table v-else-if必须在v-if之后可有多个v-else-if。 v-else必须在v-if/v-else-if之后。 4.v-show 用来控制元素的显示与隐藏。与v-if/v-else-if/v-else有所区别。 v-if/v-else-if/v-else和v-show的区别 v-if网页运行时处理不满足条件直接不渲染此元素。 v-show通过css样式渲染v-show的所有元素满足条件显示不满足条件隐藏。 基于css样式的display来控制显示与隐藏。 使用场景频繁切换显示与隐藏两种状态如下拉框。
示例
bodydiv idcontainer!-- 表格展示区 --table!-- 表头 --theadtrth序号/thth姓名/thth性别/thth头像/thth职位/thth入职日期/thth最后操作时间/thth操作/th/tr/thead!-- 表格主体内容 --tbodytr v-for(e, index) in empList :keye.idtd{{index 1}}/tdtd{{e.name}}/tdtd{{e.gender 1?男 : 女}}/td!-- 插值表达式是不能出现在标签内部 --tdimg classavatar v-bind:srce.image :alte.name/td!-- v-show: 控制元素的显示与隐藏 --tdspan v-showe.job 1班主任/spanspan v-showe.job 2讲师/spanspan v-showe.job 3学工主管/spanspan v-showe.job 4教研主管/spanspan v-showe.job 5咨询师/span/td td{{e.entrydate}}/tdtd{{e.updatetime}}/tdtd classaction-buttonsbutton typebutton编辑/buttonbutton typebutton删除/button/td/tr/tbody/table/div
/body
5.v-model v-model用于获取表单项数据。 v-on用于事件绑定。 通常v-model和v-on配合起来使用。 v-model中绑定的变量必须在data中定义 v-model使用方法 body script typemodule import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js; createApp({ data() { return { searchFrome:{//封装用户输入的查询条件。 name:, gender:, position: } } }).mount(#all); // 只针对与id为all的元素进行挂载 /script /body name--姓名 gender--性别 position--职位 具体代码
body
div idall!-- 显示采集到的数据 --!-- {{searchFrome}} --form classsearch-from action/search methodpostlabel forname姓名/labelinput typetext namename idname v-modelsearchFrome.name placeholder请输入姓名label forgender性别/labelselect namegender idgenser v-modelsearchFrome.genderoption value/optionoption value1男/optionoption value2女/option/selectlabel forposition职位/labelselect nameposition idposition v-modelsearchFrome.positionoption value/optionoption value1班主任/optionoption value2讲师/optionoption value3学工主管/optionoption value4教研主管/optionoption value5咨询师/option/selectbutton typebutton v-on:clicksearch查询/buttonbutton typebutton clickclear清空/button/formscript typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({ data() {return {searchFrome:{//封装用户输入的查询条件。name:,gender:,position:}} }}).mount(#all); // 只针对与id为all的元素进行挂载/script
/body 在标签中使用 input typetext namename idname v-modelsearchFrome.name placeholder请输入姓名 将姓名文本栏中输入数据导入data中的searchFrome.name 在标签中使用 select namegender idgenser v-modelsearchFrome.gender 将性别文本栏中输入数据导入data中的searchFrome.gender 在标签中使用: select nameposition idposition v-modelsearchFrome.position 将职业文本栏中输入数据导入data中的searchFrome.position 效果如下 6.v-on 使用方法 v-on:click函数名 或 click函数名 为html标签绑定事件添加事件监听。
通常与v-model配合使用。 button typebutton v-on:clicksearch查询/buttonbutton typebutton clickclear清空/button
将查询与清空按钮绑定事件监听。 整体代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title员工管理/titlestyle#all{width: 80%;margin: 0 auto;}.navbar{background-color: rgb(170, 170, 170);display: flex;/*弹性布局*/justify-content: space-between;/*左右对齐*/align-items: center;/*垂直居中*/padding: 5px;}.navbar h1{margin: 0;/*去掉h1标签的默认间距*/font-weight: bold;/*加粗*/color: white;/*白色文字*/font-family: 楷体;}.navbar a{color: white;font-weight: bold;/*加粗*/text-decoration: none;/*取消下划线*/align-items: center;/*垂直居中*/}.search-from{display: flex;flex-wrap: nowrap;/*换行*/align-items: center;/*垂直居中*/gap: 10px;/*间距*/margin-top: 10px;margin-bottom: 10px;}.search-from input,select{padding: 5px;width: 220px;}table{width: 100%;border-collapse: collapse;}th,td{border: 1px solid rgb(0, 0, 0);/*边框*/padding: 5px;text-align: center;}.footer{background-color: #b5b3b3;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}/style
/head
body
div idalldiv classnavbarh1tlias 智能学习辅助系统/h1a href退出登录/a/div!-- 显示采集到的数据 --!-- {{searchFrome}} --form classsearch-from action/search methodpostlabel forname姓名/labelinput typetext namename idname v-modelsearchFrome.name placeholder请输入姓名label forgender性别/labelselect namegender idgenser v-modelsearchFrome.genderoption value/optionoption value1男/optionoption value2女/option/selectlabel forposition职位/labelselect nameposition idposition v-modelsearchFrome.positionoption value/optionoption value1班主任/optionoption value2讲师/optionoption value3学工主管/optionoption value4教研主管/optionoption value5咨询师/option/selectbutton typebutton v-on:clicksearch查询/buttonbutton typebutton clickclear清空/button/formtable!-- 表头 --thead!-- 定义一行 --trth序号/thth姓名/thth性别/thth头像/thth职位/thth入职日期/thth最后操作时间/thth操作/th/tr/theadtbodytr v-for(e, index) in empList :keye.id!-- index表示索引从0开始 序号表示从1开始 --td{{index1}}/td td{{e.name}}/tdtd{{e.gender1?男:女}}/td!-- 插值表达式不能出现在标签内部 --tdimg classavatar v-bind:srce.avatar :alte.name/td!-- td{{e.position}}/td //需要条件判断 --tdspan v-ife.position1班主任/spanspan v-else-ife.position2讲师/spanspan v-else-ife.position3学工主管/spanspan v-else-ife.position4教研主管/spanspan v-else-ife.position5咨询师/spanspan v-else其他/span/tdtd{{e.entryDate}}/tdtd{{e.lastOpTime}}/tdtdbutton typebutton修改/buttonbutton typebutton删除/button/td/tr/tbody/tablefooter classfooterpcyy有限公司/pp版权时间2025.5.9/p/footer
/divscript typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({ data() {return {searchFrome:{//封装用户输入的查询条件。name:,gender:,position:},empList: [ //定义数组{id:1, //定义一个对象name:张三,gender: 1,avatar: img/y2.png,position: 1,entryDate: 2020-01-01,lastOpTime: 2025-01-01},{id:2,name:李四,gender: 2,avatar: img/y2.png,position: 2,entryDate: 2020-01-01,lastOpTime: 2025-01-01},{id:3,name:王五,gender: 1,avatar: img/y2.png,position: 3,entryDate: 2020-01-01,lastOpTime: 2025-01-01}]} },// data后面添加方法methods:{search:function(){// 将搜索条件输出到控制台console.log(this.searchFrome);},clear:function(){// 清空搜索条件this.searchFrome{name:,gender:,position:};}}}).mount(#all); // 只针对与id为all的元素进行挂载/script/body
/html
