vue基礎之常用方法

本文轉載自查看原文 2020-05-19 08:57 663

ES6語法補充

塊級作用域：

作用域：變量在什么范圍內是可以使用的

沒有塊級作用域導致的問題:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<button>按鈕6</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  var btns = document.getElementsByTagName('button');
  for (var i=0;i<btns.length;i++){
    btns[i].addEventListener('click',function () {
      console.log('第'+ i + '個按鈕被點擊');
    })
  }

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

![image-20200225233409318](/Users/qzk/Library/Application Support/typora-user-images/image-20200225233409318.png)

上面出現的問題是var沒有塊級作用域，導致i被for循環的時候更改。
解決辦法之1:閉包函數，因為函數是有塊級作用域的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button>按鈕1</button>
  <button>按鈕2</button>
  <button>按鈕3</button>
  <button>按鈕4</button>
  <button>按鈕5</button>
  <button>按鈕6</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  // es5之前，因為if for都是沒有塊級作用域的，因此在很多時候，
  // 我們要借助function的塊級作用域來解決應用作用域外面變量的問題

  // var btns = document.getElementsByTagName('button');
  // for (var i = 0; i < btns.length; i++) {
  //   btns[i].addEventListener('click', function () {
  //     console.log('第' + i + '個按鈕被點擊');
  //   })
  // }
  // es6中通過let來聲明變量的時候，就可以很好的解決塊級作用域的問題
  const btns = document.getElementsByTagName('button');
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '個按鈕被點擊');
    })
  }

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

![image-20200225234704835](/Users/qzk/Library/Application Support/typora-user-images/image-20200225234704835.png)

const 的使用和注意點

一旦給const修飾的標識符被賦值之后，不能修改

const name = 'qzk';
name = 'asdaf';
// 不能修改

在使用const定時標識符的時候，必須進行賦值：

// 錯誤示范
const name

常量的含義是：是指向的對象不能修改，但是可以改變對象內部的屬性

const obj_str = 'qzk';
obj_str = 'kobe';

![image-20200226232325354](/Users/qzk/Library/Application Support/typora-user-images/image-20200226232325354.png)

const obj = {
    name:'qzk',
    age:18,
    height:1.88
  };
  console.log(obj);

  obj.age=27;
  obj.name ='kobe';
  obj.height = 1.89;

  console.log(obj)

![image-20200226232534800](/Users/qzk/Library/Application Support/typora-user-images/image-20200226232534800.png)

對象的增強寫法

屬性的增強寫法

const name = 'qzk';
  const age = 18;
  // es5寫法
  const obj = {
    name:name,
    age:age
  }
  console.log(obj)
  // es6的增強語法寫法
  const objES6 = {
    name,
    age
  }
  console.log(objES6)

![image-20200226233605929](/Users/qzk/Library/Application Support/typora-user-images/image-20200226233605929.png)

函數的增強寫法

// 函數的增強語法
  // es5寫法，沒有增強語法
  const func = {
    eat:function () {
      console.log('eat')
    },
    running:function () {
      console.log('running')
    }
  }
  const funcES6 = {
    running(){
      console.log('running')
    },
    eat(){
      console.log('eat')
    },
  }

————————————————————————————————————————————————————————————————————————

創建vue實例傳入的options

el：

類型：string ｜ HTMLElement（字符串或者 html）
作用：決定之后vue 實例會管理哪一個DOM

data

類型: Object | Function（組件中data必須是一個函數）
作用：Vue 實例對應的數據對象

methods

類型：{ [key:string] : Function }
作用：定義屬於Vue的一些方法，可以在其他地方調用，也可以在指令中使用

ps:

方法與函數的區別：通俗的說在類里面的是方法，單獨寫的不在類里面的是函數

vue的生命周期（鈎子函數）-->hook(callHook)

生命周期：事物從誕生到消亡的整個過程

vue的生命周期：創建出Vue對象到Vue對象的消亡。

生命周期函數：

參考鏈接：

https://blog.csdn.net/zjhzjh893/article/details/83691155

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

綠色部分：vue源碼內部執行的操作

紅色部分：我們可以寫的鈎子函數

lifecycle

