Vue指令、methods、computed、watch、

vue的指令有：v-html、v-text、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-once、v-pre、v-cloak共14種。

其中：

1、v-html和v-text是用來資料展示的，兩者差別：

v-html可以識别标簽并解析，v-text不會識别标簽，直接展示。

<p v-html="msg"></p>//會展示粗體的大小二字
<p v-text="msg"></p>//<h3>大小</h3>會把标簽原樣輸出

data:{
	msg:'<h3>大小</h3>'
}

2、條件渲染：v-if、v-else-if、v-else

<p v-if="type==='A'">A</p>//一開始顯示的就是A
 <p v-else-if="type==='B'">B</p>//将type值改為B時，這裡顯示B
 <p v-else>C</p>//type為其它值時，顯示C
 
 data:{
 	type:'A'
 }

3、v-if 和 v-show

<p v-if="flag">{{msg}}</p>  //v-if後面的布爾值可以控制msg的顯示與否，這裡是dom結構的銷毀和建立
<p v-show="flag">{{msg}}</p> //v-show後面的flag也可以控制msg的顯示情況，這裡是用的display:none.
//v-show不管flag的值如何，都會渲染出dom結構來，是以v-show用在需要頻繁切換隐藏和顯示的地方
//v-if用在切換次數少的地方，v-if的渲染開銷相對v-show比較大
data:{
	msg:'我喜歡睡覺',
	flag:true
}

4、清單渲染 v-for

<ul v-for="（item，index） in shuju"> -->
        {{item.info}}
        <li v-for="(coo,index) in item.content">{{coo.w}}</li>//這裡的coo和item是随便取得,兩個可以
        //取的一樣，因為兩者根本就不同，不會有影響（當然，盡量不一樣，好區分）
 </ul>
 
 data:{
 	shuju:[
                    {
                        id:1,
                        info:'a',
                        content:[
                            {
                                w:'寬1',
                                h:'高1'
                            }
                        ]
                    },
                    {
                        id:2,
                        info:'b',
                        content:[
                            {
                                w:'寬2',
                                h:'高2'
                            }
                        ]
                    },
                    {
                        id:3,
                        info:'c',
                        content:[
                            {
                                w:'寬3',
                                h:'高3'
                            }
                        ]
                    }
                ]
 }

