建设银行金牛支行网站,wordpress 页面属性,贾汪网架公司,邯郸企业网站建设价格vue 基础
1 模版语法
2 文本指令
2.1 模版语法 v-text 2.2 文本指令 v-html 2.3 文本指令 v-show 2.4 文本指令 v-if 2.5 v-show把图片的显示隐藏
3 事件指令
ES6对象语法演变 3.1 v-on 不传参/a 3.2 v-on 传参和 v-on:简写成
4 属性指令
4.1 属性指令之 v-bind: 简…vue 基础
1 模版语法
2 文本指令
2.1 模版语法 v-text 2.2 文本指令 v-html 2.3 文本指令 v-show 2.4 文本指令 v-if 2.5 v-show把图片的显示隐藏
3 事件指令
ES6对象语法演变 3.1 v-on 不传参/a 3.2 v-on 传参和 v-on:简写成
4 属性指令
4.1 属性指令之 v-bind: 简写成 : 4.2 用属性指令切换图片 4.3 属性指令之 class 属性
5 style和class
5.1 style 字符串类型 5.2 style 数组类型 5.3 style 对象类型 5.4 class是字符串类型 5.5 class是数组类型 5.6 class是对象类型
6 条件渲染
7列表渲染
7.2 v-for能循环的 1 模版语法
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script/head
body
div idapph1模板语法/h1p渲染字符串-姓名{{ name }}/pp渲染字符串-年龄{{ age }}/pp渲染-数组{{ list1 }}/pp渲染-数组-按位置取值{{ list1[1] }}/pp渲染-对象{{ obj1 }}/pp渲染-对象-按key取值{{ obj1.name }}/pp渲染-对象-按key取值{{ obj1[age] }}/pp渲染-标签-字符串(是因为它默认处理了xss攻击){{ link1 }}/pp三目运算符(109){{109 ? true:false}}/pp三目运算符(对象的长度大于2吗){{list1.length 2 ? 大于2: 不大于2}}/pp简单表达式(99 1){{ 99 1 }}/p!-- p函数(渲染出函数的返回结果){{ add(1, 2) }}/p --/div
/body
/htmlscriptnew Vue({el: #app,data: {name: lin,age: 18,list1: [1, 2, 3, 4], // 数组obj1: {name: today, age: 20}, // 对象link1: a hrefhttps://www.baidu.com百度一下/a,}})// 定义变量let list1 [1, 2, 3, 4]let res list1.length 2 ? 大于2: 不大于2console.log(res)/script 2 文本指令
# vue 的指令系统 放在标签,以v-开头的每个指令都有特殊用途
v-text:把字符串内容渲染到标签内部
v-html:把字符串内容渲染到标签内部但如果是标签字符串会渲染成标签
v-show:控制标签显示与否:通过style的display是否等于none控制在html中还存在
v-if:控制标签显示与否:通过dom操作做的这个标签从dom中删除了2.1 文本指令 v-text
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1文本指令 v-text v-html/h1h2文本指令之 v-text把字符串内容渲染到标签内部/h2!-- 之前是用模板语法的插值语法现在用文本指令 --p{{name}}/p!-- 文本指令 --p v-textname/pp v-textlink1/p/div
/body
/html
scriptlet vm new Vue({el: #app,data: {name: lin,link1: a hrefhttps://www.baidu.com百度一下/a,isShow: true,ifShow: true,}});
/script 2.2 文本指令 v-html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1文本指令 v-html/h1h2文本指令之 v-html把字符串内容渲染到标签内部但如果是标签字符串会渲染成标签 /h2h3把标签字符串渲染成标签使用/h3p v-htmllink1/p
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {name: lin,link1: a hrefhttps://www.baidu.com百度一下/a,}});
/script 2.3 文本指令 v-show
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1文本指令 v-show/h1h2v-show 控制的是标签 显示与否:通过style的display是否等于none控制在html中还存在/h2divp v-showisShow我是p标签/p/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {isShow: true,ifShow: true,}});
/script 2.4 文本指令 v-if
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script/head
body
div idapph2v-if 控制的是标签 显示与否:通过dom操作这个标签从dom中删除了/h2divspan v-ififShow我是span标签/span/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {ifShow: true,}});
/script 2.5 v-show把图片的显示隐藏
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1文本指令 v-show/h1h2用v-show 展示图片或隐蔽/h1divbutton clickhandleShow点我看风景/buttonbrimg src./img/1.webp alt width300 height300 v-showshowPhoto/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {showPhoto: false},methods: {handleShow(){this.showPhoto !this.showPhoto}}});/script 3 事件指令
# 用v-on绑定事件后只要触发事件就会执行函数v-on:点击事件双击事件滑动事件 函数# 用的最多的就是click事件 单击事件# v-on:click‘函数’---》放在标签上点击标签就会触发函数执行---》函数必须写在methods中可以用es6语法的简写methods: {// handleClick: function () {// alert(美女)// },handleClick() { // es6 语法alert(美女)},}# v-on: 可以使用 替换ES6对象语法演变
// ES6 对象写法var userinfo {username: lin, password: 123}// 可写成下面这种var userinfo {username: lin, password: 123}var username linvar password 123// var userinfo {username: username, password:password}// 可写成下面这种// 放个变量到对象中会把变量名作为key,值作为valuevar userinfo {username, password}console.log(userinfo[username])console.log(userinfo.username)var userinfo {username: lin,password: 123,printName: function () {console.log(this.username)}}// 调用函数userinfo.printName()// 演变var printName function () {console.log(this.username)}var userinfo {username: lin,password: 123,printName() {console.log(this.username)}}3.1 v-on 不传参
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1事件指令/h1button v-on:clickhandleClick点我,看风景/button
/div
/body
/htmlscriptlet vm new Vue({el: #app,data: {},methods: {handleClick(){alert(hello)}}});
/script 3.2 v-on 传参和 v-on:简写成
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1事件指令/h1button v-on:clickhandleClick点我,看风景/buttonbrbutton v-on:clickhandleClick1点我传参数, 如果不传默认第一个参数是点击事件对象PointerEvent/buttonbrbutton v-on:clickhandleClick1(1)点我传一个参数,只要穿了参数点击事件对象就不传了/buttonbrbutton v-on:clickhandleClick1(1, 2)点我传两个参数,正常使用/buttonbrbutton v-on:clickhandleClick1(1, 2, 3)点我传多个参数,只用前两个/buttonbrbutton v-on:clickhandleClick1(1, $event)点我传第一个参数,第二个是点击事件/buttonhrh1把 v-on: 简写 /h1button clickhandleClick点我,看风景/button
/div
/body
/htmlscriptlet vm new Vue({el: #app,data: {},methods: {}});
/script4 属性指令
# 每个标签都会有属性动态替换属性的值就要用到属性指令# v-bind:属性变量 ---》针对所有标签的所有属性 id name
# 简写成 :属性变量:id变量:name变量# 切换图片案例--》点击就修改src属性4.1 属性指令之 v-bind: 简写成 :
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1属性指令/h1divbutton clickhandleClick点我有风景/buttonbrbutton clickhandleClick1点我变大风景/buttonbr
!-- img v-bind:srcimg_url v-bind:widthwidth v-bind:heightheight--p属性简写就是把 v-bind: 简写成 : /pimg :srcimg_url :widthwidth :heightheight/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {img_url: ,width: 300,height: 300,},methods: {handleClick(){this.img_url ./img/2.webp},handleClick1(){this.width 500px;this.height 500px;}}});
/script 4.2 用属性指令切换图片
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1属性指令/h1divbutton clickhandleClick点我有风景/buttonbrbutton clickhandleClick1点我变大风景/buttonbr
!-- img v-bind:srcimg_url v-bind:widthwidth v-bind:heightheight--p属性简写就是把 v-bind: 简写成 : /pimg :srcimg_url :widthwidth :heightheight/divhrh1点击按钮切换图片/h1button clickhandleChange点我换风景/buttonbrimg :srcimg_url2 width400px height400px/div
/body
/html
scriptlet vm new Vue({el: #app,data: {img_url: ,width: 300,height: 300,img_url2: ./img/2.webp,img_list: [./img/2.jpg, ./img/3.jpg, ./img/4.jpg, ./img/5.jpg, ./img/6.jpg, ./img/5.webp, ./img/6.webp]},methods: {handleClick(){this.img_url ./img/2.webp},handleClick1(){this.width 500px;this.height 500px;},handleChange(){this.img_url2 this.img_list[Math.floor(Math.random() * this.img_list.length)]}}});/script 4.3 属性指令之 class 属性
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptstyle.red {color: rgba(255, 104, 104, 0.7);}.purple {color: rgba(104, 104, 255, 0.7);}/style
/head
body
div idapph2class属性/h2button clickhandleChangeClass点我变样式/buttondiv :classisActive ? red: purpleh1我是一个div/h1/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {isActive: false},methods: {handleChangeClass(){this.isActive !this.isActive},}});
/script 5 style和class 5.1 style是字符串类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1style和class:能够绑定什么类型的变量字符串数组对象/h1div :stylestyle_strbutton clickhandleSmall点击变细/buttonp我是div中的p标签/p/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {// style是字符串类型style_str: background: red; font-size: 60px; font-weight: bold,},methods: {handleSmall(){this.style_str background: red; font-size: 60px;}}});
/script 5.2 style是数组类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1style和class:能够绑定什么类型的变量字符串数组对象/h1div :stylestyle_listbutton clickhandleSmall点击变细/buttonp我是div中的p标签/p/div/div
/body
/html
scriptlet vm new Vue({el: #app,data: {// style是数组类型style_list: [{background: red},{font-size: 60px},{font-weight: bold}]},methods: {handleSmall(){this.style_list.pop()}}});/script5.3 style是对象类型(推荐使用)
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1style和class:能够绑定什么类型的变量字符串数组对象/h1div :stylestyle_objbutton clickhandleSmall点击变细/buttonbutton clickhandleFontSmall点击字体变小/buttonp我是div中的p标签/p/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {// style:是对象类型(建议用对象对象好控制)style_obj:{background: red, fontSize: 60px, fontWeight: bold},},methods: {handleFontSmall(){this.style_obj.fontSize 30px}}});
/script 5.4 class是字符串类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptstyle.big{font-size: 60px;}.back{background-color: greenyellow;}/style
/head
body
div idapph1style和class:能够绑定什么类型的变量字符串数组对象/h1h2class绑定字符串、数组、对象/h2div :classclass_strbutton clickhandleRemoveBackgroud点击去掉背景/buttonp我是div中的p标签/p/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {// class是字符串类型class_str: big back},methods: {handleRemoveBackgroud(){this.class_strbig}}});
/script5.5 class是数组类型(推荐使用)
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptstyle.big{font-size: 60px;}.back{background-color: greenyellow;}/style
/head
body
div idapph1style和class:能够绑定什么类型的变量字符串数组对象/h1h2class绑定字符串、数组、对象/h2div :classclass_listbutton clickhandleRemoveBackgroud点击去掉背景/buttonbutton clickhandleBigFont点击字体变大/button--p我是div中的p标签/p/div
/div
/body
/html
scriptlet vm new Vue({el: #app,data: {// class是数组类型class_list: [big, back],},methods: {handleRemoveBackgroud(){this.class_list.pop()},handleBigFont(){this.class_list.push(big)},}});
/script5.6 class是对象类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptstyle.big{font-size: 60px;}.back{background-color: greenyellow;}/style
/head
body
div idapph1style和class:能够绑定什么类型的变量字符串数组对象/h1h2class绑定字符串、数组、对象/h2div :classclass_objbutton clickhandleSmallFont点击字体变小/buttonp我是div中的p标签/p/div/div
/body
/html
scriptlet vm new Vue({el: #app,data: {// class是对象类型class_obj:{big: true, back: true}},methods: {handleSmallFont(){this.class_obj.big false}}});/script6 条件渲染
条件关键字v-if v-else-ifv-else代码案例!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/script
/head
body
div idapph1条件渲染/h1span v-ifscore 90优秀/spanspan v-else-ifscore 80 score 90良好/spanspan v-else-ifscore 60 score 80及格/spanspan v-else不及格/span/div
/body
/html
scriptlet vm new Vue({el: #app,data: {score: 82},});/script 7 列表渲染
# 列表渲染 v-for 显示多行# 购物车案例bootstrap
列表渲染案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptlink relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous
/head
body
div idappdiv classcontainer-fluiddiv classrowdiv classcol-md-6 col-md-offset-3div classtext-centerbutton classbtn btn-danger clickhandleShow点我显示购物车/buttonbutton classbtn btn-danger clickhandleDelete删除最后一条/button/divtable classtable table-borderedtheadtrthid号/thth商品名字/thth商品价格/thth商品数量/th/tr/theadtbodytr v-foritem in good_listth scoperow{{item.id}}/thtd{{item.name}}/tdtd{{item.price}}/tdtd{{item.count}}/td/tr/tbody/table/div/div/div/div/div
/bodyscriptvar vm new Vue({el: #app,data: {good_list: []},methods: {handleShow() {this.good_list [{id: 1, name: 钢笔, price: 9.9, count: 4},{id: 2, name: 足球, price: 99, count: 4},{id: 3, name: 篮球, price: 44, count: 32},{id: 4, name: 电脑, price: 1299, count: 48},{id: 5, name: 鼠标, price: 23, count: 4},{id: 6, name: 脸盆, price: 8, count: 4},]},handleDelete() {this.good_list.pop()}}})/script
/html7.2 v-for能循环的
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript src./js/vue.js/scriptlink relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymous
/head
body
div idappdiv classcontainer-fluiddiv classrowdiv classcol-md-6 col-md-offset-3h1循环数组--》见过了/h1p v-for(value,index) in girls第 {{index 1}}个女神是{{value}}/ph1循环对象/h1p v-for(value,key) in userinfokey值是{{key}}value值是{{value}}/ph1循环字符串/h1p v-for(value,index) in s第 {{index}}个字母是{{value}}/ph1循环数字/h1p v-fori in 10{{i}}/p/div/div/div/div/div
/bodyscriptvar vm new Vue({el: #app,data: {girls: [刘亦菲, 迪丽热巴, 高圆圆],userinfo: {name: lqz, age: 19, hobby: 篮球},s: hello world},methods: {}})/script
/html作业
# 把今天讲的所有内容都敲一遍
-------# 获取所有图书接口vuebootstrapjquery的ajax显示在前端-跨域问题# 把uniapp开发工具hbuilder下载点击切换美女图片---》打包成安装apk---》安装到自己手机上
