0
点赞
收藏
分享

微信扫一扫

Vue学习笔记(四) P23~P32

kiliwalk 2022-08-30 阅读 86
Vuev-onvar let constcomputed云平台云计算


文章目录

  • ​​P.23 ==computed== get / set​​
  • ​​P.24 ==computed== 与 ==methods==对比​​
  • ​​P.25 ==块级作用域== var 和 let​​
  • ​​P.25.1var​​
  • ​​P.25.2 let​​
  • ​​P.26 ==三种方案对比==​​
  • ​​P.27 ==const==的使用方法和注意点​​
  • ​​P.28 ==ES6==对象字面量增强写法​​
  • ​​P.29 ==v-on==的基本使用和语法糖​​
  • ​​P.30 ==v-on==的参数传递问题​​
  • ​​P.30.1. 函数参数传递​​
  • ​​P.30.2. @click 点击事件无参数​​
  • ​​P.30.3. 点击事件有参数时​​
  • ​​P.30.4. 同时传递自定义参数和事件时​​
  • ​​P.31 ==v-on==的修饰符使用​​
  • ​​P.31.0 事件冒泡​​
  • ​​P31.1 .stop 事件修饰符: 阻止单击事件继续传播​​
  • ​​P.31.2 .prevent 事件修饰符: 提交事件不再自动重载页面​​
  • ​​P.31.3 @keyup​​
  • ​​P.31.4 .enter 只监听Enter回车键​​
  • ​​P.31.5 .once 只监听第一次​​
  • ​​P.31.6 .native​​
  • ​​P.32 ==v-if、v-else-if、v-else== 的使用​​

P.23 computed get / set

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{fullName1}}</h2>
  <h2>{{fullName2}}</h2>
  <h2>{{fullName3}}</h2>
</div>
  
<script>const vm = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue.js!",
      firstName: 'Kobe',
      lastName: 'Bryant',
    },
    
    computed:{
      fullName1: function(){
        return this.firstName + ' ' + this.lastName;
      },
      //computed属性默认只有getter不过在需要时你也可以提供一个setter
      fullName2:{
        set: function(newValue){
          console.log('-----' + newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get: function(){
          return this.firstName + ' ' + this.lastName;
        }
      },
      // 如果只读,简化写法如下fullName3,就是fullName1的由来
      fullName3: function(){
        return this.firstName + ' ' + this.lastName;
      },
      
    }
  })</script>

Vue学习笔记(四) P23~P32_Vue

  • ​​小结​​
  • ​​computed属性使用时只需写函数名,不需要加上双括号 ( )​​
  • ​​通常只读时只需要写上get,不用写上set​​

P.24 computed 与 methods对比

<div id="app">
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  
  <h2>{{fullName1}}</h2>
  <h2>{{fullName1}}</h2>
  <h2>{{fullName1}}</h2>
  <h2>{{fullName1}}</h2>    
</div>
  
<script>const vm = new Vue({
    el: "#app",
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant',
    },
    methods:{
      getFullName: function(){
        console.log("getFullName")
        return this.firstName + ' ' + this.lastName;
      }
    },
    computed:{
      fullName1: function(){
        console.log("fullName1")
        return this.firstName + ' ' + this.lastName;
      },
      //computed属性默认只有getter不过在需要时你也可以提供一个setter
      fullName2:{
        set: function(newValue){
          console.log('-----' + newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get: function(){
          return this.firstName + ' ' + this.lastName;
        }
      }
    }
  })</script>

Vue学习笔记(四) P23~P32_Vue_02

  • ​​小结​​
  • ​​computed属性只计算(调用)一次,methods每次都计算(调用)​​

P.25 块级作用域 var 和 let

P.25.1var

{
  var name = "liujing";
  console.log(name);
}
console.log(name);
// 在这里能跨作用域访问

Vue学习笔记(四) P23~P32_var let const_03

var func;
if (true){
  var name = "why";
  func = function(){
    console.log(name);
  }
}
name = "kobe"
func()
// 无意中修改了name

Vue学习笔记(四) P23~P32_Vue_04

<div id="app">
  <button>按钮0</button>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
</div>

<script>const btns = document.getElementsByTagName("button");
  for (var i = 0; i < btns.length; ++i){
    btns[i].addEventListener('click', function(){
      console.log("第" + i + "个按钮被点击");
    })
  }</script>

Vue学习笔记(四) P23~P32_Vue_05


所以var想实现类似功能,必须在function中才能实现

const btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; ++i){
  (function(i){
    btns[i].addEventListener('click', function(){
      console.log("第" + i + "个按钮被点击");
    })
  })(i);
}