5、v-bind 單向資料綁定

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 指令 </title>
  <style>
    .size{
      width: 100px;
      height: 100px;
    }
    .bg{
      background: red;
    }
    .color{
      background: blue;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3> v-bind 單向資料綁定 </h3>
    <input type="text" v-bind:value = "msg">
    <!-- 簡寫，用冒号替代v-bind -->
    <input type="text" :value = "msg">
   
    <h4> 樣式綁定 - 對象形式寫法  </h4>
    <p style = "width: 100px;height: 100px;background: green;"></p>
      <!--上面是内聯樣式-->
    <p :style = "{width: '100px',height: '100px',background: 'blue'}"></p>
    <p :style = "{width: w,height: h,background: backg}"></p>

    <h4> 樣式綁定 - 數組形式寫法 </h4>
    <p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p>
    <p :style = "[ styleObj,styleColor ]"></p>

    <hr>
    <h3> v-bind 綁定類名 </h3>
    <h4> 類名綁定 - 對象形式寫法 </h4>
    <p class = "size bg"> </p>
    <p :class = "{size: true,bg: true}"></p>
      <!--上面的size和bg是style中的類名-->
    <p :class = "{[a]: true,[b]: true}"></p>
      <!--上面的[a]是data資料裡面的鍵，[b]也是-->
    <hr> 
    <h4> 類名綁定 - 數組形式寫法 </h4>
    <p :class = "['size','bg']"></p>
      <!--上面的size和bg是style中的類名-->
    <p :class = "[a,b]"></p>
	<!--上面的size和bg是data中的資料-->
      
    <!-- 總結：  項目中建議使用，因為一般都是要在data中寫上資料的，那麼就是從data中而不是從style中，變量形式 -->
    <p :class = "{[a]: true,[b]: true}"></p>
    <p :class = "[ a,b ]"></p>

    <!-- 引申： 靈活使用 -->
    <h4> 引申 </h4>
    <p :class = "{ [a]: flag,[b]: flag}" ></p>
    <p :class = "[ size, flag?bg:color ]"></p><!--flag控制顔色-->
    <p :class = "[ size, flag && bg || color ]"></p>


    <h4> 更神奇的 </h4>

    <p class = "text" :class = [size,bg]></p>
      <!--這時就有三個類名，text這個類名不會被覆寫-->


    <h4> v-bind 可以綁定任意一個dom身上的屬性 </h4>
    <img :src="imgUrl" alt="">
    <hr>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
  
   */
  new Vue({
    el: '#app', //  挂載
    data: {
      imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
      msg: 'hello  各位今天周四了',
      a: 'size',
      b: 'bg',
      flag: true,
      color: 'color',
      w: '100px',
      h: '100px',
      backg: 'blue',
      styleObj: {
        width: '100px',
        height: '100px'
      },
      styleColor: {
        background: 'yellow'
      }
    }
  })
</script>
</html>

綁定類名綁定樣式
- 為什麼要綁定？
- 答：通過操作資料就可以改變V中dom的樣式，相當于操作了dom
- 類名的綁定【兩種寫法】
  - 數組的寫法【推薦】
  - 對象的寫法
- 樣式的綁定
  - 數組的寫法【推薦】
  - 對象的寫法

6、v-model 【雙向資料綁定】

單向【資料改變，視圖改變】
雙向【資料改變，視圖改變，反之，視圖改變，資料改變】
v-model預設綁定表單元素的value值
- form 表單标簽
input textarea … 表單元素

思考：如何使用單向資料綁定實作雙向資料綁定效果，如下：

<input type="text" :value = "msg" @input = "change">
:value="msg"單向資料綁定使得資料變，視圖就變了
@input="change"使得視圖變了，資料也跟着變了
new Vue({
    el: '#app', //  挂載
    data: {
      msg: '我很帥'
    },
    methods: {
      //事件處理程式
      change: function ( e ) {
        this.msg = e.target.value
      }
    }
  })

7、v-on 事件(如v-on:click:“fn”----->簡寫為@click )

基礎事件綁定
事件傳參
事件對象
為什麼要使用？【案例：事件冒泡】(為了減少備援代碼和簡便操作，但這樣将一定的邏輯放入了V視圖中，總之利大于弊)
- 事件修飾符（使用修飾符時，順序很重要；相應的代碼會以同樣的順序産生。是以，用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 隻會阻止對元素自身的點選。）
  - stop：比如@click.stop:“fn”，用來阻止事件冒泡
  - prevent：用來阻止預設事件
  - self：用來隻觸發自己，有阻止事件冒泡的作用
  - capture：事件捕獲（即元素自身觸發的事件先在此處理，然後才交由内部元素進行處理）
- 按鍵修飾符
  
  - enter
  
  - esc
  
  - tab
  
  - delete
  
  - space
  
  - up
  
  - down
  
  - left
  
  - right
思考： MVVM架構思想，是将邏輯放在VM中來做，V是用來展示視圖的

模闆文法 mustache 【雙大括号】
- 支援度
- 支援資料類型
- 所有的類型都是支援的，但是console.log alert這些輸出文法是不支援的

method 方法

用來存儲事件處理程式

事件處理程式中，有兩個參數，其中一個為事件對象e時，調用時，對應e的位置寫$event，否則e會丢失。

/* 
    業務： 如果我們的fn函數接收2個參數，其中一個參數是事件對象
    問題： 事件對象e丢失了
    解決： 在調用方法時，對應傳入一個實際參數： $event
    這裡也展現了事件傳參
 */
<div id="app">
    <input type="text" v-model = "val">
    <button @click = "fn( $event,val )"> 點選 </button>
</div>

new Vue({
    el: '#app',
    data: {
      val: ''
    },
    methods: {
      fn ( e,val ) {
        console.log( e )
        console.log( val )
      }
    }
  })

computed 計算屬性

為什麼要有這個選項？

案例：【字元串反向】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ msg.split('').reverse().join('') }}
    <hr>
    <p> {{ newMsg }} </p>
  </div>
