Vue3小白学习记录

Vue3（更新中）

视频链接：

【【已完结(2023更新)】2022年最新版Vue3全套教程（超细致月嫂级教程，包教包会）】 https://www.bilibili.com/video/BV1QA4y1d7xf/?p=11&share_source=copy_web&vd_source=59eae8dc6945dccb1d28aa7c2fe4e6c4

---

一、基本命令

1、v-once

 <template>
 <div>
 <!--v-once：当数据改变时，插值处的内容不会更新-->
  <p v-once>{{uname}}</p>
</div>
</template>
<script>
export default {
  name: 'App',
  data()
  {
    return{
     uname:'张三',
    
    }
  },
 }
  }

}
</script>

<style>
#d1{
  color: #42b983;
}
</style>

2、v-html

<template>
 <div>
<!--  v-html让内容以html的形式显示-->
  <p v-html="msg"></p>
</div>
</template>
<script>
export default {
  name: 'App',
  data()
  {
    return{
     msg:'<h2>张三</h2>',
    
    }
  },
 }
  }

}
</script>

<style>
#d1{
  color: #42b983;
}
</style>

3、v-bind

<template>
 <div>
<!--  v-bind:动态绑定属性的内容-->
 <p v-bind:id="id">v-bind绑定</p>
<!--  v-bind语法糖-->
  <p :id="id">v-bind语法糖</p>
</div>
</template>
<script>
export default {
  name: 'App',
  data()
  {
    return{
     uname:'张三',
    id:'d1',
    }
  },
  methods:{//vue方法的定义
    changeUname()
    {
      //this指向vue实例
      this.uname='李四'
    },


  },

}
  }

}
</script>

<style>
#d1{
  color: #42b983;
}
</style>

4、v-on

<template>
 <div>

<!--  v-on监听DOM事件-->
  <button v-on:click="changeUname">改变名字</button>
<!--  v-on的语法糖 @-->
  <button @click="changeUname">改变名字</button>
</div>
</template>

<script>


export default {
  name: 'App',
  data()
  {
    return{
     uname:'张三',
    
    }
  },
  methods:{//vue方法的定义
    changeUname()
    {
      //this指向vue实例
      this.uname='李四'
    },


  },


    }
  }

}
</script>

<style>
#d1{
  color: #42b983;
}
</style>

二、动态参数

<template>
<div>
<!--  动态参数-->
<!--  动态属性-->
  <p v-bind:[attribute]="id">v-bind属性</p>
<!--  动态事件-->
  <button @click="attribute='class'">改变属性</button>
  <button @[mouseEvent]="attribute='class'">改变属性</button>
  </div>
  </template>
  <script>
  export default {
  name: 'App',
  data()
  {
    return{
     uname:'张三',
      msg:"<h2>标题</h2>",
      id:'d1',
   
    }
  },
  methods:{//vue方法的定义
    changeUname()
    {
      //this指向vue实例
      this.uname='李四'
    },
   
  },


}
  </script>

三、计算属性

<template>
<div>
<!--  计算属性(不需要加上函数的括号).将其当作普通的属性即可-->
     <!--第一种 使用js表达式3次  -->
  <p>{{msg.split('').reverse().join()}}</p>
  <p>{{msg.split('').reverse().join()}}</p>
  <p>{{msg.split('').reverse().join()}}</p>
<!--  第二种使用计算属性 使用一次-->
  <p>{{reverseMsg}}</p>
  <p>{{reverseMsg}}</p>
  <p>{{reverseMsg}}</p>
<!--  第三种使用方法的调用 使用3次-->
  <p>{{reverseMessage()}}</p>
  <p>{{reverseMessage()}}</p>
  <p>{{reverseMessage()}}</p>

<button @click="reverseMsg='你好'">改变reverseMsg</button>
</div>
</template>

<script>


export default {
  name: 'App',
  data()
  {
    return{
     uname:'张三',
      msg:"<h2>标题</h2>",
      id:'d1',
   
    }
  },
  methods:{//vue方法的定义
  
    reverseMessage()
    {
      return this.msg.split('').reverse().join()
    }

  },
//  计算属性，只要依赖值不变，就不会重新计算，计算属性将基于他们的响应的依赖关系缓存，提高性能
  computed:{
    //简写
    // reverseMsg:function()
    // {
    //   return this.msg.split('').reverse().join()
    //
    // },

    //每一个计算属性中都有一个getter和setter
    //完整的写法
    reverseMsg:{
      set:function (newValue)//设置或者更改计算属性的时候的调用
      {
        console.log(newValue)
        this.msg=newValue
      },
      get:function ()
      {
        return this.msg.split('').reverse().join()
      },


    }
  }

}
</script>

四、监听器watch

<template>
<div>
<p>{{message}}</p>
  <button @click="message='你好'">改变message</button>
<!-- v-model:数据的双向绑定 -->
  <input type="text" v-model="message">
  <p>{{user.name}}</p>
  <button @click="user.name='李四'">改变名字</button>
</div>
</template>

<script>
export default {
  name: "App",
  data()
  {
    return{
      message:"helloWord",
      user:{
        name:'张三'
      }
    }

  },
  watch:{//监听数据的变化
    //每当message变化时，就会执行操作
    // message:function (newValue,oldValue)//一个数据影响多个数据
    // {
    //   console.log(newValue)
    //   console.log(oldValue)
    // //  执行异步操作，或者逻辑结构
    //   if(newValue.length<5||newValue.length>10)
    //   {
    //     console.log("输入框中的内容不能小于5或者大于十")
    //   }
    //
    // }
    message:{
      immediate:true,//初始化的时候调用函数，
      handler:function (newValue)
      {
        if(newValue.length<5||newValue.length>10)
              {
                console.log("输入框中的内容不能小于5或者大于十")
              }
      }
    },
    //监听不到对象的属性的变化，需要使用深度监听deeep
    // user:function (newValue)
    // {
    //   console.log(newValue)
    // }
    // user:{
    //   handler:function (newValue)
    //   {
    //     console.log(newValue)
    //   },
    //   deep:true,//表示是否深度监听，监听器会逐层向下监听，给每个属性加上监听器
    // }
    "user.name":{//使用字符串的形式单独监听对象中对应的属性
      handler:function (newValue)
      {
        console.log(newValue)
      },
      deep:true,//表示是否深度监听，监听器会逐层向下监听，给每个属性加上监听器
    }
  }
}
</script>

<style scoped>

</style>

总结