Vue学习笔记(四) P23~P32_var let const_06

P.25.2 let

<script>
  const btns = document.getElementsByTagName("button");
  for (let i = 0; i < btns.length; ++i){
    btns[i].addEventListener('click', function(){
      console.log("第" + i + "个按钮被点击");
    })
  }
</script>

Vue学习笔记(四) P23~P32_v-on_07

  • ​​小结​​
  • ​​ES5中 var {}, if , for等 没有块级概念 ,只有函数有作用域​​
  • ​​ES6中 let 有块级作用域的概念​​

P.26 三种方案对比

理解 ES5没有作用域 ES6的let有作用域, 对于学过C/C++的程序员来说很容易理解

P.27 const的使用方法和注意点

  • 建议:在ES6开发中优先使用const,只有需要改变某一个标识符时才使用let

<script>
  const name = "liujing";
  name = "kobe";
</script>

Vue学习笔记(四) P23~P32_computed_08

<script>
  const name;
  name = "kobe";
</script>

Vue学习笔记(四) P23~P32_var let const_09

<script>
  const obj = {
    name: 'why',
    age: 18,
    height: 1.88
  };
  console.log("1", obj);
  
  obj.name = 'kobe';
  obj.age = 40;
  obj.height = 1.87;
  console.log("2", obj)
</script>

Vue学习笔记(四) P23~P32_v-on_10

  • ​​小结​​
  • 一旦给​​const​​ 变量赋值后,不能修改
  • 给变量用​​const​​ 修饰的同时必须初始化赋值
  • 常量含义是指向的对象不能修改,但​​能修改对象内部的属性​​

P.28 ES6对象字面量增强写法

<script>
  
  // 1 最老的一种写法
  const obj1 = new Object();
  obj1.name = "liujing";
  obj1.age = 18;
  obj1.run = function(){
    console.log("1-running...")
  };
  console.log("1", obj1);
  obj1.run();
  
  // 2 比较新的写法
  const obj2 = {
    name: 'kobe',
    age: 22,
    run: function(){
      console.log("2-running...")
    },
  }
  console.log("2", obj2);
  obj2.run();
  
  // 属性增强写法
  const name = "why";
  const age = 18;
  
  // 3 ES5写法
  const obj3 = {
    name: name,
    age: age
  }
  console.log("3", obj3);
  
  // 4 ES6写法
  const obj4 = {
    name,
    age
  }
  console.log("4", obj4);
  
  // 5 最新的函数可以简写
  const obj5 = {  
    run(){
      console.log("5-running...")
    }
  }
  obj5.run();
  
  // augular(google)
  // TypeScript(microsoft) -> ts(类型检测)
  // flow(facebook) 
</script>

Vue学习笔记(四) P23~P32_computed_11

P.29 v-on的基本使用和语法糖

点击,拖拽,键盘事件

<div id="app">
  <h2>{{counter}}</h2>
  <button v-on:click="counter++">+</button>
  <button @click="counter--">-</button>
  <br>
  <button v-on:click="increment()">+</button> 
  <button @click="decrement">-</button>
</div>
  
<script>  
  const vm = new Vue({
    el: "#app",
    data:{
      counter: 0
    },
    methods:{
      increment(){
        this.counter++;
      },
      decrement(){
        this.counter--;
      }
    }
  })  
