11-04 Vue.js 知识梳理

1.MVVM

model：模型，数据对象 ===>（data）

view：视图，模板页面 ===> Dom

viewModel：视图模型（vue）===> 视图的监听和数据绑定

2.基础语法

• 双大括号表达式

  <p> {{ msg }} <p>
  
  <p v-text="msg"><p>
  
  <p v-html="msg"><p>

• 指令一：强制数据绑定

  <img v-bind:src="imgUrl" />
  <img :src="imgUrl" />

• 指令二：绑定事件监听

  <button @click="test">测试</button>
  
  // 带传参
  <button @click="test(key)">测试</button>

  3.数据监听与计算

• computed

  data(){
      return {
          
      fristName:"",
      lastName:"",
      fullName:"",
  
      }
  }
  
  
  
  // 计算属性-是回调函数（你定义的，你没有调用，但是最终执行了）
  // 计算函数 -读取改属性值和相关数据发生变化的时候调用
  computed:{
      fullNameComputed(){
          return this.fristName +  ' ' +  this.lastName
      },
  
      // 双向数据绑定监听
      fullName3:{
          // 回调函数 当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
          get(){
               return this.fristName +  ' ' +  this.lastName
          },
          
          // 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
          set(val) {
              const name = val.split('')
              this.fristName  = name[0]
              this.lastName = name[1]
          }       
  
       }
  
  }
  
  // 监听数据
  watch: {
  
      fristName: function(val) {
          this.fullName = val  +  '' +  this.lastName
      }
  
      lastName: function(val) {
          this.fullName =  this.fristName  +  '' +  val 
      }
  
  }
  
  
  
  
  
  
  

  3.样式的动态绑定

• data(){
      return {
          a:"aClass",
          isA: false,
          isB: true,
          ativeColor:"red",
          size:20
      }
  }
  
  
  
  // class绑定 :class='xxx'
  
  <p :class="a"></p>
  <p :class="{aClass: isA, bClass : isB}"> xxx 是对象</p>
  
  <p :class="['aClass','bClass']"> xxx 是数组</p>
  
  // style绑定
  
  <p :style="{color:ativeColor,fontSize:size}"></p>
  
  
  //样式表
  
  <style>
  
  .aClass {
      color : "#333"
  }
  
  .bClass {
      color : "#f00"
  }
  
  .cClass {
      color : "#336699"
  }
  </style>
  

  4.条件渲染

5.条件渲染

// 遍历数组
<ul>
    <li v-for="(p,index) in list" :key="index">
    {{p.name}}-------{{p.age}}
    </li>
</ul>


// 遍历对象


<ul>
    <li v-for="(p,key) in list[0]" :key="key">
    {{p}}-------{{key}}
    </li>
</ul>



// 删除
list.splice(index,1)

// 修改
list.splice(index,1 , obj) 

// 新增
list.splice(index,0 , obj)

data(){
    return {
        searchName:"",
        orderType:0, // 0 -原本 1-升序  2-降序
        person:[{name:"Tom1",age:18},
                {name:"Tom2",age:23},
                {name:"Tom3",age:6},
                {name:"Tom4",age:81},
                {name:"Tom5",age:65},]
    }
}


computed:{
    filterPersons(){
        const {searchName,  person,  orderType} = this
        let fPerson ;
        fPerson  = person.filter(item => item.name.indexOf(searchName) >= 0 )
        if(orderType > 0) {

            if(orderType == 2){
                fPerson.sort((item1,item2) => item2.age - item1.age)
             } else {
                fPerson.sort((item1,item2) => item1.age - item2.age)
             }
-        }
        return fPerson 
    }

}


method:{

    orderHandle(order) {
        this.orderType = order
    }

}





// html
<input v-model="searchName"  />
<ul>
    <li v-for="(p,index) in filterPersons" :key="index">
        {{index}}------{{p.name}}-------{{p.age}}
    </li>
</ul>

<button @click="orderHandle(1)"> 年龄升序</button>
<button @click="orderHandle(2)"> 年龄降序</button>
<button @click="orderHandle(0)"> 原本顺序</button>