Vue学习笔记(3)--计算属性和method的对比、部分ES6、事件监听、条件判断、v-show、v-for

一、计算属性与method的对比

method只会一次次的执行方法，而计算属性可以判断每次参数是否变化而决定是再执行一次还是返回第一次的结果，计算属性会进行缓存，若多次使用时，计算属性只会调用一次。总体来说计算属性比method更加高效。

二、ES6语法的一些学习

块级作用域

• let是var的优化版，因为let具有块级作用域，而var没有。
• 在JavaScript中if和for没有块级作用域，只有函数有块级作用域。

const的使用

• 在JavaScript中，使用const修饰的标识符为常量不可再被赋值。

• ps：在ES6开发中，优先使用const，只有在需要改变某一标识符时才使用let。

• 使用注意：

  • 在使用const定义时需赋值。

  • 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

    const obj = {
    	name = 'x',
    	age: 18,
    	sex: man
    }
    
    obj.name = 'y';
    

对象字面量的增强写法

• 属性的增强写法

  const name = 'x';
  const	age: 18;
  const	sex: man;
  
  //ES5
  const obj = {
  	name: name,
  	age: age,
  	sex: sex,
  }
  
  //ES6
  const obj = {
  	name,
  	age,
  	sex,
  }
  

• 函数的增强写法

  //ES5
  const obj = {
  	run:function(){
  	
  	}
  }
  
  //ES6
  const obj = {
  	run(){
  	
  	}
  }
  

Typescript中加入了类型检测

function split_string(str: String){
	str.split
}

//在输入时就会进行类型检测，若输错会报错
split_string();

三、事件监听

v-on

• 基本使用和语法糖

<h2>
  {{counter}}
h2>
<button v-on:click="add">+button>
<button @click="sub">-button>

const app = new Vue({
    el: '#app',
    data: {
      counter:0
    },
    methods:{
      add(){
        this.counter++
      },
      sub(){
        this.counter--
      }
    }  
  })

• 参数问题

<button @click="btn1Click()">11button>
<button @click="btn1Click">11button>


<button @click="btn2Click()">22button>
<button @click="btn2Click">22button>


<button @click="btn3Click(123,$event)">button>

methods:{
					btn1Click(){
						console.log("btn1Click"),
					}
					
					btn2Click(event){
						console.log(",,",event)
					}
            
          btn3Click(event){
						console.log(abc,event)
					}  
				}

四、条件判断

v-if、v-else-if、v-else

• 与JavaScript的if、else、if else相似。

• 根据布尔值或条件判断是否渲染

  <h2 v-if="true/flase">xxxh2>
  

  <h2 v-if="true/flase">xxxh2>
  <h2 v-else>若v-if为flase时显示h2>
  

  <h2 v-if="score>90">优秀h2>
  <h2 v-else-if="score>80">良好h2>
  

  
  
  <h2>{{result}}h2>
  
  <script>
  	computed:{
  					result(){
  						let show = ' ';
  						if(this.score>=90){
  							show = '优秀'
  						}else if(this.score>=80){
  							show = '良好'
  						}
  						return show;
  					}
  				}
  script>
  

登陆切换小实例

<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" />
			span>
			<button @click="isUser = !isUser">切换类型button>
		div>

<script>
		    const app = new Vue({
		    el: '#app',
		    data: {
					isUser = true,
		    },
script>

加入key的作用是为了防止输入框内的数据在切换以后复用的问题。

因为vue中在进行DOM渲染时，出于性能考虑，已经可能的复用已经存在过的元素，而不是重新创建新元素。

五、v-show使用

v-show和v-if的区别

• v-show是在为flase的时候给元素加上display: none，在dom层还会存在。
• v-if在为flase的时候则会直接将元素消除不显示。
• 在切换频率高的时候使用v-show性能更佳，只有一次的话v-if就可以了。

六、v-for遍历

• 在遍历过程中没有索引值

  <ul>
    <li v-for="item in name">{{item}}li>
  ul>
  
  name: ['x','y','z'],
  

• 在遍历过程中没有索引值

  <ul>
    <li v-for="(item, index) in name">{{index+1}}. {{item}}li>
  ul>
  
  name: ['x','y','z'],
  

• 遍历对象时

  <ul>
    <li v-for="item in info">{{item}}li>
  ul>
  
  <ul>
    <li v-for="(item, key) in info">{{key}}:{{item}}li>
  ul>
  
  
  info:{
    name: 'x',
    age: '18'
  }
  

官方推荐在使用v-for遍历时，给对应元素加上一个：key属性。

使用key属性是为了高效的更新虚拟DOM。

<ul>
<li v-for="item in info" :key="item">{{item}}li>
ul>

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1