Vue基础学习笔记（二）

别活在过去i

已于 2023-11-20 17:05:41 修改

阅读量89

点赞数

分类专栏： Vue2基础文章标签： vue.js html5 javascript

于 2023-11-20 16:35:14 首次发布

本文链接：https://blog.csdn.net/L170311/article/details/134512369

版权

Vue2基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

19.computed和watch之间的对比

20.绑定class样式和style样式

11.键盘事件

Vue中常用的按键别名：

        回车=》enter

        删除=》delete（捕获“删除”和退格键）

        退出=》esc

        空格=》space

        换行=》tab

        上=》up

        下=》down

        左=》left

        右=》right

2.Vue未提供别名的按键。可以使用按键原始的key值去绑定，但是要注意转为kebab-case(短横线命名法)

如：CapsLock要改写为caps-lock

3.系统修饰符（用法特殊）：ctrl,atl,shift,meta(win键)

        （1）配合keyup使用：按下修饰键的同时，再按下其他键，事件才被触发

        （2）配合keydown使用，正常触发事件

4.也可以使用keycode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名，可以去定义按键别名

 <body>
    <div id="root">
      <h1>前端框架——{{msg}}</h1>
      <input
        type="text"
        placeholder="按下ctrl+加任意键获得输入值"
        @keyup.ctrl="showinfo"
      />
      <input
        type="text"
        placeholder="按下回车获得输入值"
        @keyup.enter="showinfo"
      />
    </div>
    <!--创建vue实例 -->
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "VUE",
        },
        methods: {
          showinfo(e) {
            console.log(e.target.value);
          },
        },
      });
    </script>
  </body>

12.事件小技巧

1.事件修饰符可以结合使用

如：@click.prevnt.stop——————>先停止默认事件再停止冒泡

2.键盘事件名称也是可以结合使用的

如：@keyup.ctrl.y————————>同时按下ctrl和y才触发事件

13.姓名案例

<body>
    <div id="root">
      <h1>前端框架——{{msg}}</h1>
      称号:<input
        type="text"
        v-model="first_name"/><br>
      姓名:<input
      type="text"
      v-model="last_name"/><br>
      <span>全称:{{fullname()}}</span>
    </div>
    <!--创建vue实例 -->
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "VUE",
          first_name:'篮球王子',
          last_name:'菜虚鲲'
        },
        methods: {
          fullname() {
            return this.first_name+'·'+this.last_name;
          },
        },
      });
    </script>
  </body>

14.计算属性

计算属性

1.定义：要用的属性不存在，要通过已有属性计算得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter

3.get函数什么时候执行？

        （1）初次读取时会执行一次

        （2）当依赖的数据发生改变时会被再次调用

4.优势：与methods实现出现在vm上，直接读取使用即可

5.备注：

        1.计算属性最终会出现在vm上，直接读取即可

        2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要计算时依赖的数据发生改变

<body>
    <div id="root">
      <h1>前端框架——{{msg}}</h1>
      称号:<input
        type="text"
        v-model="first_name"/><br>
      姓名:<input
      type="text"
      v-model="last_name"/><br>
      <span>全称:{{fullname}}</span>
    </div>
    <!--创建vue实例 -->
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "VUE",
          first_name:'篮球王子',
          last_name:'菜虚鲲'
        },
        computed: {
          fullname:{
            get(){
              console.log('get被调用了')
              return this.first_name+'——'+this.last_name;
            },
            set(value){
              console.log('set被调用了')
              var arr = value.split("——")
              this.first_name=arr[0]
              this.last_name=arr[1];
            }
          }
        }
      })
    </script>
  </body>

15.计算属性的简写

computed: {
          //简写形式，只用get，不用set时使用
          fullname(){
              console.log('get被调用了')
              return this.first_name+'——'+this.last_name;
          }
        }

16.监视属性

监视属性：

        1.当被监视的属性变化时，回调函数自动调用，进行相关操作

        2.监视的属性必须存在，才能进行监视

        3.监视的两种写法

        （1）new Vue时传入watch配置

        （2）通过vm.$watch监视

 <body>
    <div id="root">
      <h1>前端框架——{{msg}}</h1><br>
     <h2>流量巨星——{{info}}</h2>
     <button @click="changec">点我切换</button>
    </div>
    <!--创建vue实例 -->
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "VUE",
          ishoot:true
        },
        computed: {
          //简写形式，只用get，不用set时使用
          info(){
              return this.ishoot?"菜虚鲲":"顶真"
          }
        },
        methods:{
          changec(){
            this.ishoot=!this.ishoot;
          }
        },
        //第一种写法
        watch:{
          ishoot:{
            immediate:true,//初始化时让handler调用一下
            //handler什么时候调用，当ishoot发生改变时
            handler(newvalue,oldvalue){
              console.log("ishoot被修改了",newvalue,oldvalue)
            }
          }
        }   
      })
      //第二种写法
     /* vm.$watch('ishoot',{
          immediate:true,//初始化时让handler调用一下
          //handler什么时候调用，当ishoot发生改变时
          handler(newvalue,oldvalue){
              console.log("ishoot被修改了",newvalue,oldvalue)
            }
      })*/
    </script>
  </body>