示例代碼：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>計數器</h2>
    <h1>{{counter}}</h1>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    // 語法糖：簡寫的意思
    // proxy
    const obj = {
        counter: 0,
        message: 'abc'
    }
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0,
        },
        methods: {
            add: function () {
                console.log('add,+1');
                this.counter++
            },
            sub: function () {
                console.log('sub,-1');
                this.counter--
            }

        }

    })
</script>
</body>
</html>

vue的模版語法

插值操作

如何將data中的文本數據，插入到html中呢？

Mustache語法（也就是雙大括號）:響應式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{body}}</h1>
    <h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好',
            body: 'qzk'
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>計數器</h2>
<!--    v-once 指令，指定當 {{ }} 內的變量的值發生改變的時候，變量所展示的還是原來的值-->
    <h1 v-once>{{message}}</h1>
    <h1 >{{message}}</h1>
    <h1 >{{message}}，你好啊</h1>
<!--    v-text='變量名'，在html標簽中渲染變量，並且會覆蓋原標簽內的文本-->
    <h1 v-text="message"></h1>
    <h1 v-text="message">你好啊</h1>
<!--    v-htm='url變量名'，在html標簽中渲染a標簽-->
    <h1 v-html="url"></h1>
    <h1>url</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    // 語法糖：簡寫的意思
    // proxy
    const obj = {
        counter: 0,
        message: 'abc'
    }
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0,
            message:'123',
            url:'<a href="https://www.baidu.com">百度一下</a>'
        },
        methods: {
            add: function () {
                console.log('add,+1');
                this.counter++
            },
            sub: function () {
                console.log('sub,-1');
                this.counter--
            }

        }

    })
</script>
</body>
</html>

指令之v-pre:

V-pre 用於跳過這個元素和他的字元素的編譯過程，用於顯示原本的Mustache語法

指令之v-cloak：

在某些情況下，我們瀏覽器可能會直接顯示出來未編譯的Mystache標簽

因此，v-cloak就是防止改現象發生的指令。

下述代碼，執行過程中設置了一秒的延遲：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{counter}}</h2>
  	<h2 v-cloak>
      {{counter}}
  </h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    // 語法糖：簡寫的意思
    // proxy
    const obj = {
        counter: 0,
        message: 'abc'
    }
    setTimeout(function () {
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0,
            },
            methods: {
                add: function () {
                    console.log('add,+1');
                    this.counter++
                },
                sub: function () {
                    console.log('sub,-1');
                    this.counter--
                }

            }

        })
    },1000)

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

v-bind介紹

前面我們學習的指令主要作用是將值插入到我們的模版內容中，但是，除了內容需要動態來決定外，某些屬性我們也希望可以動態來綁定。

比如：

動態綁定a元素的href
比如動態綁定img元素的src屬性

這個時候，我們就可以使用 v-bind指令：

作用：動態綁定屬性
縮寫：：
預期：any（with arguement ｜ Object（without arguement））
參數：attrOrProp（optional）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    該方式不可取，因為mastache語法只能添加在文本中，不可在屬性中使用-->
    <img src="{{imgURL}}" alt="">
    <!--    正確做法，適應v-bind: 這樣 src屬性中 imgURL會被看作變量，回去 vue實例中去找我們的imgurl屬性-->
    <img v-bind:src="imgURL" alt="">
    <!--    縮寫形式-->
    <img :src="imgURL" alt="">

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            imgURL: 'http://uploads.5068.com/allimg/1802/78-1P22QAK3-51.jpg'
        }
    })
</script>
</body>
</html>

效果如圖：

![image-20200223194903180](/Users/qzk/Library/Application Support/typora-user-images/image-20200223194903180.png)

v-bind綁定對象class（對象語法與數組綁定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <!--    對象語法 -->
    <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
    <!--    對象語法加函數-->
    <h2 :class="GetClass()">{{message}}</h2>
    <!--    數組語法-->
    <!--    ['',''] 加單引號當字符串去解析-->
    <h2 :class="['active','line']">{{message}}</h2>
    <!--    不加單引號，當變量去解析-->
    <h2 :class="[isActive,isLine]">{{message}}</h2>
    <h2 :class="GetListClass()">{{message}}</h2>
    <button v-on:click="btnClick">點擊</button>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'qzk',
            isActive: true,
            isLine: false,
            imgURL: 'http://uploads.5068.com/allimg/1802/78-1P22QAK3-51.jpg',
            ahref: 'https://www.baidu.com'
        },
        methods: {
            btnClick: function () {
                alert(this.isActive);
                this.isActive = !this.isActive
            },
            GetClass: function () {
                return {active: this.isActive, line: this.isLine}
            },
            GetListClass: function () {
                return [this.isActive, this.isLine]
            }
        }
    })
