源码网站怎么做,网站推广的四个阶段是指,正规网站建设首选公司,买空间网官网文章目录 Vue1 Vue概述2 快速入门3 Vue指令3.1 v-bind和v-model3.2 v-on3.3 v-if和v-show3.4 v-for3.5 案例 4 生命周期 Element快速使用1 Element介绍2 快速入门3 当前页面中嵌套另一个页面案例代码案例截图 Vue
1 Vue概述
通过我们学习的htmlcssjs已经能够开发美观的页面了… 文章目录 Vue1 Vue概述2 快速入门3 Vue指令3.1 v-bind和v-model3.2 v-on3.3 v-if和v-show3.4 v-for3.5 案例 4 生命周期 Element快速使用1 Element介绍2 快速入门3 当前页面中嵌套另一个页面案例代码案例截图 Vue
1 Vue概述
通过我们学习的htmlcssjs已经能够开发美观的页面了但是开发的效率还有待提高那么如何提高呢我们先来分析下页面的组成。一个完整的html页面包括了视图和数据数据是通过请求 从后台获取的那么意味着我们需要将后台获取到的数据呈现到页面上很明显 这就需要我们使用DOM操作。正因为这种开发流程所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想即让我们开发者更加关注数据而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢
MVVM:其实是Model-View-ViewModel的缩写有3个单词具体释义如下
Model: 数据模型特指前端中通过请求从后台获取的数据View: 视图用于展示数据的页面可以理解成我们的htmlcss搭建的页面但是没有数据ViewModel: 数据绑定到视图负责将数据Model通过JavaScript的DOM技术将数据展示到视图View上
如图所示就是MVVM开发思想的含义 基于上述的MVVM思想其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分我们将来会学习一款ElementUI框架来替代HTMLCSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架用来替代JavaScript的DOM操作让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢可以参考下图对比 在更加复杂的dom操作中vue只会变得更加的简单在上述的代码中我们看不到之前的DOM操作因为vue全部帮我们封装好了。
接下来我们来介绍一下vue。
Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷、更加高效。
2 快速入门
接下来我们通过一个vue的快速入门案例来体验一下vue。
第一步在VS Code中创建名为12. Vue-快速入门.html的文件并且在html文件同级创建js目录将资料/vue.js文件目录下得vue.js拷贝到js目录如下图所示 第二步然后编写script标签来引入vue.js文件代码如下
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script第三步在js代码区域定义vue对象,代码如下
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script在创建vue对象时有几个常用的属性
el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值data: 用来定义数据模型methods: 用来定义函数。这个我们在后面就会用到
第四步在html区域编写视图其中{{}}是插值表达式用来将vue对象中定义的model展示到页面上的
bodydiv idappinput typetext v-modelmessage{{message}}/div
/body浏览器打开效果如图所示 整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typetext v-modelmessage{{message}}/div/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script
/html3 Vue指令
在上述的快速入门中我们发现了html中输入了一个没有学过的属性v-model这个就是vue的指令。
**指令**HTML 标签上带有 v- 前缀的特殊属性不同指令具有不同含义。例如v-ifv-for…
在vue中通过大量的指令来实现数据绑定到视图的所以接下来我们需要学习vue的常用指令如下表所示
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-elsev-else-ifv-show根据条件展示某元素区别在于切换的是display属性的值v-for列表渲染遍历容器的元素或者对象的属性
3.1 v-bind和v-model
我们首先来学习v-bind指令和v-model指令。
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定 v-bind: 为HTML标签绑定属性值如设置 href , css样式等。当vue对象中的数据模型发生变化时标签的属性值会随之发生变化。 接下来我们通过代码来演示。 首先我们在VS Code中创建名为13. Vue-指令-v-bind和v-model.html的文件然后准备好如下代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-bind/titlescript srcjs/vue.js/script
/head
bodydiv idappa 链接1/aa 链接2/ainput typetext /div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script
/html在上述的代码中我们需要给a标签的href属性赋值并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码 a v-bind:hrefurl链接1/a在上述的代码中v-bind指令是可以省略的但是:不能省略所以第二个超链接的代码编写如下 a :hrefurl链接2/a浏览器打开2个超链接都可以点击然后跳转到百度去效果如图所示 注意html属性前面有:表示采用的vue的属性绑定 v-model 在表单元素上创建双向数据绑定。什么是双向 vue对象的data属性中的数据变化视图展示会一起变化视图数据发生变化vue对象的data属性中的数据也会随着变化。 data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有表单项标签所以双向绑定一定是使用在表单项标签上的。编写如下代码 input typetext v-modelurl打开浏览器我们修改表单项标签发现vue对象data中的数据也发生了变化如下图所示 通过上图我们发现我们只是改变了表单数据那么我们之前超链接的绑定的数据值也发生了变化为什么 就是因为我们双向绑定在视图发生变化时同时vue的data中的数据模型也会随着变化。那么这个在企业开发的应用场景是什么 双向绑定的作用可以获取表单的数据的值然后提交给服务器 整体代码如下: !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-bind/titlescript srcjs/vue.js/script
/head
bodydiv idappa v-bind:hrefurl链接1/aa :hrefurl链接2/ainput typetext v-modelurl/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script
/html3.2 v-on
接下来我们学习一下v-on指令。
v-on: 用来给html标签绑定事件的。需要注意的是如下2点 v-on语法给标签的事件绑定的函数必须是vue对象种声明的函数 v-on语法绑定事件时事件名相比较js中的事件名没有on 例如在js中事件绑定demo函数 input onclickdemo()vue中事件绑定demo函数 input v-on:clickdemo()接下来我们通过代码演示。
首先在VS Code中创建名为14. Vue-指令-v-on.html的文件提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-on/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typebutton value点我一下input typebutton value点我一下/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {}})
/script
/html然后我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数代码如下 methods: {handle: function(){alert(你点我了一下...);}
}然后我们给第一个按钮通过v-on指令绑定单击事件代码如下 input typebutton value点我一下 v-on:clickhandle()同样v-on也存在简写方式即v-on: 可以替换成所以第二个按钮绑定单击事件的代码如下
input typebutton value点我一下 clickhandle()完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-on/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typebutton value点我一下 v-on:clickhandle()input typebutton value点我一下 clickhandle()/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {handle: function(){alert(你点我了一下...);}}})
/script
/html3.3 v-if和v-show
指令描述v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-if-elsev-elsev-show根据条件展示某元素区别在于切换的是display属性的值
我们直接通过代码来演示效果。在VS Code中创建名为15. Vue-指令-v-if和v-show.html的文件提前准备好如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-if与v-show/titlescript srcjs/vue.js/script
/head
bodydiv idapp年龄input typetext v-modelage经判定,为:span年轻人(35及以下)/spanspan中年人(35-60)/spanspan老年人(60及以上)/spanbrbr/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{age: 20},methods: {}})
/script
/html其中采用了双向绑定到age属性意味着我们可以通过表单输入框来改变age的值。
需求是当我们改变年龄时需要动态判断年龄的值呈现对应的年龄的文字描述。年轻人我们需要使用条件判断age35,中年人我们需要使用条件判断age35 age60,其他情况是老年人。所以通过v-if指令编写如下代码
年龄input typetext v-modelage经判定,为:
span v-ifage 35年轻人(35及以下)/span
span v-else-ifage 35 age 60中年人(35-60)/span
span v-else老年人(60及以上)/span浏览器打开测试效果如下图 v-show和v-if的作用效果是一样的只是原理不一样。复制上述html代码修改v-if指令为v-show指令代码如下
年龄input typetext v-modelage经判定,为:
span v-showage 35年轻人(35及以下)/span
span v-showage 35 age 60中年人(35-60)/span
span v-showage 60老年人(60及以上)/span打开浏览器展示效果如下所示 可以发现浏览器呈现的效果是一样的但是浏览器中html源码不一样。v-if指令不满足条件的标签代码直接没了而v-show指令中不满足条件的代码依然存在只是添加了css样式来控制标签不去显示。
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-if与v-show/titlescript srcjs/vue.js/script
/head
bodydiv idapp年龄input typetext v-modelage经判定,为:span v-ifage 35年轻人(35及以下)/spanspan v-else-ifage 35 age 60中年人(35-60)/spanspan v-else老年人(60及以上)/spanbrbr年龄input typetext v-modelage经判定,为:span v-showage 35年轻人(35及以下)/spanspan v-showage 35 age 60中年人(35-60)/spanspan v-showage 60老年人(60及以上)/span/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{age: 20},methods: {}})
/script
/html3.4 v-for
v-for: 从名字我们就能看出这个指令是用来遍历的。其语法格式如下
标签 v-for变量名 in 集合模型数据{{变量名}}
/标签需要注意的是需要循环那个标签v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引那么v-for指令遍历的语法格式如下
标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签接下来我们再VS Code中创建名为16. Vue-指令-v-for.html的文件编写代码演示提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-for/titlescript srcjs/vue.js/script
/head
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{addrs:[北京, 上海, 西安, 成都, 深圳]},methods: {}})
/script
/html然后分别编写2种遍历语法来遍历数组展示数据代码如下 div idappdiv v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index 1}} : {{addr}}/div
/div浏览器打开呈现如下效果 3.5 案例 需求 如上图所示我们提供好了数据模型users是数组集合提供了多个用户信息。然后我们需要将数据以表格的形式展示到页面上其中性别需要转换成中文男女等级需要将分数数值转换成对应的等级。 分析 首先我们肯定需要遍历数组的所以需要使用v-for标签然后我们每一条数据对应一行所以v-for需要添加在tr标签上其次我们需要将编号所以需要使用索引的遍历语法然后我们要将数据展示到表格的单元格中所以我们需要使用{{}}插值表达式最后我们需要转换内容所以我们需要使用v-if指令进行条件判断和内容的转换 步骤 使用v-for的带索引方式添加到表格的tr标签上使用{{}}插值表达式展示内容到单元格使用索引1来作为编号使用v-if来判断改变性别和等级这2列的值 代码实现 首先创建名为17. Vue-指令-案例.html的文件提前准备如下代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-案例/titlescript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth年龄/thth性别/thth成绩/thth等级/th/tr/table/div/bodyscriptnew Vue({el: #app,data: {users: [{name: Tom,age: 20,gender: 1,score: 78},{name: Rose,age: 18,gender: 2,score: 86},{name: Jerry,age: 26,gender: 1,score: 90},{name: Tony,age: 30,gender: 1,score: 52}]},methods: {},})
/script
/html然后在tr上添加v-for进行遍历以及通过插值表达式{{}}和v-if指令来填充内容和改变内容其代码如下 tr aligncenter v-for(user,index) in userstd{{index 1}}/tdtd{{user.name}}/tdtd{{user.age}}/tdtdspan v-ifuser.gender 1男/spanspan v-ifuser.gender 2女/span/tdtd{{user.score}}/tdtdspan v-ifuser.score 85优秀/spanspan v-else-ifuser.score 60及格/spanspan stylecolor: red; v-else不及格/span/td
/tr其完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-案例/titlescript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth年龄/thth性别/thth成绩/thth等级/th/trtr aligncenter v-for(user,index) in userstd{{index 1}}/tdtd{{user.name}}/tdtd{{user.age}}/tdtdspan v-ifuser.gender 1男/spanspan v-ifuser.gender 2女/span/tdtd{{user.score}}/tdtdspan v-ifuser.score 85优秀/spanspan v-else-ifuser.score 60及格/spanspan stylecolor: red; v-else不及格/span/td/tr/table/div/bodyscriptnew Vue({el: #app,data: {users: [{name: Tom,age: 20,gender: 1,score: 78},{name: Rose,age: 18,gender: 2,score: 86},{name: Jerry,age: 26,gender: 1,score: 90},{name: Tony,age: 30,gender: 1,score: 52}]},methods: {},})
/script
/html4 生命周期
vue的生命周期指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示
状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数 其中我们需要重点关注的是**mounted,**其他的我们了解即可。
mounted挂载完成Vue初始化成功HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-for/titlescript srcjs/vue.js/script
/head
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {}})
/script
/html然后我们编写mounted声明周期的钩子函数与methods同级代码如下
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},mounted () {alert(vue挂载完成,发送请求到服务端)}})
/script浏览器打开运行结果如下我们发现自动打印了这句话因为页面加载完成vue对象创建并且完成了挂在此时自动触发mounted所绑定的钩子函数然后自动执行弹框。 Element快速使用
1 Element介绍
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。
Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比可以发现ElementUI提供的各式各样好看的按钮 ElementUI的学习方式和我们之前的学习方式不太一样对于ElementUI我们作为一个后台开发者只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中并且做一些修改即可。
其官网地址https://element.eleme.cn/#/zh-CN
2 快速入门
1.创建页面并在页面引入Element 的css、js文件 和 Vue.js
script src./plugins/vue/vue.js/script
link relstylesheet href./plugins/element-ui/index.css /
script src./plugins/element-ui/index.js/script
script src./plugins/axios/axios.min.js/script2.创建Vue核心对象
Element 是基于 Vue 的所以使用Element时必须要创建 Vue 对象
script//定义Vue对象new Vue({el: #app,})
/script3.官网复制Element组件代码 4.整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./plugins/vue/vue.js/scriptlink relstylesheet href./plugins/element-ui/index.css /script src./plugins/element-ui/index.js/script
/head
bodydiv idappel-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-rowel-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-rowel-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-rowel-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
script//定义Vue对象new Vue({el: #app,})
/script/html5.运行结果 3 当前页面中嵌套另一个页面
当想在一个页面中嵌套另一个页面时就可以使用iframe标签
例如
iframe :srccurrentPage width100% height100% frameborder0/iframe案例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./plugins/vue/vue.js/scriptlink relstylesheet href./plugins/element-ui/index.css/script src./plugins/element-ui/index.js/script
/head
bodydiv idappel-container!-- 头--el-header styletext-align: right; font-size: 12pxel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item查看/el-dropdown-itemel-dropdown-item新增/el-dropdown-itemel-dropdown-item删除/el-dropdown-item/el-dropdown-menu/el-dropdownspan王小虎/span/el-headerel-container!-- 侧边--el-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1 clickgotoPage选项1/el-menu-itemel-menu-item index1-2 clickgotoPage2选项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选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-aside!-- 主--el-mainiframe :srccurrentPage width100% height100% frameborder0/iframe/el-main/el-container/el-container
/div
/body
script//定义Vue对象new Vue({el: #app,data: {currentPage: ./VueTest.html},methods: {gotoPage: function () {this.currentPage ./test3.html},gotoPage2: function () {this.currentPage 属性控制方式.html},}})
/script/html案例截图
