Vue学习day02（vscode）

最新推荐文章于 2023-02-24 12:08:57 发布

秃头大学生破晓

最新推荐文章于 2023-02-24 12:08:57 发布

阅读量171

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43748856/article/details/119012357

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.计算属性的setter和getter（为什么这里的fullName不用加括号） 在这里插入图片描述

因为直接调用了get里的方法所以不加（）也可以显示出最终结果
注意：//计算属性一般没有set方法，只读属性
可以简写做：

2.计算属性和methods的对比（计算属性的缓存）

同样执行了五次，但是methods要调用5次而computed只需要一次。
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
当改变了firstName或者lastName的值后，computed会再调用一次，而所有显示出来的词都会改变。只要firstName和lastName不变，computed都只需要调用一次。
在这里插入图片描述
3.ES6相关补充-块级作用域

在ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于funcation的作用域来解决引用外面变量的问题

在ES6中，加入了let，let它是有我们if和for的块级作用域的。
3.闭包的结构

在这里插入图片描述
写一个匿名函数再嵌套一个函数，最后的（i）相当于调用该函数。

4.const的使用

在这里插入图片描述
const变量指向的地址不可以改变，但是可以改变对象内部的属性。这一点看到了一个小姐姐发的腾讯面试过程中有问到了const可不可以改变，所以重点了解了一下。

5.对象字面量的增强写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //const obj = new Object();
    // const obj = {
    //   name :'why',
    //   age:18,
    //   height:1.88,
    //   run:function(){
    //     console.log('在奔跑');
    //   },
    //   eat:function(){
    //     console.log('在吃东西');
    //   }
    // }

    //1.属性的增强写法
    const name = 'why';
    const age = 18;
    const height = 1.88;
    //ES5的写法：(将上述变量放入obj中，最后显示结果能得到值)
    // const obj = {
    //   name :'why',
    //   age:18,
    //   height:1.88,
    //   run:function(){
    //     console.log('在奔跑');
    //   },
    //   eat:function(){
    //     console.log('在吃东西');
    //   }
    // }


    //ES6写法：(将上述变量放入obj中，最后显示结果能得到值，ES6中会自动把值放入obj中的各个属性中)
    const obj = {
      name,
      age,
      height,
    }

    //2.函数的增强写法
    //ES5的写法：
    // const obj = {
    //   run:function(){
    //     console.log('在奔跑');
    //   },
    //   eat:function(){
    //     console.log('在吃东西');
    //   }
    // }

    //ES6的写法：
    const obj = {
      run() {

      },
      eat() {

      }
    }

  </script>
  
</body>
</html>

6.v-on的参数问题
在这里插入图片描述

在没有参数时，方法后的（）可以不加

在这里插入图片描述
当需要传入参数时，
如果是btnclcik2(abc)，因为符合abc变量标识符的书写规范，所以系统会默认abc是一个变量，当找不到abc这个变量时，系统会认为你没有传参，而显示默认值undefined。
如果是<button @click=“btnclcik2(123)”>按钮2
或是<button @click=“btnclcik2(‘abc’)”>按钮2
则会正常显示123和abc
如果是<button @click=“btnclcik2”>按钮2
这个时候，Vue会默认将浏览器生成的event事件对象作为参数传入到方法。
在这里插入图片描述
在方法定义时，我们需要event对象，同时又需要其他参数；
在调用方法时，如何手动的获取到浏览器参数的event对象：$event

7.v-on修饰符的使用


<body>
  <!-- 1..stop修饰符的使用 -->
<div id="app" @click="divclick">
  <!-- 阻止事件冒泡 -->
  <button @click.stop="btnclick">按钮</button>

  <!-- 2..prevent修饰符的使用 -->
  <form action="baidu">
    <input type="submit" value="提交1">
    <input @click.prevent="submitclick"   type="submit" value="提交2">
  </form>

  <!-- 3. .监听某个键帽 -->
  <form action="baidu">
    <input @keyup.enter="keyupclick"   type="text" value="提交2">
  </form>

  <!-- 4. .once修饰符的使用 -->
  <button @click="btnclcik2">btn</button>

  <cpn @click.native="cpnclick"></pn>
</div>
</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            message:'Hello World'
        },
        methods: {
          btnclick(){
            console.log("btnclick");
          },
          divclick(){
            console.log("divclick");
          },
          submitclick(){
            console.log("submitclick");
          },
          keyupclick(){
            console.log("keyupclick");
          },
          btnclcik2(){
            console.log("btnclcik2");
          },
        },
    })
</script>

Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()。//阻止冒泡事件

.prevent - 调用 event.preventDefault()。//阻止自动事件的发生，比如提交表单，当按下提交键之后会自动提交，而.prevent就可以现在函数内处理数据再手动提交

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

8-v-if和v-else和v-else-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<script src="../../vue.js"></script>

<body>
<div id="app">
  <!-- <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2> -->


  <h1>{{result}}</h1>