</script>

Vue学习笔记(四) P23~P32_var let const_12

  • 小结
  • v-on:click 语法糖 @click
  • v-on:click=“counter++” 可以直接写简单的变量算式
  • v-on:click=“increment()” 可以直接函数
  • v-on:click=“increment” 函数不传递参数时可以省略括号

P.30 v-on的参数传递问题

P.30.1. 函数参数传递

</script>
  // 如果函数需要参数,但没有传入,则函数形参默认为undefined
  function abc(name) {
    console.log(name);
  }
  abc();
</script>

Vue学习笔记(四) P23~P32_var let const_13

  • 小结
  • 如果函数需要参数,但没有传入,则函数形参默认为undefined

P.30.2. @click 点击事件无参数

<div id="app">
  <!-- 1 -->
  <!-- 点击事件没有参数时, 括号可有可无 -->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>
  <br>
</div>

<script>const vm = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      btn1Click() {
        console.log("bnt1Click...")
      }
    }
  });</script>

Vue学习笔记(四) P23~P32_Vue_14

  • 小结
  • 如果方法不需要传递参数,可以不加括号( )

P.30.3. 点击事件有参数时

<div id="app">
  <button @click="btn2Click(123)">按钮2-1</button>
  <button @click="btn2Click('123')">按钮2-2</button>
  <button @click="btn2Click(abc)">按钮2-3</button>
  <button @click="btn2Click('abc')">按钮2-4</button>
  <!-- 需要参数但没有传入,Vue默认将浏览器产生的event事件作为参数传入 -->
  <button @click="btn2Click">按钮2-5</button>
</div>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      btn2Click(msg) {
        console.log("bnt2Click...", msg)
        // console.log("bnt2Click...")
      },
    }
  });

Vue学习笔记(四) P23~P32_var let const_15

  • 小结
  • 2-1 123被作为数字传递
  • 2-2 '123’被作为字符串
  • 2-3 abc 被作为Vue变量,但data中没有定义该变量,所以报错
  • 2-4 ‘abc’ 被作为字符串
  • 2-5 需要参数但没有传入,Vue默认将浏览器产生的event事件作为参数传入

P.30.4. 同时传递自定义参数和事件时

<div id="app">
  <!-- 3 同时需要event 和 自定义参数 -->
  <button @click="btn3Click">按钮3-1</button>
  <button @click="btn3Click(123)">按钮3-2</button>
  <button @click="btn3Click(123, event)">按钮3-3</button>
  <button @click="btn3Click(123, $event)">按钮3-4</button>
</div>
<script>const vm = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      btn3Click(msg, event) {
        console.log("bnt3Click...", msg, event)
        // console.log("bnt2Click...")
      }
    }
  });</script>

Vue学习笔记(四) P23~P32_var let const_16

  • 小结
  • 3-1 该传递参数却未传递参数时,默认传递event事件
  • 3-2 只传递一个时,另一个为undefined
  • 3-3 传递了规定的两个,但后者event未加引号为变量,但 data中未定义该变量,所以报错,并显示undefined
  • 3-4 要想传递event参数时,要使用​​$event​​

P.31 v-on的修饰符使用

P.31.0 事件冒泡

<div id="app">
  <div @click="div1Click()">
    aaaaa
    <button @click="btn1Click">按钮1</button>
  </div>    
</div>

<script>const vm = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      btn1Click() {
        console.log("bnt1Click...")
      },
      div1Click() {
        console.log("div1Click...")
      },
    }
  });</script>

Vue学习笔记(四) P23~P32_Vue_17

  • 冒泡现象:
  • 点击aaaaa: 打印 divClick…
  • 点击按钮1: 同时打印了 btn1Click… 和 div1Click…,而我们只想要前者

P31.1 .stop 事件修饰符: 阻止单击事件继续传播

代码同上,只是在button处添加了.stop事件修饰符

