4a网站建设公司,网站开发项目资金运用明细,重庆建设工程信息网网站,wordpress永久免费1. Vue概述
Vue.js#xff08;读音 /vjuː/, 类似于 「view」#xff09; 是一套构建用户界面的 「渐进式框架」。与其他重量级框架不同的是#xff0c;Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层#xff0c;并且非常容易学习#xff0c;非常容易与其它库… 1. Vue概述
Vue.js读音 /vjuː/, 类似于 「view」 是一套构建用户界面的 「渐进式框架」。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现「响应的数据绑定」和「组合的视图组件」。
框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷、更加高效。
MVVM(Model-View-ViewModel)具体释义如下 Model: 数据模型特指前端中通过请求从后台获取的数据 View: 视图用于展示数据的页面可以理解成我们的htmlcss搭建的页面但是没有数据 ViewModel: 视图模型数据绑定到视图负责将数据Model通过JavaScript的DOM技术将数据展示到视图View上
如图所示就是MVVM开发思想的含义 基于上述的MVVM思想其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分我们将来会学习一款ElementUI框架来替代HTMLCSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架用来替代JavaScript的DOM操作让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢可以参考下图对比 在更加复杂的dom操作中vue只会变得更加的简单在上述的代码中我们看不到之前的DOM操作因为vue全部帮我们封装好了。
2. 快速入门
接下来我们通过一个vue的快速入门案例来体验一下vue。
第一步在VS Code中创建名为1. Vue-快速入门.html的文件并且在html文件同级创建js目录如下图所示 第二步编写script标签来引入vue.js文件代码如下
script srcjs/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 nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/title!-- 1.引入vue.js文件 --script srcjs/vue.js/script
/head
body!-- 编写视图 --div idappinput typetext v-modelmessage{{message}}/div
/body
!-- 2.在JS代码区域,创建Vue核心对象定义数据模型 --
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, v-else-if, v-else条件性的渲染某元素判定为true时渲染,否则不渲染v-show根据条件展示某元素区别在于切换的是display属性的值v-for列表渲染遍历容器的元素或者对象的属性
3.1 v-bind
「指令」「作用」v-bind为HTML标签绑定属性值如设置 href , css样式等 v-bind: 为HTML标签绑定属性值如设置 href , css样式等。当vue对象中的数据模型发生变化时标签的属性值会随之发生变化。 编写如下代码 a v-bind:hrefurl链接1/a在上述的代码中v-bind指令是可以省略的 a :hrefurl链接2/a浏览器打开2个超链接都可以点击然后跳转到百度去效果如图所示 代码如下 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令v-bind/titlescript srcjs/vue.js/script/headbodydiv idapp!-- v-bind为HTML标签绑定属性值 --!-- 两种绑定方式 --a v-bind:hrefurl链接1/aa :hrefurl链接2/a/div/bodyscriptnew Vue({el:#app,data:{url:https://space.bilibili.com/349567482}})/script/html「注意html属性前面有:表示采用的vue的属性绑定」
3.2 v-model
「指令」「作用」v-model在表单元素上创建双向数据绑定 v-model 在表单元素上创建双向数据绑定。什么是双向 vue对象的data属性中的数据变化视图展示会一起变化 视图数据发生变化vue对象的data属性中的数据也会随着变化。 data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢「只有表单项标签所以双向绑定一定是使用在表单项标签上的」。编写如下代码 input typetext v-modelurl打开浏览器我们修改表单项标签发现vue对象data中的数据也发生了变化如下图所示 通过上图我们发现我们只是改变了表单数据那么我们之前超链接的绑定的数据值也发生了变化为什么
就是因为我们双向绑定在视图发生变化时同时vue的data中的数据模型也会随着变化。
「双向绑定的作用可以获取表单的数据的值然后提交给服务器」
代码如下: !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令v-model/titlescript srcjs/vue.js/script/headbodydiv idappa v-bind:hrefurl链接1/a!-- v-model在表单元素上创建双向数据绑定 --input typetext v-modelurl/div/bodyscriptnew Vue({el:#app,data:{url:https://www.baidu.com}})/script/html3.3 v-on
「指令」「作用」v-on为HTML标签绑定事件 v-on语法给标签的事件绑定的函数必须是vue对象种声明的函数 v-on语法绑定事件时事件名相比较js中的事件名没有on 例如在js中事件绑定demo函数 input onclickdemo()vue中事件绑定demo函数 input v-on:clickdemo()在vue对象的methods属性中定义事件绑定时需要的handle()函数代码如下 methods: {handle: function(){alert(你点击了一下...);}
}然后给第一个按钮通过v-on指令绑定单击事件代码如下
!-- 两种方式 --
input typebutton value点击 v-on:clickhandle()
input typebutton value点我一下 clickhandle()效果如图所示 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令v-on/titlescript srcjs/vue.js/script
/head
bodydiv idapp!-- v-on为HTML标签绑定事件 --input typebutton value点击 v-on:clickhandle()input typebutton value点击 clickhandle()/div
/body
scriptnew Vue({el:#app,data:{},methods:{handle:function(){alert(你点击了一下...)}}})
/script
/html3.4 v-if
指令描述v-if, v-else-if, v-else条件性的渲染某元素判定为true时渲染,否则不渲染
需求当我们改变年龄时需要动态判断年龄的值呈现对应的年龄的文字描述。
年轻人需要使用条件判断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浏览器打开测试效果如下图 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令v-if/titlescript srcjs/vue.js/script
/head
bodydiv idapp!-- v-if, v-else-if, v-else条件性的渲染某元素判定为true时渲染,否则不渲染 --年龄input typetext v-modelage判断为span v-ifage 35年轻人(35及以下)/spanspan v-else-ifage35 age 60中年人(35-60)/spanspan v-elseage60老年人(60及以上)/span/div
/body
scriptnew Vue({el:#app,data:{age:25},methods:{}})
/script
/html3.5 v-show
「指令」「作用」v-show根据条件展示某元素区别在于切换的是display属性的值
v-show和v-if的作用效果是一样的只是原理不一样。代码如下
年龄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 nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令v-show/titlescript srcjs/vue.js/script
/head
bodydiv idapp!-- v-show根据条件展示某元素区别在于切换的是display属性的值 --年龄input typetext v-modelage判断为span v-showage 35年轻人(35及以下)/spanspan v-showage35 age 60中年人(35-60)/spanspan v-showage60老年人(60及以上)/span/div
/body
scriptnew Vue({el:#app,data:{age:25},methods:{}})
/script
/html3.6 v-for
「指令」「作用」v-for列表渲染遍历容器的元素或者对象的属性
v-for: 用来遍历变量。其语法格式如下
标签 v-for变量名 in 集合模型数据{{变量名}}
/标签遍历时需要使用索引那么v-for指令遍历的语法格式如下
标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签编写2种遍历语法来遍历数组展示数据代码如下 div idappdiv v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index 1}} : {{addr}}/div
/div浏览器打开呈现如下效果 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令v-for/titlescript srcjs/vue.js/script
/head
bodydiv idapp!-- v-for列表渲染遍历容器的元素或者对象的属性 --div v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index1}}:{{addr}}/div/div
/body
scriptnew Vue({el:#app,data:{addrs:[北京,上海,广州,深圳]},methods:{}})
/script
/html3.7 案例 需求 如上图所示我们提供好了数据模型users是数组集合提供了多个用户信息。然后我们需要将数据以表格的形式展示到页面上其中性别需要转换成中文男女等级需要将分数数值转换成对应的等级。 分析 首先我们肯定需要遍历数组的所以需要使用v-for标签然后我们每一条数据对应一行所以v-for需要添加在tr标签上其次我们需要将编号所以需要使用索引的遍历语法然后我们要将数据展示到表格的单元格中所以我们需要使用{{}}插值表达式最后我们需要转换内容所以我们需要使用v-if指令进行条件判断和内容的转换 步骤 使用v-for的带索引方式添加到表格的tr标签上 使用{{}}插值表达式展示内容到单元格 使用索引1来作为编号 使用v-if来判断改变性别和等级这2列的值 代码实现 准备如下代码 !DOCTYPE htmlhtml 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/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/tr!-- vue指令渲染 --tr alignceenter 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.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请求后台数据」
准备如下代码
!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所绑定的钩子函数然后自动执行弹框。 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-生命周期-mounted/titlescript srcjs/vue.js/script
/head
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},!-- mounted挂载完成Vue初始化成功HTML页面渲染成功 --mounted(){alert(Vue挂载完成,发送请求到服务端.)}})
/script
/html