</div>
</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            message:'Hello World',
            score:99,
        },
        computed: {
          result(){
            let showMessage = "888";
            if(this.score>=90){
              showMessage = '优秀';
            }else if(this.score>=80){
              showMessage = '良好';
            }else if(this.score>=60){
              showMessage = '及格';
            }else{
              showMessage = '不及格';
            }
            return showMessage;
          },
        }
    })
</script>
</html>

9.登录切换案例和input服用问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<script src="../../vue.js"></script>

<body>
<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户名登录" key="username">
  </span>
  <span v-else>
    <label for="email">用户密码</label>
    <input type="text" id="email" placeholder="邮箱登录" key="email">
    <input type="text" id="test" placeholder="测试">
  </span>
  <button @click="changeBtn">切换类型</button>
</div>
</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            isUser:true,
        },
        methods: {
          changeBtn(){
            this.isUser = !this.isUser;
          }
        },
    })
</script>
</html>

在这里插入图片描述
（可以了解一下虚拟DOM）
10.v-show的使用

在控制台输入

再查看我们的html代码：

使用v-if的片段直接没有了，而使用v-show的片段还存在，只是在元素添加了行内样式:display:none

11.v-for遍历数组和对象
01-遍历数组：

<body>
<div id="app">
  <!-- 1.在遍历时没有使用索引值（下标值）-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
  <!-- 2.在遍历的过程中获取下标志 -->
  <ul>
    <li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
  </ul>
</div>
</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            names:['why','kobe','james','curry'],
        }
    })
</script>

02-遍历对象：


<body>
<div id="app">
  <!-- 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  
  <!-- 1.获取key和value    (value,key)-->
  <ul>
    <li v-for="(value,key) in info">{{value}}-{{key}}</li>
  </ul>

  <!-- 3.获取value，key和index-->
  <ul>
    <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>
</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            info:{
              name:'why',
              age:18,
              height:1.88,
            }
        }
    })
</script>

12.v-for使用过程添加key
JavaScript splice() 方法
在这里插入图片描述

在这里插入图片描述

注意：在v-for中使用key，需要绑定的元素都只有唯一值。
疑问：文档中写了第一个参数输入负数的时候可从数组结尾处规定位置。但插入的时候总是插入到倒数第二个，有什么方法可以快速的插入到最末呢？
输入：app.letters.splice(app.letters.length,0,‘mmm’);
或者app.letters.push(‘a’,‘b’,‘c’);
即可插入到最末。

13.哪些数组的方法是响应式的？

</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            letters:['a','b','c','d','e']
        },
        methods: {
          btnclick(){
            /* //1.push方法(可以响应式改变)
            this.letters.push('f'); */

            /* //2.通过索引值修改数组中的元素(不能响应式改变)
            this.letters[0] = 'bbb'; */

            /* //3.pop()//删除数组总的最后一个元素(可以响应式改变)
            this.letters.pop(); */
            
            /* //4.shift()//删除数组总的第一个元素(可以响应式改变)
            this.letters.shift(); */

            /* //5.unshift();//在数组最前面添加元素,会替代第0位(可以响应式改变)
            this.letters.unshift('aaa','bbb','ccc'); */

            //6.splice(start,)(可以响应式改变)
            //作用：删除/插入/替换元素
            //删除元素：第二个参数传入你要删除几个元素,如果第二个不传，会把从第一个元素的值开始的索引删到最后
            //替换元素：第二个参数，便是我们要替换几个元素，后面是用来替换前面的元素
            //插入元素：第二个参数，传入0，并且后面跟上要插入的元素
            this.letters.splice(0,0,'m','l','y');

            //7.sort()//排序
            this.letters.sort();

            //8.reverse()//反转
            this.letters.reverse();


            //set(要修改的对象,索引值,修改后的值)
            Vue.set(this.letters,0,'bbb');

          },
          
        },  
    })

    //面试可能会问
    // 可变参数，将传入的值放进一个数组中
    function sum(...num){
      console.log(num);
    }

    sum(20,30,40,50,60,70);

</script>

(可变参数)

14.作业的回顾和完成
王红元老师的答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<script src="../vue.js"></script>
<style>
  .change{
    color: red;
  }
</style>

<body>
  <!-- 作业需求：点击列表中的哪一项，那么该选项的文字变成红色 -->
<div id="app">
  <ul>
    <li v-for="(m,index) in movies">
      <a :class="{change:currentIndex === index}" href="#" 
      v-on:click="press(index)">
       {{index}}-{{m}}
      </a>
    </li>
  </ul> 

</div>
</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
            change:'change',
            currentIndex:0,
        },
        methods: {
         press:function(index){
           this.currentIndex = index; 
         },
        }
    })
</script>
</html>

秃头大学生破晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习day02（vscode）

1.计算属性的setter和getter（为什么这里的fullName不用加括号）因为直接调用了get里的方法所以不加（）也可以显示出最终结果注意：//计算属性一般没有set方法，只读属性可以简写做：2.计算属性和methods的对比（计算属性的缓存）同样执行了五次，但是methods要调用5次而computed只需要一次。原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。当改变了firstName或者lastName的值后，computed会再调用一次，而所有显示出来的
复制链接

扫一扫