10.25内容整理和概述
今日内容概要
内容目录
- 特殊属性(style和class)指令
- 条件渲染
- 列表渲染
- 数组和对象的检测与更新
- 双向数据绑定
- input事件处理
- 过滤方法
- 修饰符
- 战略补充
特殊属性(style和class)指令
class属性：
特殊原因：在前端css中class可以是数组形似的数据
用法：
html代码：<div :class="cs"></div>
1.字符串用法：cs: 'red'
2.数组用法：cs: ['red','size'], # 使用较多
3.对象用法：cs: {red: true, size: false}
style属性：
特殊原因：在前端css中style可以是对象(键值对)形似的数据
用法： # 键值对的key值使用驼峰命名可以识别为'-';例子：background-color=backgroundColor
html代码：<div :style="st"></div>
1.字符串用法：st: 'background-color: aquamarine;font-size: 50px',
2.数组用法：st: [{'background-color': 'green'}, {'font-size': '80px'}],
3.对象用法：st: {backgroundColor: 'blue', fontSize: '40px'} # 使用较多
条件渲染
原理：
1.类似if-else判断语句
2.条件都返回布尔值，在让后通过文本指令v-if，控制标签的显示与隐藏
案例：
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div> # &&：与，代表and
<div v-else-if="score>=60 && score<80">及格</div>
<div v-else>不及格</div>
列表渲染
关键字：v-for
原理：类似for循环
v-for可以循环的数据类型：数字，字符串，数组，对象
案例：
<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>
<script>
var vm = new Vue({
el: '#app',
data: {
goodList: []
},
methods: {
handleClick() {
this.goodList = [
{id: 1, name: '小汽车', price: '29999元', count: 1},
{id: 2, name: '钢笔', price: '9元', count: 2},
{id: 3, name: '铅笔', price: '4元', count: 10},
{id: 4, name: '苹果', price: '2元', count: 3},]
}
}
})
</script>
总结：
数字数据类型：
1.当v-for="p in 数字"时，p是从1开始的自增数字
2.当v-for="(p,index) in 数字"，p是从1开始的自增数字，index是0开始的自增数字(索引值)
字符串数据类型：
1.当v-for="p in 字符串"时，p是该字符串的一个个字符
2.当v-for="(p,index) in 字符串"，p是该字符串的一个个字符，index是0开始的自增数字(索引值)
数组数据类型：
1.当v-for="p in 数组"时，p是该数组的一个个元素
2.当v-for="(p,index) in 数组"，p是该数组的一个个元素，index是0开始的自增数字(索引值)
对象数据类型：
1.当v-for="p in 对象"时，p是该一个个对象的value值
2.当v-for="(p,index) in 对象"，p是该一个个对象的value值，index是该对象的key值
补充： # 重要
1.每次循环的标签上，一般都会带一个属性：:key
2.:key对应的值必须唯一
3.目的是加速虚拟dom的替换
数组和对象的检测与更新
应用背景：在某些情况下数组和对象发生改变时，有时候vm监听不到，不能实现实时变化
解决方法：
数组：Vue.set(数组,索引,修改的数据) # 例子：Vue.set(this.girls,0,'jenny')
对象：Vue.set(对象,key值,value值) # 例子：Vue.set(this.obj,'height',180)
双向数据绑定
应用背景：我们可以通过指令或插值语法，控制页面数据的更新；那我们能否通过修改页面数据实现js定义的变量也更新呢？
实施方法：将value属性改为v-model属性，便能实现数据的双向绑定
例子：
单向绑定：<p>用户名: <input type="text" :value="name"></p>
双向绑定：<p>用户名: <input type="text" v-model="name"></p>
v-model进阶：
目的：优化结构，节约资源
修饰符：
1.lazy：
功能：等待input框的数据绑定时区焦点之后再变化
例子：<input type="text" v-model.lazy="name"> ---->{{name}}
2.number：
功能：
1.数字开头，只保留数字，后面的字母不保留
2.字母开头，都保留
例子：<input type="text" v-model.number="name"> ---->{{name}}
3.trim：
功能：去除首位的空格
例子：<input type="text" v-model.trim="name"> ---->{{name}}
input相关事件：
1.blur：失去焦点触发
例子：<input type="text" v-model="name" @blur="handle">
2.change：发生变化触发
例子：<input type="text" v-model="name" @change="handle">
3.input：输入触发
例子：<input type="text" v-model="name" @input="handle">
过滤方法
filter：
1.数组内置的过滤方法
2.需要传一个匿名函数
3.遍历数组，每次循环取出数组的一个元素，传入匿名函数
4./匿名函数返回布尔值，如果返回true，该值保留；如果返回false，该值丢弃
例子：
'-基本写法-'
this.dataList=this.dataList.filter(item=>{
if (item.indexOf(this.search)>=0){
return true
}else {
return false
}
}
'-箭头函数写法-'
this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
修饰符
事件修饰符：
1.stop：只处理自己的事件，不向父控件冒泡
例子：<li @click.stop="handleMn">神迹</li>
2.self：只处理自己的事件，子控件冒泡的事件不处理
例子：<ul @click.self="handleUl"></ul>
3.prevent：阻止a链接的跳转
例子：<a href="http://www.baidu.com" @click.prevent="handleA">点我抢茅台</a>
4.once：事件只会触发一次（适用于抽奖页面）
例子：<button @click.once="handleOnce">点我秒杀</button>
按键修饰符：
1.enter：一旦按压enter键，就会触发该修饰符修饰的方法
例子： <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">
2.esc：效果用法等同
3.ctrl：效果用法等同
.... # 一些常用的按键
战略补充
ES6的箭头函数
1.优点：
1.简介，可读性强
2.箭头函数没有属于自己的this，调用this时会用上一层的this
2.写法：
'无参函数'：
基本写法：
var f=function (){
console.log('打印了')
}
箭头函数写法：
var f = () => {
console.log('打印了')
}
'单参函数'：
基本写法：
var f=function (name){
console.log(name)
}
箭头函数写法：
var f = name=>{
console.log('打印了')
}
'多参函数'：
基本写法：
var f=function (name,age){
console.log(name,age)
}
箭头函数写法：
var f = (name,age)=>{
console.log('打印了')
}
'特殊情况： 带一个参数，有返回值，函数体只有一行关于return'
基本写法：
var f=function (name){
return name+'nb'
}
箭头函数写法：
var f = name=> name+'nb'
按键事件：
1.每个按键都对应有keycode
浙公网安备 33010602011771号