旅游网站设计页面,重庆网站开发小顶网,百度首页排名优化价格,网站做qq发送链接目录 1.Vue概述
2. 快速入门
3. Vue指令
4.表格信息案例
5. 生命周期 1.Vue概述 1.MVVM思想 原始HTMLCSSJavaScript开发存在的问题#xff1a;操作麻烦#xff0c;耦合性强 为了实现html标签与数据的解耦#xff0c;前端开发中提供了MVVM思想#xff1a;即Model-Vi…目录 1.Vue概述
2. 快速入门
3. Vue指令
4.表格信息案例
5. 生命周期 1.Vue概述 1.MVVM思想 原始HTMLCSSJavaScript开发存在的问题操作麻烦耦合性强 为了实现html标签与数据的解耦前端开发中提供了MVVM思想即Model-View-ViewModel Model: 数据模型指要展示到页面上的数据。在web开发中通常从服务端获取到数据再把这些数据展示出来 View: 视图用于展示数据的各种html标签 ViewModel: 视图模型控制中心负责把Model数据显示到View里也负责从View里收集数据到Model里。Vue框架就承担了这个角色 2.Vue框架简介 Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的 渐进式框架它实现了MVVM思想 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷、更加高效。
2. 快速入门 1.开发步骤 1.编写html页面引入vue框架的js类库 2.在html页面里使用Vue 把hello vue到页面上 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/title/head
bodydiv idapp!-- 使用插值表达式把数据区域里message的数据插入进来 --{{message}}/div
/body
script srcjs/vue.js/script
script//定义Vue对象new Vue({//vue接管id为app的标签区域el: #app, //数据区域就是MVVM里的Modeldata:{message: Hello Vue},//方法区域Vue里用到的所有方法都要写到这里否则调用不到methods:{}})
/script
/html
3. Vue指令 指令HTML 标签上带有 v- 前缀的特殊属性不同指令具有不同功能作用。 1.v-bind和v-model v-bind使用示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlev-bind/title
/head
bodydiv idapp!-- v-bind用于把数据区域里的数据绑定到 html标签的属性上语法完整写法 v-bind:属性名数据名简单写法 :属性名数据名单向绑定数据区域 页面视图(标签的属性上)--a v-bind:hrefsiteUrl{{siteTitle}}/a bra :hrefsiteUrl{{siteTitle}}/a/divscript src./js/vue.js/scriptscriptnew Vue({el: #app,data: {siteUrl: http://www.baidu.com,siteTitle: 百度},methods:{}});/script
/body
/html
v-model使用示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlev-model/title
/head
bodydiv idapp!-- v-model用于实现 数据区域 和 页面上表单项的 双向绑定。注意仅适用于表单项input, select, textarea语法 v-model数据名称效果数据区域 页面表单项上 数据区域里的数据变化页面表单项上会随之变化页面表单项上 数据区域 在页面上输入了表单项的数据数据区域也会随之变化--帐号input typetext v-modelusername br性别input typeradio namegender valuemale v-modelsex男input typeradio namegender valuefemale v-modelsex女 br数据区域里值{{username}} , {{sex}}/divscript src./js/vue.js/scriptscriptnew Vue({el: #app,data: {username: tom,sex: male},methods:{}});/script
/body
/html 2. v-on v-on: 用来给html标签绑定事件。 完整写法v-on:事件名函数名(实参列表) 简写形式事件名函数名(实参列表) 注意事项 v-on语法给标签的事件绑定的函数必须在Vue的方法区域中 v-on语法绑定事件时事件名不写on。例如onclick在vue里写成v-on:click
!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
/html 3.v-if和v-show !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
/html 4.v-for v-for: 从名字我们就能看出这个指令是用来遍历的。注意需要循环哪个标签v-for 指令就写在哪个标签上。 完整语法 标签 v-for(变量名,索引变量) in 集合模型数据 !--索引变量是从0开始所以要表示序号的话需要手动的加1-- {{索引变量 1}} {{变量名}} /标签 简写形式 标签 v-for变量名 in 集合模型数据 {{变量名}} /标签
!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 idappdiv v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index 1}} : {{addr}}/div/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{addrs:[北京, 上海, 西安, 成都, 深圳]},methods: {}})
/script
/html 4.表格信息案例 步骤 使用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/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
/html
5. 生命周期 vue的生命周期指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法 mounted挂载完成Vue初始化成功HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
编写mounted声明周期的钩子函数与methods同级
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},mounted () {alert(vue挂载完成,发送请求到服务端)}})
/script
