1:计算属性和监视
计算属性
1) 在 computed 属性对象中定义计算属性的方法
2) 在页面中使用{{方法名}}来显示计算的结果
2:监视属性
1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算
3: 计算属性高级
1) 通过 getter/setter 实现对属性数据的显示和监视
2) 计算属性存在缓存, 多次读取只执行一次 getter 计算
<body> <!-- 1. 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2. 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算 3. 计算属性高级: 通过getter/setter实现对属性数据的显示和监视 计算属性存在缓存, 多次读取只执行一次getter计算 --> <div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> <!--fullName1是根据fistName和lastName计算产生--> 姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullname1"><br> 姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullname"><br> 姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br> <p>{{fullname}}</p> <p>{{fullname}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el:"#demo", data:{ firstName : "A", lastName : "B", fullname :"A B", fullname2:"A-B" }, computed:{ fullname1(){ return this.firstName + " " + this.lastName; }, fullName3: { set(value){ // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值 console.log('fullName3 set()', value) // 更新firstName和lastName const names = value.split('-') this.firstName = names[0] this.lastName = names[1] }, get(){ //// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值 return this.firstName + '-' + this.lastName } } } }) vm.$watch("lastName",function (value) { //lastName的新值 console.log('$watch lastName', value); this.fullname = this.firstName + " "+value; }) </script> </body>
2: class 与 与 style 绑定
1. 理解
- 在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
3. style绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性
<head> <meta charset="UTF-8"> <title>04_class与style绑定</title> <style> .classA { color: red; } .classB { background: blue; } .classC { font-size: 20px; } </style> </head> <body> <!-- 1. 理解 在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术 2. class绑定: :class='xxx' xxx是字符串 xxx是对象 xxx是数组 3. style绑定 :style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中activeColor/fontSize是data属性 --> <div id="demo"> <p :class="ClassA">ClassA</p> <p :class="{classA:isA,classB:isB}">{classA:isA,classB:isB} </p> <p></p> <p :style="{color:activeColor, fontSize}">{color:activeColor, fontSize}</p> <button @click="fun">切换</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el:"#demo", data:{ ClassA:"classA", isA:true, isB:false, activeColor:"green", fontSize:"36" }, methods:{ fun(){ this.isA = false; this.isB = true } } }) </script> </body>
3:条件渲染和列表渲染
//通过控制OK的属性值来显示隐藏
<li v-if="ok">表白成功</li>
<li v-else>表白失败</li>
<li v-show="ok">表白成功</li>
<li v-show="!ok">表白失败</li>
//v-if是通过创建元素,删除元素切换,
//v-show 是通过CSS隐藏来实现用于频繁的次数
列表渲染
<li v-for="(p,index) in persons">{{index}}--{{p}}</li> //p item数组里面的对象,index数组下标
//列表渲染和排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_列表渲染_过滤与排序</title>
</head>
<body>
<div id="demo"> <input type="text" v-model="searchName"> <ul> <li v-for="(p, index) in filterPersons" :key="index"> {{index}}--{{p.name}}--{{p.age}} </li> </ul> <div> <button @click="setOrderType(2)">年龄升序</button> <button @click="setOrderType(1)">年龄降序</button> <button @click="setOrderType(0)">原本顺序</button> </div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> 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 () { // debugger // 取出相关数据 const {searchName, persons, orderType} = this let arr = [...persons] // 过滤数组 if(searchName.trim()) { arr = persons.filter(p => p.name.indexOf(searchName)!==-1) } // 排序 if(orderType) { arr.sort(function (p1, p2) { if(orderType===1) { // 降序 return p2.age-p1.age } else { // 升序 return p1.age-p2.age } }) } return arr } }, methods: { setOrderType (orderType) { this.orderType = orderType } } }) </script> </body> </html>
4:事件处理和表单数据搜集
事件处理:事件的冒泡,阻止冒泡,阻止事件的默认行为
1. 绑定监听:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event
2. 事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡
event.stopPropagation()
3. 按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
<div id="example"> <h2>1. 绑定监听</h2> <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <button @click="test3('abcd', $event)">test3</button> <h2>2. 事件修饰符</h2> <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> <div style=" 200px;height: 200px;background: red" @click="test5"> <div style=" 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> //表单数据的搜集 <body> <!-- 1. 使用v-model(双向数据绑定)自动收集数据 text/textarea checkbox radio select --> <div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名: </span> <input type="text" v-model="username"><br> <span>密码: </span> <input type="password" v-model="pwd"><br> <span>性别: </span> <input type="radio" id="female" value="女" v-model="sex"> <label for="female">女</label> <input type="radio" id="male" value="男" v-model="sex"> <label for="male">男</label><br> <span>爱好: </span> <input type="checkbox" id="basket" value="basket" v-model="likes"> <label for="basket">篮球</label> <input type="checkbox" id="foot" value="foot" v-model="likes"> <label for="foot">足球</label> <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"> <label for="pingpang">乒乓</label><br> <span>城市: </span> <select v-model="cityId"> <option value="">未选择</option> <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option> </select><br> <span>介绍: </span> <textarea rows="10" v-model="info"></textarea><br><br> <input type="submit" value="注册"> </form> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { username: '', pwd: '', sex: '男', likes: ['foot'], allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}], cityId: '2', info: '' }, methods: { handleSubmit () { console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info) alert('提交注册的ajax请求') } } }) </script> </body>