黑马高大神 vue框架 第二天

day2:
1. v-text级别大于插值表达式  设置标签的innerText
v-html是渲染HTML标签  innerHtml

textContent：‘618’
htmlContent:`<span style="color:red;font-size:18px">dadw</span>`
v-text='textContent'
v-html='htmlContent'

2. v-if v-show
表达式=>布尔值=>true显示=>false=>隐藏

导入图片
img :src='girlImg'
button @click='showImg !=showImg'

import girlImg from ''
data(){
    return:{
    girlImg,
    showImg:true,
}}
v-if: true渲染元素  false移除元素
v-show:display:none
if不需要频繁切换 show是需要频繁切换

3.

item是项  index是索引值  :key是绑定索引  写key会提升性能
p v-for='(item,index) in list' :key='index'
    {{item}}
@click='addItem'
data:  list:[1,2,3]
addItem(){
    //this.list.push(~~(Math.random()*1000))
    //Math.floor == ~~  语法糖
//浅拷贝  第二个参数 给到第一个...list   
    this.list=[...this.list,~~(Math.random()*1000)]
}

更新元素的方法
updateItem(){
 第一种方式
 const value=~~(Math.random()*1000)
 this.list.splice(0,1,value)0是要删除的索引   1删除几个  value插入的值

这里就是为list数组 的第一个索引数  删除一个 插入一个1000以内的随机数

 //第二种方式    
 this.list[0]=~~(Math.random()*1000);//检测不到数组的变化
 this.$forceUpdate();//强制更新  将数据再一次渲染
}

4.v-for的更新机制
虚拟dom --存于内存
根据模板  新的虚拟dom  旧的虚拟dom 比较(diff算法)   找不同 patch方法增量更新到页面

5.diff算法
diff只是同级比较
算法复杂度  将On3 -On
第一级只跟第一级比较  如果元素相同  属性变化  只需要更新属性
更新 patch更新即可
v-for 虚拟dom就是一个js对象  标识dom  js的执行效率更高 更快
diff只是同级比较

6.v-for的key作用
没有key 或者key使用索引下标
更新的时候采用 就地更新的做法
最大化的复用元素  元素的错位
key的要求：唯一的数字或者字符串  不能是对象

有key diff会使用key进行比较
虚拟dom-js对象用来描述dom结构
diff算法同级比较 key 更新的时候有优秀的性能

7.class的类名的动态绑定   class类名的动态绑定要{在里面写}
v-bind:class="{类名:布尔值}"
布尔值为true 类名显示    false 类名不显示

例子:  { name : item.id===selectedId } 只能有一个li有高亮
div :class='{name:showName}'
button @click="showName=!showName"
ul

这里的clas动态绑定就是 item.id===选中的id  的item项 才会有 这个class的样式
 li @click='clickItem(item.id)' :class='{name:item.id===selectedId}' v-for='item in list' :key='item.id'
{{item.name}}

data(){
    return:{

    showName:true,
    list:[
    {id:1,name:'zw'},{id:2,name:'zw'},{id:3,name:'zw'}],
    selectedId:null,//默认的选中id
}}

这里如果点击list数组的第一项 就会吧第一项的索引0传递给方法   在方法里面 吧传递的0给默认选中的  那我选中的那一个item项绑定了class样式  就会有选中的样式   排他思想
clickItem(id){ 
    // 定义data的默认选中  =接受过来的点击的li的id
    this.seselectedId=id
    数据驱动视图
}

8.style动态设置
语法:      :style='{属性名:值}'
例子:
div :style="{color:defaultColor,fontSize=defaultSize}" 
button @click='changeColor'
data(){
return:{
    colors:['red','blue','pink','yellow','brown','green'],
    defaultColor:null,//随机的颜色给这个
    sizes:['12px','24px','36px'],
    defaultSize:null,//随机的大小给这个
}
changeColor(){
    随机颜色
    this.defaultColor=this.colors[~~(Math.random()*this.colors.length)]
    随机大小
    this.defaultSize=this.sizes[~~(Math.random()*this.sizes.length)]
}

9.bootstrap安装
9-1.npm i bootstrap
9-2. main.js引入bootstrap的样式 
9-3. import "bootstrap/dist/css/bootstrap.css"

<tr v-for='item in list' :key='item.id'>

这里item.price价格大于100的才会有样式
   <td> :class='{red:item.price >100}'> {{item.price}}</td>
</tr>
data:
    name:'',//名称
    price:0,//价格
    list:[
    {id:1,name:'dwa',price:199,tiem:new Date('2023-5-3')},
    {id:2,name:'dwa',price:199,tiem:new Date('2023-5-3')},
    {id:3,name:'dwa',price:199,tiem:new Date('2023-5-3')}]
新增数据的方法
btnAdd(){
    获取数据
    if(this.name && this.price)
    {
    随机数id
    const id=~~(Math.random()*1000);
    向数组中添加 一个新的列表数据
    this.list.push({
        id,
        name:this.name,
        price:this.price,
        time:new Date()
    });
    清空数据
    this.name=''
    this.price=0
}

findIndex()方法找索引
[1,2,3].findIndex(function(item,index){
 0,1,2
    return item===2  //1  索引是1 找第二项数据
})
删除数据 的方法
delItem(id){
第一种写法 找索引
    这个id是传递过来的某一项td
    confirm是确认框 
    if(id &&confirm("确定删除该品牌吗?")){
    判断id是否存在
    splice删除某个元素 findIndex找到那一项的id等于传递过来的id 的索引  
    let index=this.list.findIndex((item)=>item.id ===id)
    删除该索引值    index是找到了点击的那一个项  删除1项
    this.list.splice(index,1）//移除该选项

第二种写法 过滤器 其结果是返回新数组
[1,2,3].filter(item=>item>2) //[3]
[1,2,3].filter(item=>item!==1) //[2,3]
[1,2,3].filter(item=>item===1) //[1]

这里就是遍历item的id   我要找第三项  3 我要删除第三项  那我把第三项过滤掉  返回一个除了3都有的新数组  再把新数组渲染到页面上  就实现了删除某一项的操作

    this.list=this.list.filter((item)=>item.id !==id)
//新数组  赋值给原来的数据    
vue.filter('过滤器名称',(值)=>{return "返回处理的值"}
}