vue学习16-30
vue/v-for p16
1.作用：基于数据循环，多次渲染整个元素（数据、对象、数字…）
2.遍历数组语法：v-for=“(item,index) in 数组”
（item每一项，index下标）
**数组多少个index多少项，index用不到的时候可以不写，写成（item）。只有一个东西的时候（）都可以省去。 3.省略：index：v-for=“item in数组”
<div class="app">
<li v-for="(item) in list" >
{{ item }}</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
list:['sd','sg','hj']
},
methods: {
fn() {
}
}
})
</script>
案例-图书删除p17
<div class="app">
<ul>
<li v-for="(item,index) in list">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<button @click="fn(item.id)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
list:[
{id:1,name:'hu1',author:'asd1'},
{id:2,name:'hu2',author:'asd2'},
{id:3,name:'hu3',author:'asd3'},
]
}，
methods: {
fn(id) {
this.list=this.list.filter(item =>item.id !==id)
}
}
})
</script>
//filter：根据条件，保留满足条件的对应项，得到一个新数组（不会改变原数组）
//删除思路：通过id进行删除数组中的对应项
vue/v-for的key p18
语法：key属性=“唯一标识”
作用：给列表项添加的唯一标识。便于vue进行列表项的正确排序复用。
如果不加key v-for的默认行为会尝试 原地修改元素（就地复用）
删除的是最后一项，元素没变，变的是里面的内容。
注意点：
- key的值只能是字符串或数字类型
- key的值必须有唯一性
- 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
vue/指令v-model p19
- 作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容
(1)数据变化——>视图自动更新
(2)视图变化——>数据自动更新
<div class="app">
账户：<input type="text" v-model="account"><br><br>
密码：<input type="password" v-model="passwords"><br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
account:'',
passwords:'',
},
methods: {
login() {
console.log(this.account)
},
reset() {
this.account=''
this.passwords=''
}
}
})
</script>
vue/案例-记事本 p20—22
添加
add(){
this.list.unshift({
id:+new Date(),
name:this.todoName
})
push()往后加，unshift（）往后加
合计
list.length
清空
clear(){
this.list=[]
}
底部隐藏
v-show="list.length>0"
功能总结
（1）列表渲染
v-for — key的设置
{{ }}插值表达式
(2)删除功能
v-on调用传参
(3)添加功能
v-model绑定
unshift修改原数组添加
(4)底部统计和清空
数组.length累计长度
覆盖数组清空列表
v-show控制隐藏
vue/指令修饰符 p24
通过"."指明一些指令后缀，不同后缀封装了不同的处理操作-简化代码
(1)按键修饰符
@keyup.enter-键盘回车监听
(2)v-model修饰符
v-model.trim-去除首尾空格
v-model.number-转数字
(执意要输字母会直接出字符串，不会出现NaN)
@事件名.stop-阻止冒泡(e.stopPropagation())
@事件名.prevent-阻止默认行为
vue/v-bind对于样式控制的增强 p25
操作class
语法 ：class=“对象/数组”
（1）对象-键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类。
适用场景：一个类名，来回切换
（2）数组-数组中的所有的类，都会添加到盒子上，本质就是一个class列表
适用场景：批量添加或删除类
<div class="ht" :class="{类名1:布尔值,类名2:布尔值}">程序员</div>
<div class="ht" :class="{类名1,类名2}">程序员</div>
案例-tab标签高亮
- 基于数据动态渲染tab-v-for
- 准备下标记录高亮的是哪一个tab-activeindex
- 基于下标，动态控制class类名-v-bind：class
所谓的切换高亮，就是改下标
<div class="app">
<ul>
<li v-for="(item,index) in list" :key="item.id" @click=" activeIndex=index">
<a :class="{active:index===activeIndex }"> {{ item.name }}</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
activeIndex:0,
list: [
{ id: 1, name: 'asdf1' },
{ id: 2, name: 'asdf2' },
{ id: 3, name: 'asdf3' },
],
},
methods: {
fn() {
activeIndex==index
}
}
})
</script>
操作style
语法 ：style=”样式对象“
<div class="box" :style="{ width: '200px', height: '90px',backgroundColor:'green'}">
{{ item.name }}
</div>
适用场景：某个具体属性的动态设置
v-model应用于其他表单元素 p26
常见的表单元素都可以用v-model绑定关联-快速获取或设置表单元素的值
它会根据控件类型自动获取正确的方法来更新元素
-
输入框 input:text——value
-
文本框 textarea——value
-
复选框 input:checkbox——checked
-
单选框 input:radio——checked
1.name:给单选框加上name属性，可以分组-同一组相互会互斥 2.value：给单选框加上value属性，用于提交给后台的数据
5.下拉菜单 select——value
1.option需要设置value值，提交给后台
2.select的value值，关联了选中的option的value值
结合vue使用-v-model
通过$0获取
<div class="app">
<input type="checkbox" v-model="issingle">
<input type="radio" v-model="sdsdf" name="gender" value="1">男
<input type="radio" v-model="sdsdf" name="gender" value="2">女
<select v-model="selectid">
<option value="010">bs</option>
<option value="012">asdf</option>
<option value="013">sds</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
issingle:true,
sdsdf:"2",//对应value值
selectid:'012'
},
methods: {
fn() {
}
}
})
</script>
计算属性 p27
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法：
（1）:声明在computed配置项中，一个计算属性对应一个函数
（2）:使用起来和普通属性一样使用{{ 计算属性名 }}
计算属性-可以将一段求值的代码进行封装
计算机函数内部，可以直接通过this访问到app实例
arr.reduce((上一次值，当前值){},初始值）
<div class="app">
总数{{ totalcount }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
list:[
{id:1,name:'hu1',author:1},
{id:2,name:'hu2',author:2},
{id:3,name:'hu3',author:3},
]
},
computed:{
totalcount(){
let total=this.list.reduce((sum,item)=>sum+item.author,0)
return total
}
},
methods: {
fn() {
}
}
})
</script>
computed计算属性vs methods方法 p28
computed计算属性：
作用：封装了一段对于数据的处理，求得一个结果。
语法：
（1）写在computed配置项中
（2）作为属性，直接使用-this.计算属性{{ 计算属性 }}
缓存特性：
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算-并再次缓存
methods方法：
作用：给实例提供一个方法，调用以处理业务逻辑。
语法：
（1）写在methods配置项中
（2）作为方法，需要调用-this.方法名（）{{ 方法名 }} @事件名=“方法名”
计算属性完整写法 p29
(1)当fullname计算属性，被获取求值时，执行get（有缓存）
会将返回值作为，求值的结果
(2)当fullname计算属性，被修改赋值时，执行set
修改的值，传递给set方法的形参
<div class="app">
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<span>{{ fullName }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
firstName: '吕',
lastName: '小布',
},
methods: {
fn() {
}
},
computed: {
fullName(){
return this.firstName+this.lastName
},
sj: {
get() {
return this.firstName + this.lastName
},
set(value) {
this.firstName = value.slice(0, 1)
this.Name = value.slice(1)
return
}
}
}
})
</script>