</script>
</body>
</html>

vue計算屬性的基本使用(computed)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{firstName + ' ' + lastName}}</h2>
    <h2>{{FullName}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            firstName:'qzk',
            lastName:'test'
        },
        // 計算屬性
        computed:{
            /**
             * @return {string}
             */
            // 將data 計算稱 FullName 在html中返回
            FullName:function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })

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

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>總價:{{totalPrice}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: [
                {id: 100, name: '深入理解計算機原理0', price: 100},
                {id: 101, name: '深入理解計算機原理1', price: 100},
                {id: 102, name: '深入理解計算機原理2', price: 100},
                {id: 103, name: '深入理解計算機原理3', price: 100}
            ]
        },
        // 計算屬性
        computed: {
            /**
             * @return {string}
             */
            totalPrice: function () {
                let result = 0;
                for (let i = 0; i < this.books.length; i++) {
                    result += this.books[i].price

                }
                // es6語法實現
                for (let i in this.books){

                }
                // es6語法2
                for (book in this.books){
                    
                }
                return result;


            }
        }
    })

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

計算屬性（在mustache語法中不需要加（）），有些時候在 computed中做屬性的操作，更方便。

計算屬性為什么不是按照函數方式執行而是按照data方式執行--getter和setter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{fullName}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    let app;
    app = new Vue({
        el: '#app',
        data: {
            firstName:'qian',
            lastName:'zhengkai'
        },
        computed:{
            // fullName: function () {
            //     return this.firstName + ' ' + this.lastName
            // },
            fullName:{
                // 計算屬性一般不建議使用set方法
                set:function (newName) {
                    // 一般用於設置data中變量的屬性，且需要傳入參數
                    const name=newName.split(' ');
                    this.firstName = name[0];
                    this.lastName = name[1];
                },
                get:function () {
                    // 如果 這里 fullName return的是 abc 則返回abc
                    // return 'abc'
                    return this.firstName + ' ' + this.lastName
                }
            }
        }
    });

</script>

</body>
</html>

![image-20200225230342617](/Users/qzk/Library/Application Support/typora-user-images/image-20200225230342617.png)

計算屬性的緩存（計算屬性和methods的對比）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  直接拼接的方式 此方法不推薦使用-->
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{fullName()}}</h2>
  <h2>{{fullName()}}</h2>
  <h2>{{fullName()}}</h2>
  <h2>{{fullName()}}</h2>
  <h2>{{fullName()}}</h2>
  <h2>{{fullName1}}</h2>
  <h2>{{fullName1}}</h2>
  <h2>{{fullName1}}</h2>
  <h2>{{fullName1}}</h2>
  <h2>{{fullName1}}</h2>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    let app;
    app = new Vue({
      el: '#app',
      data: {
        firstName:'qian',
        lastName:'ZHENGKAI',
      },
      computed:{
        fullName1: function () {
          console.log('full_computed');
          return this.firstName + ' ' + this.lastName
        }
      },

      methods:{
        fullName: function () {
          console.log('full_method');
          return this.firstName + ' ' + this.lastName
        }
    }
    });

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

![image-20200225231703471](/Users/qzk/Library/Application Support/typora-user-images/image-20200225231703471.png)

v-on使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>方法一：</h1>
  <h2>{{counter1}}</h2>
  <button v-on:click="counter1++">+</button>
  <button v-on:click="counter1--">-</button>
  <h1>方法二：</h1>
  <h2>{{counter2}}</h2>
  <button v-on:click="increment">+</button>
  <button v-on:click="increment">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  let app;
  app = new Vue({
    el: '#app',
    data: {
      counter1: 0,
      counter2: 0
    },
    methods: {
      // ES6增強寫法
      increment() {
        this.counter2++
      },
      // ES6 增強寫法
      decrement() {
        this.counter2--
      }
    }
  });

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

