建个网站费用大概多少钱一年,成品网站 智能建站,网站开发专业培训,wordpress 中文广告位插件Vue入门 1 Vue概述2 快速入门3 Vue指令3.1 v-bind和v-model3.2 v-on3.3 v-if和v-show3.4 v-for3.5 案例 4 生命周期 1 Vue概述
个完整的html页面包括了视图和数据#xff0c;数据是通过请求 从后台获取的#xff0c;那么意味着我们需要将后台获取到的数据呈现到页面上#… Vue入门 1 Vue概述2 快速入门3 Vue指令3.1 v-bind和v-model3.2 v-on3.3 v-if和v-show3.4 v-for3.5 案例 4 生命周期 1 Vue概述
个完整的html页面包括了视图和数据数据是通过请求 从后台获取的那么意味着我们需要将后台获取到的数据呈现到页面上很明显 这就需要我们使用DOM操作。正因为这种开发流程所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想即让我们开发者更加关注数据而非数据绑定到视图这种机械化的操作。
MVVM:其实是Model-View-ViewModel的缩写有3个单词具体释义如下
Model: 数据模型特指前端中通过请求从后台获取的数据View: 视图用于展示数据的页面可以理解成我们的htmlcss搭建的页面但是没有数据ViewModel: 数据绑定到视图负责将数据Model通过JavaScript的DOM技术将数据展示到视图View上 基于上述的MVVM思想其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分我们将来会学习一款ElementUI框架来替代HTMLCSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架用来替代JavaScript的DOM操作让数据展示到视图的代码开发变得更加的简单。
接下来我们来介绍一下vue。
Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷、更加高效。
2 快速入门
准备vue.js文件。Vue.js v2.7.8 © 2014-2022 Evan You Released under the MIT License.
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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue快速入门/titlescript srcjs/vue.js/script
/headbodydiv 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的指令。 在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为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定
v-bind: 为HTML标签绑定属性值如设置 href , css样式等。当vue对象中的数据模型发生变化时标签的属性值会随之发生变化。
原来的代码:
!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
a :hrefurl链接2/av-model 在表单元素上创建双向数据绑定。什么是双向 vue对象的data属性中的数据变化视图展示会一起变化视图数据发生变化vue对象的data属性中的数据也会随着变化。
data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有表单项标签所以双向绑定一定是使用在表单项标签上的。
input typetext v-modelurl整体代码:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-bind/titlescript srcjs/vue.js/script
/headbodydiv idapp!-- a 链接1/a --!-- a 链接2/a --!-- v-bind是可以省略的,但是:不能省略 --a v-bind:hrefurl链接1/aa :hrefurl链接2/abr!-- input typetext --input typetext v-modelurl/div
/bodyscriptnew Vue({el: #app,data: {url: https://www.baidu.com}})/script/html3.2 v-on
v-on: 用来给html标签绑定事件的。需要注意的是如下2点 v-on语法给标签的事件绑定的函数必须是vue对象种声明的函数 v-on语法绑定事件时事件名相比较js中的事件名没有on
//在js中,时间绑定demo函数
input onclickdemo()//在vue中,时间绑定demo函数
input v-on:clickdemo()!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-on/titlescript srcjs/vue.js/script/headbodydiv idapp!-- 通过v-on指令绑定单击事件 --input typebutton value点我一下 v-on:clickhandle()!-- v-on也存在简写方式即v-on: 可以替换成 --input typebutton value点我一下 clickhandle()/div
/bodyscriptnew Vue({el: #app,data: {},methods: {handle: function () {alert(你点了我一下);}}})/script/html3.3 v-if和v-show
指令描述v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-if-elsev-elsev-show根据条件展示某元素区别在于切换的是display属性的值
!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
/htmlv-show和v-if的作用效果是一样的只是原理不一样。复制上述html代码修改v-if指令为v-show指令 浏览器呈现的效果是一样的但是浏览器中html源码不一样。v-if指令不满足条件的标签代码直接没了而v-show指令中不满足条件的代码依然存在只是添加了css样式来控制标签不去显示。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-if/titlescript srcjs/vue.js/script
/headbodydiv 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
/bodyscriptnew Vue({el: #app,data: {age: 20},methods: {}})
/script/html3.4 v-for
v-for: 从名字我们就能看出这个指令是用来遍历的。其语法格式如下
标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签准备原始代码:
!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
/div3.5 案例 如上图所示我们提供好了数据模型users是数组集合提供了多个用户信息。然后我们需要将数据以表格的形式展示到页面上其中性别需要转换成中文男女等级需要将分数数值转换成对应的等级。 分析 首先我们肯定需要遍历数组的所以需要使用v-for标签然后我们每一条数据对应一行所以v-for需要添加在tr标签上其次我们需要将编号所以需要使用索引的遍历语法然后我们要将数据展示到表格的单元格中所以我们需要使用{{}}插值表达式最后我们需要转换内容所以我们需要使用v-if指令进行条件判断和内容的转换 步骤 使用v-for的带索引方式添加到表格的tr标签上使用{{}}插值表达式展示内容到单元格使用索引1来作为编号使用v-if来判断改变性别和等级这2列的值
准备好的代码:
!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加工后:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-案例/titlescript srcjs/vue.js/script
/headbodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth年龄/thth性别/thth成绩/thth等级/th/trtr aligncenter v-for(user,index) in userstd{{index1}}/tdtd{{user.name}}/tdtd{{user.age}}/tdtdspan v-ifuser.gender1男/spanspan v-ifuser.gender2女/span/tdtd{{user.score}}/tdtdspan v-ifuser.score85优秀/spanspan v-else-ifuser.score60及格/spanspan v-else stylecolor: red;不及格/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请求后台数据
准备的代码:
!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()函数
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},mounted () {alert(vue挂载完成,发送请求到服务端)}})
/script