<button @click="btn1Click">按钮1</button>

Vue学习笔记(四) P23~P32_v-on_18

  • 这里我们再次依次操作
  • 点击aaaaa: 打印 divClick…
  • 点击按钮1: 只打印了 btn1Click… ,就是我们想要的

P.31.2 .prevent 事件修饰符: 提交事件不再自动重载页面

<div id="app">  
  <form action="baidu">
    <input type="submit" value="提交" @click="submitClick" />
  </form>
</div>

<script>const vm = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      submitClick(){
        console.log("submitClick...")
      }
    }
  });</script>

Vue学习笔记(四) P23~P32_var let const_19

  • 现象
  • 显然自定义的点击打印一闪而过,form还是给提交了

<input type="submit" value="提交" @click.prevent="submitClick" />

加上.prevent,就可以了

Vue学习笔记(四) P23~P32_v-on_20


这里要注意我自己犯的一个错误：

我之前的​​<form>​​​并没写在​​<div>​​​中,所以加上了​​.prevent​​后并没有生效,因为Vue只绑定了id为app的div

P.31.3 @keyup

<div id="app">
  <input type="text" @keyup="keyUp" />
</div>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      keyUp(){
        console.log("keyUp...")
      }
    }
  });
</script>

Vue学习笔记(四) P23~P32_Vue_21

  • 我们输入123三个键,弹起三次,所以打印了三次

P.31.4 .enter 只监听Enter回车键

<input type="text" @keyup.enter="keyUp" />

P.31.5 .once 只监听第一次

<input type="text" @keyup.enter.once="keyUp" />

P.31.6 .native

和组件有关,暂时没有学到

P.32 v-if、v-else-if、v-else 的使用

<div id="app" v-if="isShow">
  <h2 v-if="true">{{message}}</h2>
  <h2 v-if="false">{{message}}</h2>
  <h2 v-if="isShow">{{message}}</h2>
</div>

<script>const vm = new Vue({
    el: "#app",
    data: {
      message: "hello vue.js!",
      isShow: true
    },
  });</script>

刚加了会动的图,效果666!!!

Vue学习笔记(四) P23~P32_var let const_22

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

  <!-- 方法二 -->
  <h2>{{result}}</h2>
</div>

<script>const vm = new Vue({
    el: "#app",
    data: {
      message: "hello vue.js!",
      isShow: true,
      score: 100
    },
    computed:{
      result(){
        let ret = "";
        if (this.score >= 90){
          ret = "优秀";
        }else if (this.score >= 80){
          ret = "良好";
        }else if (this.score >= 60) {
          ret = "及格"
        } else {
          ret = "不及格"
        }
        return ret;
      }
    }
  });</script>

Vue学习笔记(四) P23~P32_Vue_23

  • 小结
  • 如果代码简单,直接可以使用v-if
  • 如果代码稍微复杂点,请直接在computed中定义方法,使用js的if, else if, else
  • 所以一般情况下,我们基本很少使用v-else-if, v-else


举报

相关推荐

线性代数|机器学习-P23梯度下降

线性代数机器学习人工智能

江协科技STM32学习- P32 MPU6050

后端kubernetes容器云原生

Cherno C++系列笔记8——P31~P32数组和字符串

c++

P23:React高级-CSS3实现react显示隐藏

react.js动画css3业务逻辑cssHarmonyOS后端开发

C语言学习笔记—P23（＜C语言高阶＞+指针的进阶＜1＞+题例+图解）

c语言

《UE5_C++多人TPS完整教程》学习笔记31 ——《P32 角色移动（Character Movement）》

云计算大数据笔记

转行JAVA日记day2——2019新版30天Java核心技术P32~P40

java开发语言后端

[算法]剑指offer p23二叉树层级遍历 golang

golang算法开发语言

（P23-P29）Java语言基础

java开发语言后端字面值标识符代码人生

Redis学习笔记P01-P02（尚硅谷）

redis
0 条评论