![image-20200309005857554](/Users/qzk/Library/Application Support/typora-user-images/image-20200309005857554.png)

v-on語法糖是 @ ，例如 v-on:click. = @click

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>方法一：</h1>
  <h2>{{counter1}}</h2>
  <!--@ 是 v-on 語法糖-->
  <button @click="counter1++">+</button>
  <button @click="counter1--">-</button>
  <h1>方法二：</h1>
  <h2>{{counter2}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  let app;
  app = new Vue({
    el: '#app',
    data: {
      counter1: 0,
      counter2: 0
    },
    methods: {
      // ES6增強寫法
      increment() {
        this.counter2++
      },
      // ES6 增強寫法
      decrement() {
        this.counter2--
      }
    }
  });

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

v-on參數問題（傳遞參數）

當通過methods中定義的方法，以供@click調用的時候，需要注意參數問題

情況一：如果該方法不需要額外參數，那么方法后的（）可以不添加
- 但是注意：如果方法本身中有一個參數，那么會默認將原省時間event參數傳遞進去
情況二：如果需要同事傳入某個參數，同時需要event時，可以通過$event傳入事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--  <h1>方法一：</h1>-->
  <!--  <h2>{{counter1}}</h2>-->
  <!-- 演示 @click 不傳遞參數-->
  <button @click='btn1Click'>按鈕1</button>
  <button @click='btn1Click()'>按鈕2</button>
  <!-- 在事件定義時，寫函數時省略小括號，但是方法本身時需要一個參數的-->
  <button @click='btn3Click(123)'>按鈕3</button>
  <!--如果我們的方法在定義時需要傳入參數，但是沒有傳入則默認值為undefined-->
  <button @click='btn3Click()'>按鈕3</button>
  <!--如果不加括號，則瀏覽器會默認將event事件對象傳入到函數中，這里表現為 MouseEvent-->
  <button @click='btn3Click'>按鈕3</button>
  <!--  方法定義時同時需要event又需要其他參數的情況-->
    <!-- 在調用方法時，如何手動的獲取d到瀏覽器的eventd對象：$event -->
  <button @click='btn4Click(abc,$event)'>按鈕4</button>
  <!--   -->
<!--  <button @click='btn5Click'>按鈕5</button>-->

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  let app;
  app = new Vue({
    el: '#app',
    data: {
      counter1: 0,
      counter2: 0,
      abc:123
    },
    methods: {
      // ES6增強寫法
      btn1Click() {
        console.log('點擊')
      },
      btn3Click(abc) {
        console.log('----->', abc)
      },
      btn4Click(abc, event) {
        console.log('++++>', abc, event)
      }

    }
  });

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

![image-20200309012332654](/Users/qzk/Library/Application Support/typora-user-images/image-20200309012332654.png)

![image-20200309013207410](/Users/qzk/Library/Application Support/typora-user-images/image-20200309013207410.png)

v-on修飾符

在某些情況下，我們拿到event的魔都可能是進行一些事件處理，vue提供了修飾符來幫助我們方便的處理事件：

stop---調用 event.stopPropagation()
.prevent ---- 調用 event.preventDefault()
.{keyCode|KeyAlias} - 只當前時間是從特定鍵出發時才觸發
.native ---監聽組件根元素的原生事件
.once --- 只出發一次回調

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--.stop  來阻止冒泡事件-->
<div id="app">
  <div @click="divClick">
    <h3>asdf</h3>
    <button @click.stop='submit1Click'>按鈕</button>
  </div>

  <br>

  <div>
    <!--    該方法form提交一次，但是submit2click 方法也執行了， 其中 input點擊的默認事件是 提交form-->
    <h2>form提交 submit</h2>
    <form action="baidu">
      <input type="submit" value="提交1" @click='submit2Click'>
    </form>
    <br>
    <!--  我們可以通過 .prevent 來阻止默認事件  -->
    <h2>通過method click事件操作form</h2>
    <form action="baidu">
      <input type="submit" value="提交2" @click.prevent='submit3Click'>
    </form>
  </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  let app;
  app = new Vue({
    el: '#app',
    data: {
      counter1: 0,
      counter2: 0
    },
    methods: {
      divClick() {
        console.log('divclick')
      },
      submit1Click() {
        console.log('提交1')
      },
      submit2Click() {
        console.log('提交2')
      },
      submit3Click() {
        console.log('提交3')
      }
    }
  });

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

![image-20200309015551554](/Users/qzk/Library/Application Support/typora-user-images/image-20200309015551554.png)

v-if用法

<!--基本使用-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  isShow為true的時候顯示-->
  <h2 v-if="isShow">{{message}}</h2>
<!--  isShow 為false的時候顯示-->
  <h2 v-else>isshow為false的時候顯示我</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  let app;
  app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isShow: true
    }
  });

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

