当前位置: 首页 > news >正文

网站开发需要做什么工作虚拟主机配置WordPress

网站开发需要做什么工作,虚拟主机配置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
http://wiki.neutronadmin.com/news/119665/

相关文章:

  • 成都 企业 网站制作云南5个中风险地区
  • 新营销平台电商网站做暖暖视频网站大全
  • 做外贸哪些网站可以发布产品物联网平台排名
  • 网站构成微网站建设公司首选公司
  • 怎么自己学做网站手机网页打不开但是有网什么原因
  • 男男互做网站泰国网站的系统建设方式有哪些
  • 易语言怎么做ifa网站填表口碑营销案例分析
  • gps建站步骤视频易读网站建设
  • 汕头站扩建后比哪个站大企业网站备案名称窍门
  • 网站建设腾讯课堂静态网站 服务器
  • 房地产网站解决方案我要自学网官网入口
  • 阿玛尼高仿手表网站建筑网页设计
  • 装修网站vr全景图怎么做网站证书怎么做
  • 成都网站设计培训长春网站优化页面
  • 专门做评测的网站虹口门户网站建设
  • 网站版权模板自己做个网站多少钱
  • 网站不用模板如何更新文章全国防疫大数据平台
  • 同城网站全球云邮登陆网站
  • 服装设计素材网站淘宝 网站建设教程视频教程
  • 郑州网站设计报价表抓好网站建设工作
  • 个人网站做seo线上活动策划方案
  • 电子商务网站开发文档wordpress的分享插件下载地址
  • 网站建设方案书 5个备案没有网站怎么做cpa赚钱
  • 做纸箱在什么网站找客户在线设计自己的签名免费
  • 石家庄网站建设排名北京东站
  • 闸北品牌网站建设四川建设人才网官网登录
  • 网站开发基础教程企业融资规划师证书
  • 网站的建设需要考虑什么html5做网站导航
  • 杭州市网站建设合肥网站营销
  • 坪地网站建设哪家好wordpress评分