17.深度监视

深度监视：

        1.Vue中的watch默认不监测对象内部值的改变（一层）

        2.配置deep:true可以监测对象内部值改变（多层）

备注

        （1）.vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

        （2）使用watch时根据数据的具体结构，决定是否采用深度监视

 <body>
    <div id="root">
      <h2>a的值是:{{numbers.a}}</h2>
      <button @click="numbers.a++">点我让a+1</button>
    </div>
    <!--创建vue实例 -->
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data: {
          numbers: {
            a: 1,
            b: 1,
          },
        },
        watch: {
          numbers: {
            //深度监视
            deep: true,
            handler() {
              console.log("number改变了");
            },
          },
        },
      });
    </script>
  </body>

18.监视的简写

watch:{
            //  简写形式1
            ishoot(newvalue,oldvalue){
            console.log("ishot被修改了",newvalue,oldvalue)
                }
            },
      })
           //  简写形式2
           vm.$watch('ishoot',function(newvalue,oldvalue){
           console.log("ishot被修改了",newvalue,oldvalue)
      })
      
      watch:{
            first_name(val){
                //修改姓后3秒钟后修改全名
                // 这里的延时器必须写成箭头函数的形式，因为该函数是一个对象的方法，则它的this指针指向这个对象
                // 如果写出正常JS函数，那么this就会是window，无法执行修改任务
                setTimeout(()=>{
                    this.fullname=val+'-'+this.last_name
                },3000)
            },
            last_name(val){
                this.fullname=this.firstname+'-'+val
            }

19.computed和watch之间的对比

两者之间的区别：

        1.computed能完成的功能，watch都可以完成

        2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则

        （1）所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

        （2）所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象

20.绑定class样式和style样式

绑定样式：

1.class样式

        写法：class='xxx',xxx可以是字符串，对象，数组

        字符串写法适用于样式的类名不确定，需要动态指定

        数组写法，适用于：要绑定的样式个数不确定，名字也不确定

        对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定要不要使用

2.style样式

        :style='xxx',其中xxx是动态值组成的对象

        :style='[a,b]'，其中a,b是样式对象


      <style>
      .basic {
        width: 200px;
        height: 90px;
        border: 1px solid black;
      }
      .happy {
        background-color: rgb(241, 139, 156);
        border: 5px solid red;
      }
      .sad {
        background-color: gray;
        border: 5px solid green;
      }
      .normal {
        background-color: rgba(45, 144, 236, 0.836);
      }
      .a1 {
        background-color: #bfa;
      }
      .a2 {
        font-size: 50px;
        text-shadow: orange;
      }
      .a3 {
        border-radius: 20px;
      }
    </style>
  <body>
    <div id="root">
      <!-- 绑定class样式  字符串写法，适用于：样式的类名不确定，需要动态指定 -->
      <div class="basic" :class="mood" @click="changeMood">字符串写法</div>
      <br />
      <!-- 绑定class样式，数组写法，适用于：要绑定的样式个数不确定，名字也不确定-->
      <div class="basic" :class="classArr">数组写法</div>
      <br />
      <!-- 绑定class样式，对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定要不要使用 -->
      <div class="basic" :class="classobj">对象写法</div>
      <br />
      <!-- 绑定style样式-对象写法 -->
      <div class="basic" :style="styleobj">绑定style样式-对象写法</div>
      <br />
      <!-- 绑定style样式，数组写法 -->
      <div class="basic" :style="[styleobj,styleobj2]">绑定style样式，数组写法</div>
    </div>
    <!--创建vue实例 -->
    <script type="text/javascript">
      const vm = new Vue({
        el: "#root",
        data: {
          mood: "normal",
          classArr: ["a1", "a2", "a3"],
          classobj: {
            a1: true,
            a2: true,
          },
          styleobj: {
            fontSize: "20px",
            color: "red",
          },
          styleobj2: {
            backgroundColor: "orange",
          },
        },
        methods: {
          changeMood() {
            var arr = ["happy", "normal", "sad"];
            var index = Math.floor(Math.random() * 3);
            this.mood = arr[index];
          },
        },
      });
    </script>
  </body>

上一篇：Vue基础学习笔记（一）-CSDN博客

下一篇：Vue基础学习笔记（三）-CSDN博客

持续更新中...........

别活在过去i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础学习笔记（二）

（2）所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。（1）所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。（1）.vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定要不要使用。如：@keyup.ctrl.y————————>同时按下ctrl和y才触发事件。
复制链接

扫一扫