深圳住建网站,做网站不错的公司,3建网站,软件界面设计素材上一篇 个人整理非商业用途#xff0c;欢迎探讨与指正#xff01;#xff01; 文章目录 14.VUE基础14.1VUE的入门使用14.2条件判断14.3循环渲染14.4v-bind绑定标签属性14.5v-model表单标签的双向绑定14.6事件处理14.7axios 14.VUE基础
前端框架
UI框架:页面渲染Bootstrap,L…« 上一篇 个人整理非商业用途欢迎探讨与指正 文章目录 14.VUE基础14.1VUE的入门使用14.2条件判断14.3循环渲染14.4v-bind绑定标签属性14.5v-model表单标签的双向绑定14.6事件处理14.7axios 14.VUE基础
前端框架
UI框架:页面渲染Bootstrap,Layui...
JS框架:数据渲染JQuery,React,angular,node.js,vue...14.1VUE的入门使用
引入方式:1.引入vue文件2.使用脚手架!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodydiv idapp!-- 使用vue中的绑定的数据 --{{hello}}{{emp}}---{{emp.employeeid}}--{{emp.age}}/div!-- 引入vue.js --script srcjs/vue.js/scriptscript// 创建vue对象let vue new Vue({// 将vue绑定在指定的盒子上el:#app,// 使用vue绑定的数据data:{// 以键值对的形式存在hello:hello vue,emp:{employeeid:1,employeename:tom,age:19}}});/script/body
/html14.2条件判断
bodydiv idappspan v-ifgender 0男/spanspan v-else女/span/divscript srcjs/vue.js/scriptscriptnew Vue({el:#app,data:{gender:0}});/script
/body14.3循环渲染
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodydiv idapp{{list}} br{{list[0]}} br{{list[1]}} br{{list[2]}} brh2信息/h2ul!-- u是负责输出的对象 i是下标 --li v-for(u,i) in list{{u}}--{{i}}--{{u.name}}--{{u.age}}/li/ul/divscript srcjs/vue.js/scriptscriptnew Vue({el:#app,data:{list:[{id:1,name:zs,age:19},{id:2,name:ls,age:19},{id:3,name:ww,age:19},]}});/script/body
/html14.4v-bind绑定标签属性
v-bind:属性 简写为:属性bodydiv idapp!-- 当前的input标签绑定hello的值 --input typetext v-bind:valuehelloinput typetext :valuestrimg v-bind:srcimg altimg :srcimg alt/div!-- 引入vue.js --script srcjs/vue.js/scriptscript// 创建vue对象let vue new Vue({// 将vue绑定在指定的盒子上el:#app,// 使用vue绑定的数据data:{// 以键值对的形式存在hello:hello vue,str:你好,img:img/3.jpg}});/script
/body14.5v-model表单标签的双向绑定
全写v-model:value bodydiv idapp{{str}} brinput typetext v-model:valuestrbrinput typetext v-modelstrbr!-- 单向绑定 --input typetext :valuestrbr/div!-- 引入vue.js --script srcjs/vue.js/scriptscript// 创建vue对象let vue new Vue({// 将vue绑定在指定的盒子上el:#app,// 使用vue绑定的数据data:{str:大佐和大佑123}});/script
/body14.6事件处理
v-on:事件
简写为
事件bodydiv idappinput typebutton value添加 v-on:clickinsertinput typebutton value添加 v-on:clickinsert()input typebutton value删除 clickdelinput typebutton value修改 clickupdate(1,2)input typetext blurcheck/divscript srcjs/vue.js/scriptscriptnew Vue({el:#app,data:{},methods:{// 定义方法insert:function(){alert(添加);},// es6写法del(){alert(删除);},update(a,b){alert(ab);},check(){alert(用户名不可用)}}});/script
/body14.7axios
帮助VUE进行通讯的
VUE本身是不能通讯的,通常需要配合axios进行通讯(封装好的ajax)
getaxios.get(url).then(fn)axios.get(url,{参数}).then(fn)
post:目前不建议使用,post请求会将参数以json的形式发送,目前的技术手段处理起来很麻烦axios.get(url,{参数}).then(fn)
