北京的CETC中电太极集团贼厉害，可惜只能在那里待4天，足矣！
越努力，越幸运。
1、class与style绑定
01、class与style绑定
- 在应用界面中，某个(些)元素的样式是变化的
- class/style绑定就是专门用来实现动态样式效果的技术
02、class绑定
- :class='xxx'
- 表达式是字符串: 'classA'
- 表达式是对象: {classA:isA, classB: isB}
- 表达式是数组: ['classA', 'classB']
03、style绑定
- :style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性
04_class与style绑定 .classA { color: red; } .classB { background: blue; } .classC { font-size: 20px; }
1. class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
2. style绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
更新
new Vue({ el: '#demo', data: { myClass: 'classA', hasClassA: true, hasClassB: false, activeColor: 'red', fontSize: '20px' }, methods: { update () { this.myClass = 'classB' this.hasClassA = !this.hasClassA this.hasClassB = !this.hasClassB this.activeColor = 'yellow' this.fontSize = '30px' } } })
2、Vue条件渲染
01、条件渲染指令
- v-if与v-else
- v-show
02、比较v-if与v-show
- 如果需要频繁切换v-show较好
- 当条件不成立时，v-if的所有子节点不会解析(项目中使用)
区别：
我们要隐藏一个元素有两种做法：
- v-show：一种通过样式，即通过style就可以控制，display:none，元素还在内存里面，但没有显示
- v-if ：我们要隐藏一个东西，还可以把它移除，把它从内存里面删除掉，需要再创建一个对象，再显示出来，时间比v-show比较慢一点
代码：
08_条件渲染
表白成功
表白失败
求婚成功
求婚失败
切换
new Vue({ el: '#demo', data: { ok: true, } })
3、列表渲染
01、列表显示指令
- 数组：v-for / index
- 对象：v-for / key
02、列表的更新显示
- 删除 item
- 替换 item
06_列表渲染
测试: v-for 遍历数组
{{index}}--{{p.name}}--{{p.age}} --删除 --更新 添加
测试: v-for 遍历对象
{{key}}={{item}}
//vue本身只是监视了persons的改变，没有监视数组内部数据的改变 //Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生，更新界面)--->数组内部改变，界面自动变化 new Vue({ el: '#demo', data: {//数组 persons: [ {name: 'Tom', age:18}, {name: 'Jack', age:17}, {name: 'Bob', age:19}, {name: 'Mary', age:16} ] }, methods: { deleteP (index) { // 删除persons中指定index的p this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法 // 1. 调用原生的数组的对应方法 // 2. 更新界面 }, updateP (index, newP) { console.log('updateP', index, newP) // 并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面 // this.persons[index] = newP this.persons.splice(index, 1, newP) // this.persons = [] }, addP (newP) { this.persons.push(newP) } } })
03、列表的高级处理
- 列表过滤
- 列表排序
06_列表渲染_过滤与排序
{{index}}--{{p.name}}--{{p.age}}
年龄升序 年龄降序 原本顺序
new Vue({ el: '#demo', data: { searchName: '', orderType: 0, // 0代表不排序, 1代表降序, 2代表升序 persons: [ {name: 'Tom', age:18}, {name: 'Jack', age:17}, {name: 'Bob', age:19}, {name: 'Mary', age:16} ] }, computed: { filterPersons () { // 取出相关数据 const {searchName, persons, orderType} = this //最终需要显示的数组 let arr; // 过滤数组，如果p.name里面不包含searchName，就会返回-1，不进行过滤 arr = persons.filter(p => p.name.indexOf(searchName)!==-1) //获取输入字符串的下标 // 排序 if(orderType) { arr.sort(function (p1, p2) { // 如果返回负数p1在前，返回正数p2在前 if(orderType===1) { // 降序 return p2.age-p1.age } else { // 升序 return p1.age-p2.age } }) } return arr } }, methods: { setOrderType (orderType) { this.orderType = orderType } } })
4、事件处理
01、绑定监听
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参:event
隐含属性对象:$event
02、事件修饰符
.prevent：阻止事件的默认行为 event.preventDefault()
.stop：停止事件冒泡 event.stopPropagation()
03、按键修饰符
.keycode：操作的是某个keycode值的键
.keyName：操作的某个按键名的键(少部分)
<html lang="en"><head> <meta charset="UTF-8"> <title>07_事件处理title>head><body><div id="example"> <h2>1. 绑定监听h2> <button @click="test1">南京button> <button @click="test2('abc')">test2button> <button @click="test3('abcd', $event)">北京button> <h2>2. 事件修饰符h2> <a href="http://www.baidu.com" @click.prevent="test4">百度一下a> <div style="width: 200px;height: 200px;background: red" @click="test5"> <div style="width: 100px;height: 100px;background: blue" @click.stop="test6">div> div> <h2>3. 按键修饰符h2> <input type="text" @keyup.13="test7"> <input type="text" @keyup.enter="test7"> div><script type="text/javascript" src="../js/vue.js">script><script type="text/javascript"> new Vue({ el: '#example', data: { }, methods: { test1(event) { alert(event.target.innerHTML) }, test2 (msg) { alert(msg) }, test3 (msg, event) { alert(msg+'---'+event.target.textContent) }, test4 () { alert('点击了链接') }, test5 () { alert('out') }, test6 () { alert('inner') }, test7 (event) { console.log(event.keyCode) alert(event.target.value) } } })script>body>html>
