网站开发需要做什么工作,虚拟主机配置WordPress,wordpress生成静态网页,wordpress+移动客户端Vue#xff1a; Vue是一套构建用户界面的渐进式前端框架。只关注视图层#xff0c;并且非常容易学习#xff0c;还可以很方便的与其它库或已有项目整合。通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。视图#xff1a;负责页面渲染#xff0c;主要由HTMLCSS构…Vue Vue是一套构建用户界面的渐进式前端框架。只关注视图层并且非常容易学习还可以很方便的与其它库或已有项目整合。通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。视图负责页面渲染主要由HTMLCSS构成。脚本负责业务数据模型Model以及数据的处理逻辑。 特点 易用在有HTMLCSSJavaScript的基础上快速上手。灵活简单小巧的核心渐进式技术栈足以应付任何规模的应用。性能20kbmingzip运行大小、超快虚拟DOM、最省心的优化。 Vue的快速入门
开发步骤
下载和引入vue.js文件。编写入门程序。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title快速入门/title
/head
body
!-- 视图 --
div iddivdiv姓名{{name}}/divdiv职位{{classRoom}}/divbutton onclickhi()打招呼/buttonbutton onclickupdate()修改状态/button
/div
/body
script srcvue.js/script
script// 脚本let vm new Vue({el: #div,data: {name: 韩信,classRoom: 王者峡谷},methods: {study() {alert(this.name 正在 this.classRoom 被追杀!);}}});//定义打招呼方法function hi() {vm.study();}//定义修改职业function update() {vm.classRoom 中单;}
/script
/htmlVue快速入门详解
Vue 核心对象每一个 Vue 程序都是从一个 Vue 核心对象开始的。
let vm new Vue({选项列表;
});选项列表 el选项用于接收获取到页面中的元素。(根据常用选择器获取)。data选项用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。methods选项用于定义方法。方法可以直接通过对象名调用this代表当前Vue对象。 数据绑定 在视图部分获取脚本部分的数据{{变量名}} Vue 常用指令 指令是带有 v- 前缀的特殊属性不同指令具有不同含义。例如 v-htmlv-ifv-for。 使用指令时通常编写在标签的属性上值可以使用 JS 的表达式。 常用指令 文本插值
v-html把文本解析为 HTML 代码。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文本插值/title
/head
bodydiv iddivdiv{{msg}}/divdiv v-htmlmsg/div/div
/body
script srcjs/vue.js/script
scriptnew Vue({el:#div,data:{msg:bHello Vue/b}});
/script
/html绑定属性
v-bind为 HTML 标签绑定属性值。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title绑定属性/titlestyle.my{border: 1px solid red;}/style
/head
bodydiv iddiva v-bind:hrefurl百度一下/abra :hrefurl百度一下/abrdiv :classcls我是div/div/div
/body
script srcjs/vue.js/script
scriptnew Vue({el:#div,data:{url:https://www.baidu.com,cls:my}});
/script
/html条件渲染 v-if条件性的渲染某元素判定为真时渲染,否则不渲染。 v-else条件性的渲染。 v-else-if条件性的渲染。 v-show根据条件展示某元素区别在于切换的是display属性的值。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title条件渲染/title
/head
bodydiv iddiv!-- 判断num的值对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 --div v-ifnum % 3 0div1/divdiv v-else-ifnum % 3 1div2/divdiv v-elsenum % 3 2div3/divdiv v-showflagdiv4/div/div
/body
script srcjs/vue.js/script
scriptnew Vue({el:#div,data:{num:1,flag:false}});
/script
/html列表渲染
v-for列表渲染遍历容器的元素或者对象的属性。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title列表渲染/title
/head
bodydiv iddivul!--name in names 的意思就是 遍历names赋值给name--li v-forname in names{{name}}/lili v-forvalue in student{{value}}/li/ul/div
/body
script srcjs/vue.js/script
scriptnew Vue({el:#div,data:{names:[张三,李四,王五],student:{name:张三,age:23}}});
/script
/html事件绑定
v-on为 HTML 标签绑定事件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title事件绑定/title
/head
bodydiv iddivdiv{{name}}/divbutton v-on:clickchange()改变div的内容/buttonbutton v-on:dblclickchange()改变div的内容/buttonbutton clickchange()改变div的内容/button/div
/body
script srcjs/vue.js/script
scriptnew Vue({el:#div,data:{name:黑马程序员},methods:{change(){this.name 传智播客}}});
/script
/html表单绑定 表单绑定 v-model在表单元素上创建双向数据绑定。 双向数据绑定 更新data数据页面中的数据也会更新。 更新页面数据data数据也会更新。 MVVM模型(ModelViewViewModel)是MVC模式的改进版 在前端页面中JS对象表示Model页面表示View两者做到了最大限度的分离。 将Model和View关联起来的就是ViewModel它是桥梁。 ViewModel负责把Model的数据同步到View显示出来还负责把View修改的数据同步回Model。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单绑定/title
/head
bodydiv iddivform autocompleteoff姓名input typetext nameusername v-modelusernamebr年龄input typenumber nameage v-modelage/form/div
/body
script srcjs/vue.js/script
scriptnew Vue({el:#div,data:{username:张三,age:23}});
/script
/htmlElement 基本使用 Element网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。 使用Element前提必须要有Vue。 组件组成网页的部件例如超链接、按钮、图片、表格等等~ Element官网https://element.eleme.cn/#/zh-CN
Element快速入门
开发步骤
下载 Element 核心库。引入 Element 样式文件。引入 Vue 核心 js 文件。引入 Element 核心 js 文件。编写按钮标签。通过 Vue 核心对象加载元素。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title快速入门/titlelink relstylesheet href../element-ui/lib/theme-chalk/index.cssscript srcvue.js/scriptscript srchttps://unpkg.com/vue/dist/vue.js/scriptscript src../element-ui/lib/index.js/script
/headbody¬
div iddivel-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/el-rowbrel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowbrel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button/el-rowbrel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row
/div/body
scriptnew Vue({el: #div});
/script
/html基础布局
将页面分成最多 24 个部分自由切分。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href../element-ui/lib/theme-chalk/index.cssscript srcvue.js/scriptscript src../element-ui/lib/index.js/scriptstyle.el-row {/* 行距为20px */margin-bottom: 20px;}.bg-purple-dark {background: red;}.bg-purple {background: blue;}.bg-purple-light {background: green;}.grid-content {/* 边框圆润度 */border-radius: 4px;/* 行高为36px */min-height: 36px;}/style
/head
bodydiv iddivel-rowel-col :span24div classgrid-content bg-purple-dark/div/el-col/el-rowel-rowel-col :span12div classgrid-content bg-purple/div/el-colel-col :span12div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span8div classgrid-content bg-purple/div/el-colel-col :span8div classgrid-content bg-purple-light/div/el-colel-col :span8div classgrid-content bg-purple/div/el-col/el-rowel-rowel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple-light/div/el-col/el-rowel-rowel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-colel-col :span4div classgrid-content bg-purple/div/el-colel-col :span4div classgrid-content bg-purple-light/div/el-col/el-row
/div
/body
scriptnew Vue({el: #div});
/script
/html容器布局
将页面分成头部区域、侧边栏区域、主区域、底部区域。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href../element-ui/lib/theme-chalk/index.cssscript srcvue.js/scriptscript src../element-ui/lib/index.js/script
/head
style.el-header, .el-footer {background-color: #d18e66;color: #333;text-align: center;height: 100px;}.el-aside {background-color: #55e658;color: #333;text-align: center;height: 580px;}.el-main {background-color: #5fb1f3;color: #333;text-align: center;height: 520px;}
/style
body
div iddivel-containerel-header头部区域/el-headerel-containerel-aside width200px侧边栏区域/el-asideel-containerel-main主区域/el-mainel-footer底部区域/el-footer/el-container/el-container/el-container
/div
/body
scriptnew Vue({el: #div});
/script
/html表单组件
由输入框、下拉列表、单选框、多选框等控件组成用以收集、校验、提交数据。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href../element-ui/lib/theme-chalk/index.cssscript srcvue.js/scriptscript src../element-ui/lib/index.js/script
/headbody
div iddivel-form :modelruleForm :rulesrules refruleForm label-width100px classdemo-ruleFormel-form-item label活动名称 propnameel-input v-modelruleForm.name/el-input/el-form-itemel-form-item label活动区域 propregionel-select v-modelruleForm.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间 requiredel-col :span11el-form-item propdate1el-date-picker typedate placeholder选择日期 v-modelruleForm.date1stylewidth: 100%;/el-date-picker/el-form-item/el-colel-col classline :span2-/el-colel-col :span11el-form-item propdate2el-time-picker placeholder选择时间 v-modelruleForm.date2 stylewidth: 100%;/el-time-picker/el-form-item/el-col/el-form-itemel-form-item label即时配送 propdeliveryel-switch v-modelruleForm.delivery/el-switch/el-form-itemel-form-item label活动性质 proptypeel-checkbox-group v-modelruleForm.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源 propresourceel-radio-group v-modelruleForm.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式 propdescel-input typetextarea v-modelruleForm.desc/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)立即创建/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item/el-form
/div
/body
scriptnew Vue({el: div,data: {ruleForm: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: },rules: {name: [{required: true, message: 请输入活动名称, trigger: blur},{min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur}],region: [{required: true, message: 请选择活动区域, trigger: change}],date1: [{type: date, required: true, message: 请选择日期, trigger: change}],date2: [{type: date, required: true, message: 请选择时间, trigger: change}],type: [{type: array, required: true, message: 请至少选择一个活动性质, trigger: change}],resource: [{required: true, message: 请选择活动资源, trigger: change}],desc: [{required: true, message: 请填写活动形式, trigger: blur}]}},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!);} else {console.log(error submit!!);return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}});
/script
/html表格组件
用于展示多条结构类似的数据可对数据进行编辑、删除或其他自定义操作。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href../element-ui/lib/theme-chalk/index.cssscript srcvue.js/scriptscript src../element-ui/lib/index.js/script/head
bodydiv iddivtemplateel-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-columnel-table-columnlabel操作width180el-button typewarning编辑/el-buttonel-button typedanger删除/el-button/el-table-column/el-table/template
/div
/body
scriptnew Vue({el: #div,data: {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}});
/script
/html顶部导航栏组件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title快速入门/titlelink relstylesheet href../element-ui/lib/theme-chalk/index.cssscript srcvue.js/scriptscript src../element-ui/lib/index.js/script/head
body
div iddivdiv classline/divel-menu:default-activeactiveIndex2classel-menu-demomodehorizontalselecthandleSelectbackground-color#545c64text-color#fffactive-text-color#ffd04bel-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-itemel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项1/el-menu-itemel-menu-item index2-4-2选项2/el-menu-itemel-menu-item index2-4-3选项3/el-menu-item/el-submenu/el-submenuel-menu-item index3 disabled消息中心/el-menu-itemel-menu-item index4a hrefhttps://www.ele.me target_blank订单管理/a/el-menu-item/el-menu
/div
/body
scriptnew Vue({el: #div});
/script
/html侧边导航栏组件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title快速入门/titlelink relstylesheet href../element-ui/lib/theme-chalk/index.cssscript srcvue.js/scriptscript src../element-ui/lib/index.js/script/head
body
div iddivel-col :span3el-menudefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleClosebackground-color#545c64text-color#fffactive-text-color#ffd04bel-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item/el-menu/el-col
/div
/body
scriptnew Vue({el: #div});
/script
/html综合案例 学生列表
头部区域的实现
实现思路
头部效果实现。侧边栏和主区域效果实现。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title学生列表/titlelink relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscript srcjs/vue.js/scriptscript srcelement-ui/lib/index.js/scriptstyle.el-header{background-color: #545c64;}.header-img{width: 100px;margin-top: 20px;}/style
/head
bodydiv iddivel-container!-- 头部 --el-header classel-headerel-containerdivel-image srcimg/export.png classheader-img/el-image/divel-menu:default-activeactiveIndex2modehorizontalselecthandleSelectbackground-color#545c64text-colorwhiteactive-text-color#ffd04bstylemargin-left: auto;el-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-item/el-submenuel-menu-item index3a href学生列表.html target_self首页/a/el-menu-item/el-menu/el-container/el-header/el-container/div
/body
scriptnew Vue({el:#div});
/script
/html侧边栏区域的实现
!-- 侧边栏区域 --
el-container styleheight: 580px; border: 1px solid #eeeel-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1]el-submenu index1template slottitlei classel-icon-menu/i学工部/templateel-menu-item-groupel-menu-item index1-1i classel-icon-help/i在校学生管理/el-menu-itemel-menu-item index1-2i classel-icon-help/i学生升级/留级/el-menu-itemel-menu-item index1-3i classel-icon-help/i学生就业情况/el-menu-item/el-menu-item-group/el-submenuel-submenu index2template slottitlei classel-icon-menu/i咨询部/templateel-menu-item-groupel-menu-item index2-1i classel-icon-help/i意向学生管理/el-menu-itemel-menu-item index2-2i classel-icon-help/i未报名学生管理/el-menu-itemel-menu-item index2-3i classel-icon-help/i已报名学生管理/el-menu-item/el-menu-item-group/el-submenuel-submenu index3template slottitlei classel-icon-menu/i教研部/templateel-menu-item-groupel-menu-item index3-1i classel-icon-help/i已有课程管理/el-menu-itemel-menu-item index3-2i classel-icon-help/i正在研发课程管理/el-menu-itemel-menu-item index3-3i classel-icon-help/i新技术课程管理/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-aside/el-container主区域的实现
主区域和侧边栏区域放在一起
!-- 主区域 --
el-containerel-mainb stylecolor: red;font-size: 20px;学生列表/bdiv stylefloat:rightel-button typeprimary添加学生/el-button/divel-table :datatableDatael-table-column propdate label日期 width140/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propaddress label地址/el-table-columnel-table-columnlabel操作width180el-button typewarning编辑/el-buttonel-button typedanger删除/el-button/el-table-column/el-table/el-main
/el-container在vue中定义data
scriptnew Vue({el:#div,data:{tableData:[{date:2088-08-08,name:张三,address:北京市昌平区},{date:2088-08-08,name:李四,address:北京市昌平区},{date:2088-08-08,name:王五,address:北京市昌平区},]}});
/script
