深圳做电子工厂的网站,品牌网站设计哪家好,wordpress 返回 插件,佛山学校网站建设一、vue入门
Vue为前端的框架#xff0c;免除了原生js的DOM操作。简化书写。
基于MVVM的思想#xff0c;实现数据的双向绑定#xff0c;使编程的重点放在数据上。
1、引入vue.js文件
2、定义vue核心对象#xff0c;定义数据模型
3、编写视图
//1、引入vue.js
scr… 一、vue入门
Vue为前端的框架免除了原生js的DOM操作。简化书写。
基于MVVM的思想实现数据的双向绑定使编程的重点放在数据上。
1、引入vue.js文件
2、定义vue核心对象定义数据模型
3、编写视图
//1、引入vue.js
script srcvue.js/script//2、定义vue核心对象
script//定义vue对象new Vue({el:#app,//vue接管的区域data:{message:Hello Vue}})
/script//定义视图
!-- 定义视图 --div idapp!-- v-model为绑定数据 --input typetext name id v-modelmessage{{message}}/div
其中{{message}}为插值表达式 形式{{表达式}} 内容可以为变量、函数调用、三元运算符 input中v-model为绑定数据当input输入的值发生变化时vue对象中的message也随之发生变化从而体现了vue的双向绑定性。
v-model为指令。
二、vue指令
指令html标签上带有v-的特殊属性
v-mind为html标签绑定属性值如hrefcssv-model在表单元素上进行双向数据绑定v-on为html标签绑定事件v-if v-else-ifv-else条件性的渲染某元素v-for遍历容器v-show通过条件来确定是否展示该元素
1、v-mind
为html标签动态的绑定一个属性值当vue的数据模型的值发生变化时其所绑定的属性值也发生变化 div idapp!-- v-bind动态绑定 --!-- url的值将会动态的绑定vue对象中的数据模型data --a v-bind:hrefURL链接1/aa :hrefURL链接2/ainput typetext v-modelURL/divscript//定义vue对象new Vue({el:#app,//vue接管的区域data:{URL:https://www.baidu.com},})/script
2、v-model
在表单上进行双向数据绑定
3、v-on
为html标签绑定事件其数据模型要改为以下形式 new Vue({el:#app,//vue接管的区域data:{},methods:{handle:function(){alert(你点了我一下...);} }})
调用方式 input typebutton name id value点击 v-on:clickhandle()
4、v-if v-else-if v-else
当条件为真时渲染标签若为假则不渲染
5、v-show
根据条件展示某元素但都进行了渲染只不过使用display对展示进行了控制
实例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcvue.js/script/headbody !-- 定义视图 --div idapp年龄input typetext name id v-modelage经判定为:span v-ifage35年轻人(35以下)/spanspan v-else-ifage35 age60中年人(35-60)/spanspan v-else老年人(60以上)/spanbrbr年龄input typetext name id v-modelage经判定为:span v-showage35年轻人(35以下)/spanspan v-showage35 age60中年人(35-60)/spanspan v-showage60老年人(60以上)/spanbrbr/div/bodyscript//定义vue对象new Vue({el:#app,//vue接管的区域data:{age:20},methods:{}})/script
/html
v-if与v-show在展示时的区别
v-show去对span标签全部进行了渲染只不过在显示的时候使用display进行控制值为none不进行显示而v-if只对条件满足的标签进行渲染。 6、v-for
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcvue.js/script/headbody!-- 定义视图 --div idappdiv v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index1}:{{addr}}/div/div/bodyscript//定义vue对象new Vue({el: #app, //vue接管的区域data: {addrs: [北京, 上海, 广州, 深圳, 成都]}})/script
/html 案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcvue.js/script/headbody!-- 定义视图 --div 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.scorce}}/tdtdspan v-ifuser.scorce85优秀/spanspan v-else-ifuser.scorce60及格/spanspan stylecolor: red; v-else不及格/span/td/tr/table/div/bodyscript//定义vue对象new Vue({el: #app, //vue接管的区域data: {users: [{name: Tom,age: 20,gender: 1,scorce: 78},{name: Rose,age: 18,gender: 2,scorce: 86},{name: Jerry,age: 26,gender: 1,scorce: 90},{name: Tony,age: 30,gender: 1,scorce: 52}]}})/script
/html 三、vue的生命周期 生命周期一个对象从创建到销毁的整个过程。 mounted挂载完成vue初始化成功html页面渲染成功(发送请求到服务端加载数据)