</body>
<script src="../../vue.js"></script>
<script>
  /* 
    業務：将msg這個字元串 反向 輸出
    思路： 轉數組   reverse   再轉字元串  

    思考： V應該是用于資料展示，但是我們這麼處理，發現V做了一部分邏輯判斷，又違背了MVVM

    解決： 使用計算屬性


   */
  new Vue({
    el: '#app',
    data: {
      msg: 'I Like eat 葡萄 '
    },
    computed: {
      //計算屬性中存放的都是方法
      newMsg () {
        return this.msg.split('').reverse().join('')
      }
    }
  })
</script>
</html>

計算屬性是一個選項，選項值是一個對象，對象中存放的是方法
- 方法必須要有傳回值
計算屬性的使用
- 直接将方法名當做全局變量一樣直接使用

總結：什麼時候使用計算屬性？
- 滿足兩個條件即可
  - 必須有邏輯處理，還有傳回值
  - 我們使用的結果，要當做全局變量一樣使用
計算屬性一旦确定就不可更改了

案例聯系計算屬性

使用者名書寫
通過上面的案例我們知道了，計算屬性還可以使用getter和setter

computed: {
   fullName: {
     get () { //getter，寫出firstname和lastname自動拼接出fullname
       return this.firstName + this.lastName
     },
     set ( val ) { //val就是目前綁定元素的value值，寫出fullname，自動填好firstname和lastname
     
       this.firstName = val.slice( 0,1 )
       this.lastName = val.slice( 1 )
     }
   }
 }

watch 偵聽屬性

以案例來學習watch - > 使用者名寫入
watch是一個選項，選項值是一個對象
- 對象中可以存放的類型有哪些
- { [key: string]: string | Function | Object | Array }
- 常用的是方法和對象

總結：

由一個資料改變，引起的新的資料請求時用watch

<div>
        姓： <input type="text" v-model = "firstName">
      </div>
      <hr>
      <div>
        名： <input type="text" v-model = "lastName">
      </div>
      <hr>
      <div>
        全名： <input type="text" v-model = "fullName">
 </div>

<script>
  new Vue({
    el: '#app',
    data: {
      firstName: '',
      lastName: '',
      fullName: ''
    },
    watch: { // 偵聽 -> data中的資料
      // watch中可以存放方法 
      firstName ( val ) {
        // console.log('firstname改變了')
        this.fullName = val + this.lastName
      },
      lastName ( val ) {
        this.fullName = this.firstName + val
      },
     
      fullName: {
        deep: true, //深度監聽
        handler () { // 處理程式
          this.firstName = val.slice( 0,1 )
          this.lastName = val.slice( 1 )
        }
      }
    }
  })
</script>

Vue指令、樣式及類名綁定、methods、computed、watchVue指令、methods、computed、watch、method 方法computed 計算屬性watch 偵聽屬性

Vue指令、methods、computed、watch、

method 方法

computed 計算屬性

watch 偵聽屬性

繼續閱讀

vue中父元件調用子元件的方法

Vue監視資料原理

vue項目：npm打包-S和-D差別：

vue滑動插件：vue-drag-verify

vue插件的使用

使用Vue自定義元件出現的錯誤

Vue+原生JS實作點選粘貼到剪貼闆

vue時間段選擇器實作的功能

VueX 做狀态管理( state , mutations , getters , actions 概念)

vue 中英文切換

【GIT】git指令行代碼送出流程及注意事項

Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯

vue3 transitionvue3 transition元件和vue2 transition元件

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目