vue基础：渲染&表单数据&过滤器&指令&生命周期
文章目录
- vue基础：渲染&表单数据&过滤器&指令&生命周期
- 一、条件渲染
-
- 1、v-if
- 2、v-show
- 二、列表渲染
-
- 1、列表过滤
-
- 1.1、用watch监视属性实现列表过滤
- 1.2、用computed计算属性实现列表过滤
- 2、列表排序
- 3、监测数据的原理
- 三、收集表单数据
- 四、过滤器
- 五、指令
-
- 1、内置指令：v-cloak
- 2、内置指令：v-once
- 3、内置指令：v-pre
- 4、自定义指令
- 六、生命周期
vue基础：渲染&表单数据&过滤器&指令&生命周期
一、条件渲染
和 Java的if与else if差不多，vue提供了一些条件的渲染，分别是v-if、v-else-if、v-else 与 v-show
这两大类条件渲染虽然都是条件渲染。但是使用场景与特点并不一样
1、v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
通过表达式的布尔值判断该元素是否展示在页面上
- 若表达式结果为false，不展示
- 若表达式结果为true，展示
特点：
- 不展示的dom元素直接被移除
使用场景：
- 适用于切换频率较低的场景（原因是因为频繁移除显示dom元素效率较低）
注意：
- v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”（与Java的条件if同理）
111111
222222
33333
66666
2、v-show
写法：
- v-show=“表达式”
与v-if一样，当表达式结果为true才显示元素
特点：
- 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（通过display属性隐藏）
适用场景：
- 适用于切换频率较高的场景
66666666
777777777
二、列表渲染
列表渲染主要用v-for对数组里面的数组进行遍历，用于展示列表数据
语法：v-for="(item, index) in xxx" :key=“yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
人员列表（遍历数组）
-
{{p.name}}-{{p.age}}
汽车信息（遍历对象）
-
{{k}}-{{value}}
测试遍历字符串（用得少）
-
{{char}}-{{index}}
测试遍历指定次数（用得少）
-
{{index}}-{{number}}
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪A8',
price:'70万',
color:'黑色'
},
str:'hello'
}
})
列表渲染用的key，如果列表需要经常排序等操作，不能用index，应该用数组的对象的id作为key，否则可能不仅效率低下，而且会出现bug
1、列表过滤
列表除了显示出来，还可能会有过滤的操作，也就是前端实现搜索框搜索的操作，这里面用到的原理就是过滤
对于过滤的操作，可以用watch监视属性实现、用computed计算属性实现
人员列表
-
{{p.name}}-{{p.age}}-{{p.sex}}
1.1、用watch监视属性实现列表过滤
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPerons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPerons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
})
1.2、用computed计算属性实现列表过滤
//用computed实现
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
2、列表排序
列表排序则是通过一个点击事件，对数组里面的数据进行排序
人员列表
-
{{p.name}}-{{p.age}}-{{p.sex}}
new Vue({
el:'#root',
data:{
keyWord:'',
sortType:0, //0原顺序 1降序 2升序
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
computed:{
filPerons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
3、监测数据的原理
Vue会监视data中所有层次的数据
- 监测对象中的数据：
- 通过setter实现监视，且在new Vue就传入监测数据
- 如果在对象中后追加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API：
- Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)
- 监测数组中的数据：
- 在Vue修改数组中的某个元素一定要用如下方法：
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
三、收集表单数据
收集表单数据一般通过v-model来实现数据的双向绑定
- 若：
，则v-model收集的是value值，用户输入的就是value值。- 若：
，则v-model收集的是value值，且要给标签配置value值。- 若：
- 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 2.配置input的value属性:
- v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- v-model的初始值是数组，那么收集的的就是value组成的数组
四、过滤器
过滤器本质上就是一个函数，可以将某些数据例如时间转化为特定的样式
现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}
123456
//局部过滤器
// 本质就是一个函数
filters:{
// str形参默认值
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
五、指令
1、内置指令：v-cloak
特点：
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
2、内置指令：v-once
特点：
- v-once所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
3、内置指令：v-pre
特点：
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
4、自定义指令
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) (2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
//简写
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
六、生命周期
