大一菜鸟的vue学习之路（三）组件基础 下

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

---

optionsAPI

computed计算属性使用

• 任何包含响应式数据的复杂逻辑，应该使用计算属性
• 计算属性将被混入到组件实例中
• 所有的getter 和 setter 的this上下文自动地绑定为组件实例

computed:{
//计算属性默认对应的是一个函数
   fullname(){
      return this.firstName + "" +this.lastName
   }
}

• 计算属性 vs methods

  • 计算属性有缓存
  • methods有多少次就执行几次
  • 计算属性会基于它的依赖关系进行缓存
  • 在数据不发生变化时，计算属性是不需要重新计算的
  • 如果依赖的数据发生变化，在使用时，计算属性依旧会重新进行计算

计算属性完整写法

computed: {
   fullname:{
      get: function(){
         return this.firstname + "" + this.lastname
      },
      set:function(value){
         const names = value.split(" ")
         this.firstname = name[0]
         this.lastname = name[1]
      }
   }
}

侦听器watch选项使用

• 在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用watch来完成了

watch:{
   //1.默认有两个参数，newvalue/oldValue
   message(newValue,oldValue){
      console.log("发送变化",newValue,oldValue)
   }
   //2.如果是对象类型，那么拿到的是代理对象
   //3.获取原生对象
   console.log({...newValue})
   console.log(Vue.toRaw(newValue))
}

watch侦听选项

• 侦听info，修改info.name

watch:{
   info:{
      handler(newValue,oldValue){
      console.log("发送变化",newValue,oldValue)
   },
   deep:true,
   immediate:true
   },
   "info.name":function(newValue,oldValue){
      console.log("改变",newValue,oldValue)
   }
}

(vue2)$watch的API

• 第一个参数是要侦听的源
• 第二个参数是侦听的回调函数callback
• 第三个参数是额外的其他选项，比如deep、immediate

created(){
    console.log('created')
    this.$watch("message",(newValue,oldValue) =>{
       console.log("已改变",newValue,oldValue)
    },{deep:true})
}

v-model

• 要我们在代码逻辑获取到用户提交的数据，我们通常会使用v-model指令来完成
• v-model指令可以在表单input、textareal以及select元素上创建双向数据绑定
• 他会根据控件类型自动选取正确的方法来更新元素
• v-model是语法糖，它负责监听用户的输入事件来更新数据（原方法是:value 加上 @input把最新的值赋给绑定的属性中）【可以绑定input、textareal、select】

通过fetch发送和接收请求 fetch（URL,{options}）

• 绑定checkbox

  • 当你绑定单选框时，默认绑定的是布尔值--value属性并不影响v-model的值。
  • 当你绑定checkbox多选框时，绑定到属性中的值是一个Array---必须明确绑定value值，选中的话，value值会传入数组。

• 绑定radio

  • 要绑定value，选中则传入选中的value

• 绑定select 【写到select标签里】

  • select--option（多选 multiple）

  • 都要绑定value，单选返回值，多选返回数组

v-model的值绑定

• 动态绑定值

<option v-for="item in allFruits" 
    :key="item.value"
    :value="item.value">
    {{item.text}}
</option>
</select>
<h2>{{fruits}}</h2>
...
data(){
   return{
     allFruits:[
       { value:"apple",text:"苹果"},
       { value:"orange",text:"橘子"},
       { value:"banana",text:"香蕉"},
     ],
     fruits:[],
   }
}

v-model修饰符

• lazy--绑定change()事件，只有在提交时（比如回车）才会触发绑定

  • <input type="text" v-model.lazy="message">
    <h2>message:{{message}}</h2>
    

• number--自动将内容转换成数字

  • 不然的话绑定过去是字符串

• trim--去除首尾的空格（有空格根本不触发绑定）