![image-20200309231810077](/Users/qzk/Library/Application Support/typora-user-images/image-20200309231810077.png)

V-else-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  isShow為true的時候顯示-->
  <h2 v-if="score>=85">優秀</h2>
<!--  這里使用 v-else-if 的時候 不需要再寫 <85 ，因為上面條件不滿足的時候才會執行下面-->
  <h2 v-else-if="score>=75">還可以</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-if="score<60">不及格</h2>
<!--  isShow 為false的時候顯示-->

<!--  也可以利用計算屬性來實現上述的代碼-->
  <h1>{{result}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  let app;
  app = new Vue({
    el: '#app',
    data: {
      score:99
    },
    computed:{
      result(){
        let showMessage = '';
        if(this.score >=85){
          showMessage = '優秀'
        }else if (this.score >=75){
          showMessage = '還可以'
        }else if (this.score>=60){
          showMessage = '及格'
        }else{
          showMessage = '不及格'
        }
        return showMessage
      }
    }
  });

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

![image-20200309232828788](/Users/qzk/Library/Application Support/typora-user-images/image-20200309232828788.png)

用戶登陸方式選擇的小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div v-if="isUserLogin">
    <span>
      <label for="username">用戶名登陸</label>
      <input type="text" id="username" placeholder="請輸入用戶名">
    </span>

  </div>
  <div v-else>
    <span>
      <label for="email">用戶郵箱登陸</label>
      <input type="text" id='email' placeholder="請輸入郵箱" >
    </span>

  </div>
  <button @click="changeLogin">更改登陸方法</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    let app;
    app = new Vue({
        el: '#app',
        data: {
          isUserLogin:true
        },
      methods:{
          changeLogin(){
            this.isUserLogin = !this.isUserLogin;
            console.log(this.isUserLogin)
          }
      }
    });



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

![image-20200309234523710](/Users/qzk/Library/Application Support/typora-user-images/image-20200309234523710.png)

![image-20200309234541999](/Users/qzk/Library/Application Support/typora-user-images/image-20200309234541999.png)

注意：

vue底層為了性能優化，有搞一個虛擬dom放在內存中，這樣盡可能的復用已存在的可服用的dom
在上面的案例中，vue內部會發現原來的input元素不在使用，直接做else中的input來使用了

解決方法：

如果我們不希望vue出現類似的重復利用的問題，可以給對應的input添加key
並且保證key的不同

實現示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div v-if="isUserLogin">
    <span>
      <label for="username">用戶名登陸</label>
      <input type="text" id="username" placeholder="請輸入用戶名" key="username">
    </span>

  </div>
  <div v-else>
    <span>
      <label for="email">用戶郵箱登陸</label>
      <input type="text" id='email' placeholder="請輸入郵箱" key="email">
    </span>

  </div>
  <button @click="changeLogin">更改登陸方法</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    let app;
    app = new Vue({
        el: '#app',
        data: {
          isUserLogin:true
        },
      methods:{
          changeLogin(){
            this.isUserLogin = !this.isUserLogin;
            console.log(this.isUserLogin)
          }
      }
    });



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

v-show

v-show和v-if非常相似，也是用來決定一個元素是否渲染。

v-show 和 v-if 比較：

v-if 當條件為false時，壓根不會有對應的元素在dom中
v-show 當條件為false時，僅僅是對元素的display屬性設置為none而已

開發中如何選擇：

當需要在顯示與盈倉之間切換很頻繁時，使用v-show
當只有一次切換時，使用v-if

示例：略

v-for使用：

V-for 遍歷數組：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
  <!--index 為 元素的索引-->
  <ul>
    <li v-for="(index,item) in names">
    {{index}} ----> {{item}}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    let app;
    app = new Vue({
        el: '#app',
        data: {
          names:['q','z','k','1']
        }
    });

</script>

</body>
</html>

V-for 遍歷對象

![image-20200312222701846](/Users/qzk/Library/Application Support/typora-user-images/image-20200312222701846.png)

上圖是v-for獲取對象（字典的相關數據）

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.在遍歷的過程中如果只獲取一個值，獲取到的時value-->
<ul>
  <li v-for="item in info">{{item}}</li>
</ul>
<!--  2.獲取 key和value 用 (key,value)-->
  <ul>
    <li v-for="(key,value) in info">{{key}},{{value}}</li>
  </ul>
<!--  3.獲取key和value和索引index，用 （key，value,index）-->
  <ul>
    <li v-for="(key,value,index) in info">{{index}}+{{key}}+{{value}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
    let app;
    app = new Vue({
        el: '#app',
        data: {
          info:{
            name:'qzk',
            age:18,
            height:180
          }
        }
    });

</script>

</body>
</html>

組件的key屬性

官方推薦我們在使用v-for時，給對應的元素或組件添加上一個:key屬性

為什么需要加上key屬性呢？
- 這個其實和vue的虛擬DOM的Diff算法有關
當某一層油很多相同節點的時候，也就是列表節點時，我們希望插入一個新的節點
- 我們希望可以再b和c之間插入f， Diff算法默認執行起來是這樣的
- 即把C更新成F ，D更新成C 。。。。
所以我們用key 來給每個節點做一個唯一標識
- diff 算法就可以正確的識別出此節點
- 找到正確的位置插入新的節點
所以：key的作用主要是為了更高效的更新虛擬DOM

表單綁定之v-model（常用）

表單控件在實際開發中是非常常見的，特別是對用戶信息的提交。需要大量的表單。
Vue 中使用 v-model 指令來實現變淡元素數據的雙向綁定。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--通過v-model 綁定表單元素 ，這樣如果 input輸入的信息改變的時候 data中的message 也會隨之改變。兩者之間建立了綁定關系-->
  <input type="text" v-model="message">
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message:'你好'
    }
  })
