今日内容概要
- style和class
- 条件渲染
- 列表渲染
- 双向数据绑定
- 事件处理
style和class
1.语法
：属性名=js变量/js语法
- ：class=‘js变量，字符串，js数组’
- ：style=‘js变量，字符串，js数组’
2.代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .blue{ background-color: blue; } .size{ font-size: 40px; } </style> </head> <body> <div id="app"> <h1>class的使用</h1> <div :class="classObj"> 我是class的div~~~ </div> <h1>style的使用</h1> <div :style="styleObj"> 我是style的div~~~ </div> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ //class的字符串用法 classStr:'blue size', //class的数组用法，因为类本身可以放多个，用数组最合适 classList:['blue','size'], //class的对象 classObj:{blue:true,size:false}, // style的字符串写法，以后不好改 styleStr:'background-color:red;font-size:50px', // style的数组写法,如果多个单词用-，链接的形式可以写成驼峰 styleList:[{backgroundColor:'green'},{fontSize:'80px'}], // style的对象写法 styleObj:{backgroundColor:'yellow',fontSize:'50px'} } }) </script> </html>
列表渲染
1.指令
指令 释义 v-if 相当于：if v-else 相当于：else v-else-if 相当于：else if
2.代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1>条件渲染</h1> <div v-if="score>=90">优秀</div> <div v-else-if="score>=80 && score<90">良好</div> <div v-else-if="score>=60 && score<80">及格</div> <div v-else>不及格</div> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ score:88 } }) </script> </html>
列表渲染
1.v-if+v-for+v-else控制购物车商品的显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <style> .top{ margin-top: 50px; } </style> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row top"> <div class="col-md-6 col-md-offset-3"> <div class="text-center" style="margin-bottom: 30px"> <button @click="handleClick" class="btn btn-danger">加载购物车</button> </div> <div v-if="goodList.length>0"> <table class="table table-bordered"> <thead> <tr> <th>商品id号</th> <th>商品名</th> <th>商品价格</th> <th>商品数量</th> </tr> </thead> <tbody> <tr v-for="good in goodList"> <th>{{good.id}}</th> <td>{{good.name}}</td> <td>{{good.price}}</td> <td>{{good.count}}</td> </tr> </tbody> </table> </div> <div v-else> 购物车空空的~~~ </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { goodList:[] }, methods:{ handleClick(){ //假定这里的数据为后端加载的数据 this.goodList = [{id:1,name:'华为手机',price:'8888元',count:1}, {id:2,name:'苹果手机',price:'7777元',count:2}, {id:3,name:'小米手机',price:'6666元',count:3}, {id:4,name:'摩托罗拉手机',price:'55元',count:10},] } } }) </script> </html>
2.v-for遍历数组(列表)、对象(字典)、数字
- v-for=“key in obj”
如果是数组：key就是数组的一个个元素；
如果是数字：key就是从1开始的一个个数字；
如果是字符串：key就是一个个字符；
如果是对象：key就是一个个value的值- v-for=“(key,value) in obj”
如果是数组：key就是数组的一个个元素，value就是索引；
如果是数字：key就是从1开始的一个个数字，value就是索引；
如果是字符串：key就是一个个字符，value就是索引；
如果是对象：key就是一个个value的值，value就是一个个key。- 每次循环的标签上，一般都会带一个属性：
：key=‘值必须唯一’
key值作用：为了加速虚拟dom的替换；<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>循环数组</h1> <p v-for="(girl,i) in girls">第{{i}}个女孩是：{{girl}}</p> <h1>循环数字</h1> <ul> <li v-for="(i,a) in num"> {{i}}-----索引值：{{a}} </li> </ul> <h1>循环字符串</h1> <ul> <li v-for="(i,a) in str"> {{i}}-------索引值：{{a}} </li> </ul> <h1>循环对象</h1> <!-- <div v-for="value in obj">--> <!-- key在后，value在前--> <div v-for="(value,key) in obj"> key值为：{{key}}，value值为：{{value}} </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { num: 4,// 循环数字，从1开始，到4结束 str: '彭于晏 is handsome', // 循环字符串循环的是字符 obj: {name: 'lqz', age: 19, hobby: ['篮球', '足球']}, girls: ['刘亦菲', '迪丽热巴', '杨超越'] }, }) </script> </html>
3.数组的检测与更新
- 可以检测到变动的数组操作：
push：最后位置添加；
pop：最后位置删除；
shift：第一个位置删除；
unshift：第一个位置添加；
splice：切片；
sort：排序；
reverse：反转- 检测不到变动的数组操作：
filter()：过滤
concat()：追加另一个数组- 解决方法：
方法一：通过索引值更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
“Alan”
vm.arrayList[0]=‘Darker’
“Darker”
方法二：通过Vue.set（对象，index/key,value）更新数组（数据会更新，页面也会发生改变）
Vue.set（vm.arrayList,0,‘Darker’）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>数据的检测与更新</h1> <button @click="handleClick">点我追加</button> <button @click="handleClick1">点我追加一批</button> <button @click="handleClick4">点我修改数组页面变化</button> <p v-for="girl in girls">{{girl}}</p> <h1>对象的检测与更新</h1> <button @click="handleClick2">点我追加身高</button> <button @click="handleClick3">点我追加身高--解决</button> <p v-for="(value,key) in obj">{{key}}---{{value}}</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { girls: ['刘亦菲', '迪丽热巴', '杨超越'], obj: {'name': 'lqz', age: 19} }, methods: { handleClick() { this.girls.push('美女1号') }, handleClick1() { var a = this.girls.concat(['帅哥1', '帅哥2', '美女2']) console.log(a) }, handleClick2() { this.obj.height = '180' //监控不到变化 console.log(this.obj) }, handleClick3() { Vue.set(this.obj, 'height', 180) //监控到了变化 }, handleClick4() { Vue.set(this.girls, 0, 'lalalalala') } } }) </script> </html>
双向数据绑定
1.概念
input标签，使用v-model进行数据双向绑定；
- 使用属性指令绑定:value='变量’是数据的单向绑定
- v-model='name’是数据双向绑定
2.代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>数据双向绑定</h1> <p>用户名：<input type="text" v-model="name"></p> <p>密码：<input type="text" v-model="password"></p> <button @click="handleSubmit">提交</button> {{err}} </div> </body> <script> var vm = new Vue({ el: '#app', data: { name: '', password: '', err: '' }, methods: { handleSubmit() { console.log(this.name, this.password) this.err = '用户名密码错误' } } }) </script> </html>
事件处理
1.事件绑定v-on：事件名=‘函数’--------->@事件名=‘函数’
input也有很多事件：
- blur：失去焦点触发
- change：发生变化触发
- input：输入触发
代码展示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>input的事件处理</h1> <h2>blur</h2> <p><input type="text" v-model="name1" @blur="handleBlur">----->{{name1}}</p> <h2>change</h2> <p><input type="text" v-model="name2" @change="handleChange"> ---->{{name2}}</p> <h2>input</h2> <p><input type="text" v-model="name3" @input="handleInput"> ---->{{name3}}</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { name1: '', name2: '', name3: '', }, methods: { handleBlur(){ console.log('失去焦点了，触发了',this.name1) }, handleChange() { console.log('发生变化，触发了', this.name2) }, handleInput() { console.log('输入了内容，触发了', this.name3) } } }) </script> </html>
2.过滤案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>过滤案例</h1> <p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p> <ul> <li v-for="item in newdataList">{{item}}</li> </ul> </div> </body> <script> var vm = new Vue({ el: '#app', data: { search: '', dataList: [ 'a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd', ], newdataList:[ 'a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd', ], }, methods: { handleSearch() { console.log('搜索的内容是：', this.search) // var _this=this // 复杂写法 // this.dataList=this.dataList.filter(item=>{ // console.log(this) // // 判断this.search是否在item中，如果在保留，return true，如果不在返回false // if (item.indexOf(this.search)>=0){ // return true // }else { // return false // } // }) // 简单写法 this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0) } } }) </script> </html>
3.补充：
- 数组过滤方法，内置的
var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'dddd', ] // filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行 // 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃 l = l.filter(function (item) { console.log('进来一个值：',item) return false }) console.log(l)
- 2 判断子字符串是否在字符串中
var s='tttatom' var a ='a' console.log(s.indexOf(a)>=0)
- 3.es6 模板字符串 `` 对象写法 箭头函数
var f=function (){ console.log('打印了') } 3.1 不带参数的箭头函数 var f = () => { console.log('打印了') } 3.2 带一个参数，没有返回值得箭头函数 var f = name=>{ console.log('打印了', name) } 3.3 多个参数，没有返回值 var f = (name,age) => { console.log('打印了', name,age) } 3.4 带一个参数，有返回值，函数体只有一行 var f = function (name) { return name+'nb' } var f = name=> name+'nb' 有什么用？ 1 简洁 2 箭头函数没有自己的this,会用上一层的this var f = function () { console.log('匿名函数的this', this) } var f1 = () => { console.log('箭头函数的this', this) } var obj = { f: function () { console.log('匿名函数的this', this) }, f1: () => { console.log('箭头函数的this', this) } } obj.f() obj.f1()
4.事件修饰符
事件修饰符 释义 .stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） .self 只处理自己的事件，子控件冒泡的事件不处理 .prevent 阻止a链接的跳转 .once 事件只会触发一次（适用于抽奖页面） 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>事件修饰符</h1> <h2>事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡</h2> <ul @click="handleUl"> <li @click.stop="handleMn">美女</li> <li @click="handleSg">帅哥</li> </ul> <h2>事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件</h2> <ul @click.self="handleUl"> <li @click="handleMn">美女</li> <li @click="handleSg">帅哥</li> </ul> <h3>阻止a标签跳转</h3> <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a> <h4>once只执行一次</h4> <button @click.once="handleOnce">点我秒杀</button> </div> </body> <script> var vm = new Vue({ el: '#app', data: {}, methods: { handleUl() { console.log('ul被点了') }, handleMn() { console.log('美女被点了') }, handleSg() { console.log('帅哥被点了') }, handleA() { console.log('a被点了') }, handleOnce() { console.log('恭喜你，秒到了') } } }) </script> </html>
5.按键修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="search" placeholder="请输入搜索内容" >@keyup.enter="handleUp"> </div> </body> <script> var vm = new Vue({ el: '#app', data: { search: '' }, methods: { handleUp(event) { console.log('回车被按了') // if (event.code == 'Enter') { // console.log('回车键被案例', event) // } } } }) </script> </html>
扫一扫
8179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