</script>

</body>
</html>

雙向綁定的本質：實際上相當於兩個指令的集合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label>
<!--    <input type="text" v-model="message">-->
    <input type="text" :value="message" @input="message = $event.target.value">
  </label>
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message:'你好'
    }
  })
</script>

</body>
</html>

V-model綁定radio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <input type="radio" id="male" name="sex" v-model="sex" value="男">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" v-model="sex" value="女">女
  </label>
  <h2>您選擇的性別是：{{sex}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      "sex":''
    }
  })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--1. 修飾符：lazy（懶加載）   使用.lazy修飾符后，雙向綁定的標簽會在敲擊回車鍵或失去焦點后進行實時綁定，這樣可以降低加載的次數提升性能-->
  <label for="test1">
    <input type="text" id="test1" v-model.lazy="msg">
  </label>
  <h2>{{msg}}</h2>
<!--  2. 修飾符：trim 刪除input左右兩邊的空格-->
  <label for="test2">
    <input type="text" id="test2" v-model.trim="name">
  </label>
  <h2>{{name}}</h2>
<!--  3。 修飾符：number 使用這個時候默認輸入的就是num類型不需要在進行數字類型轉換-->
  <label for="test3">
    <input type="number" id="test3" v-model.number="age">
  </label>
  <h2>{{age}}-{{typeof age}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      "msg":'你好',
      "name":'',
      "age":''
    }
  })
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue中常用基礎標簽 vue常用方法 JavaScript基礎之數組常用方法 java基礎——String的常用方法 vue項目常用方法封裝 Vue-router常用方法 vue中的watch方法常用 Vue控制樣式的常用方法 Python基礎之str常用方法、for循環 iOS-OC-基礎-NSNumber常用方法