關于 vue 設計模式的簡介

今天講實體，原理請參照這篇文章！vue 設計模式的簡介

1.Vue實體

下面是vue 中一些屬性的說明~

創建簡單 vue 實體

<script>
  //需要使用 new 關鍵字
  var vm = new Vue({
    // 內容
  })
<script>

宣告一下，以下所有案例均參考 vue.js 檔案< script src="…/js/vue2.6.10.js"> </ script> 注意參考的路徑~如果怕錯的話，src中可以使用這個網址"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"，代碼中出現的 yzx ,可以忽略，這是我加的作者標識~

el 唯一根標簽：

在創建Vue實體時，el表示唯一根標簽，class或id選擇器可用來將頁面結構與Vue實體物件vm中的el系結，

<!-- 定義唯一根元素div -->
<div id="app">{{yzxname}}</div>
<script>
var vm = new Vue({
  el: '#app', // 通過 el 與 div 元素系結
  data: {yzxname: 'yzx成功創建Vue實體！'}
})
</script>

data:

data初始資料：Vue實體的資料物件為data，Vue會將data的屬性轉換為getter、setter，從而讓data的屬性能夠回應資料變化，data選項的值是物件，物件里面可以寫多個值，

<!-- 定義唯一根元素 div -->
<div id="app"><p>{{name}}</p></div>
<script>
var vm = new Vue({
  el: '#app', // 通過el與div元素系結
  data: {name: 'yzx定義初始資料'}
})
// js中獲取 data資料 兩種方法都可以~
console.log(vm.$data.name)
console.log(vm.name)
</script>

methods：

methods屬性用來定義方法，通過Vue實體可以直接訪問這些方法，在定義的方法中，this指向Vue實體本身，定義在methods屬性中的方法可中的事件處理方法使用，

<div id="app">
    <!-- 為button按鈕系結click事件 -->
    <button @click="showInfo">請單擊</button>
    <p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
  msg: '原始的值'
},
methods: {
   // 定義事件處理方法showInfo
   	showInfo () {
        this.msg = 'yzx觸發單擊事件'
     }
  }
})
</script>

computed：

computed 計算屬性：計算屬性結果會被快取起來，當依賴的回應式屬性發生變化時，才會重新計算，回傳最終結果，

    <div id="app">
        <p>總價格：{{totalPrice}}</p>
        <p>單價 yzx：{{price}}</p>
        <p>數量 yzx：{{num}}</p>
        <div>
            <button @click="num == 0 ? 0 : num--">減少數量</button>
            <button @click="num++">增加數量</button>
            <button @click="logTotalPrice">計算總價格</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                price: 20,
                num: 0
            },
            computed: {   
                // 總價格totalPrice
                totalPrice() {
                    console.log("totalprice執行了")
                    return this.price * this.num
                }
            },
            methods:{
                logTotalPrice(){
                    console.log('totalprice的計算結果為'+this.totalPrice)
                }
            }
        })
    </script>

watch:

通過 watch 獲取 cityName 的新值和舊值

<div id="app">
        <!-- input中的v-model用于在表單控制元件元素上創建雙向資料系結 -->
        <input type="text" v-model="cityName">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                cityName: 'yzxyzx'
            },
            watch: {
                cityName(newName, oldName) {
                    console.log(newName, oldName)
                }
            }
        })
    </script>

filters:

filters過濾器：在頁面中直接操作資料，回傳最終結果

    <div id="app">
        <div>{{message | toUpcase}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello yzx'
            },
            filters: {
                // 將 hello yzx 轉換為 HELLO YZX
                toUpcase(value) {
                    return value ? value.toUpperCase() : ''
                }
            }
        })
    </script>

2.Vue 資料系結

系結樣式：

Vue提供了樣式系結功能，可以通過系結行內樣式和系結樣式類這兩種方式來實作，

系結行內樣式：

在vm實體的data中定義myDiv樣式物件，通過v-bind系結data中定義的myDiv物件，

    <div id="app">
        <!-- 系結樣式屬性值 -->
        <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
            <!-- 系結樣式物件 -->
            <div v-bind:style="myDiv"></div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                pink: 'pink',
                width: '100%',
                height: '200px',
                myDiv: {
                    backgroundColor: 'red',
                    width: '100px',
                    height: '100px'
                }
            }
        });
    </script>

系結樣式類名：

通過系結data中的類名實作元素的樣式，

    <style>
        .box {
            background-color: pink;
            width: 100%;
            height: 200px;
        }
        .inner {
            background-color: red;
            width: 100px;
            height: 50px;
            border: 2px solid white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{box}">我是 box,,,yzx
            <div v-bind:class="{inner}">我是inner1</div>
            <div v-bind:class="{inner}">我是inner2</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                box: 'box',
                inner: 'inner'
            }
        })
    </script>

內置指令

v-model指令：

v-model主要實作資料雙向系結，通常用在表單元素上，例如input、textarea、select等，

v-text指令：

v-text是在DOM元素內部插入文本內容，頁面結構代碼如下:

    <div id="app">
        <p v-text="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我是v-text'
            }
        })
    </script>

v-html指令：

v-html（單向系結）是在DOM元素內部插入HTML標簽內容，頁面結構代碼如下：

  <div id="app">
    <div v-html="msg"></div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '<h2>我是v-html yzx </h2>'
      }
    })
  </script>

v-bind指令：

v-bind可以實作單向資料系結，頁面結構代碼如下:

<div id="app">
   <input v-bind:value="msg">   
</div>  
<script>
   var vm = new Vue({
       el: '#app',
       data: {
       msg: '我是v-bind yzx'
       }
     })
</script>

v-on指令：

v-on是事件監聽指令，直接與事件型別配合使用，頁面結構代碼如下：

    <div id="app">
        <p>{{msg}}</p>   
        <button v-on:click="showInfo">請單擊 yzx</button>   
      </div>   
      <script> 
        var vm = new Vue({  
          el: '#app',   
          data: {msg: '請單擊按鈕查看內容'},   
          methods: {    
            showInfo () { 
              this.msg = '我是v-on指令'  
            }  
          }   
        })   
      </script>

【重要】v-for指令：

v-for可以實作頁面串列渲染，常用來回圈陣列，頁面結構代碼如下，
注意：核心技能，通過遍歷回圈讀取陣列或序列，來依次展示對應的內容，索引是從 0開始的，JavaScript 陣列可以存不同型別的資料,一般不建議存不同資料型別~🤗

  <div id="app">
    <div v-for="(value,key) in list" data-id="key">
      索引是：{{key}}，元素內容是：{{value}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3,'y','z','x']
      }
    })
  </script>

v-if和v-show指令：

v-if用來控制元素顯示或隱藏，屬性為布林值，頁面結構代碼如下:

    <div id="app">
        <div v-if="isShow" style="background-color:#ccc;">我是v-if yzx</div>
        <button @click="isShow=!isShow">顯示/隱藏</button>  
      </div>  
      <script>  
        var vm = new Vue({ 
          el: '#app',  
          data: { 
            isShow: true   
          }  
        }) 
      </script>

3.VUE資料系結測驗

寫一個添加的功能，添加可以是固定的寫法,洗掉默認洗掉最后一個的學生的記錄，代碼如下：

<div id="app">
        <button @click="add">添加學生</button>
        <button @click="del">洗掉學生</button>
        <hr/>
        <table border="1" width="36%" style="border-collapse:collapse">
         <tr align="center">
             <td>班級</td>
             <td>姓名</td>
             <td>性別</td>
             <td>年齡</td>
         </tr>
         <tr align="center" v-for="student in students">
             <td>{{student.grade}}</td>
             <td>{{student.name}}</td>
             <td>{{student.gender}}</td>
             <td>{{student.age}}</td>
         </tr>
        </table>
    </div>   
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                students:[{
                    grade:'1',
                    name:'yzx',
                    gender:'女',
                    age:'20'
                },{
                    grade:'2',
                    name:'yzx',
                    gender:'女',
                    age:'20'},
                    {
                    grade:'3',
                    name:'yzx',
                    gender:'女',
                    age:'20'},
                    {
                    grade:'4',
                    name:'yzx',
                    gender:'女',
                    age:'20'}]
            },
            methods:{
                add(){
                    var student={
                        grade:'1',
                    name:'yzx',
                    gender:'女',
                    age:'20' 
                    };
                    this.students.push(student)
                },
                del(){
                    this.students.pop();
                }
            }
        })

4. Vue 事件

v-on系結事件：

在Vue中可以使用內置指令v-on監聽DOM事件，并在觸發時運行一些JavaScript代碼，或系結事件處理方法，

獲取亂數 random

    <div id="app">
        <button v-on:click="count+=Math.random()">亂數</button>
        <p>yzx 自動生成的亂數是{{count}}</p>  
      </div>   
      <script>   
        var vm = new Vue({  
          el: '#app', 
          data: {
            count: 0   
          }
        })
      </script>

監聽按鍵(回車鍵)：

    <div id="app">
        <input type="text" v-on:keyup.enter="submit">
      </div>  
      <script>
        var vm = new Vue({
          el: '#app',
          methods: {
            submit () {
              console.log('表單提交 yzx')
            }
          }
        })
      </script>

常見的事件修飾符

.stop事件修飾符：

在前端開發中，復雜的頁面結構需要很多事件來完成互動行為，默認的事件傳遞方式是冒泡，同一事件型別會在元素內部和外部觸發，有可能會造成事件的錯誤觸發，所以就需要使用.stop修飾符阻止事件冒泡行為，

    <div id="app">
        <div v-on:click="doParent">
          <button v-on:click="doThis">事件冒泡</button>
          <button v-on:click.stop="doThis">阻止事件冒泡</button>
        </div>
      </div>   
      <script>
        var vm = new Vue({
          el: '#app',  
          methods: { 
            doParent () {  
              console.log('我是父元素單擊事件 yzx')
            },
            doThis () {  
              console.log('我是子元素單擊事件 yzx')  
            }   
          }
        })
      </script>

.prevent事件修飾符：

HTML標簽具有自身特性，例如，標簽被單擊時會自動跳轉，在實際開發中，如果標簽的默認行為與事件發生沖突，此時可以使用.prevent修飾符來阻止標簽的默認行為，

    <div id="app">
        <a href="https://www.baidu.com" v-on:click.prevent>yzx 阻止默認行為</a> 
        <a href="https://www.baidu.com">yzx 不阻止默認行為</a> 
      </div> 
      <script>
        var vm = new Vue({  
          el: '#app'
        })   
      </script>

.capture事件修飾符：

事件捕獲的執行順序是由外部結構向內部結構執行，與事件冒泡的順序相反，

    <div id="app">
        <div v-on:click.capture="doParent">   
          <button v-on:click="doThis">事件捕獲 yzx</button>
        </div>
      </div> 
      <script> 
        var vm = new Vue({
          el: '#app',
          methods: {
            doParent () {
              console.log('我是父元素的單擊事件 yzx')
            },
            doThis () {
              console.log('我是當前元素的單擊事件 yzx')    
            }  
          }
        })
      </script>

.self 事件修飾符：

事件修飾符.self 用來實作只有DOM元素本身會觸發事件，

    <style>
      .Odiv1{
        width: 80px;
        height: 80px;
        background: #f00;
        margin: 5px;
      }
      .Odiv2{
        width: 50px;
        height: 50px;
        background: #fff;
      }
    </style>
------------------------------------------------------------------------------------
    <div id="app">
        <div class="Odiv1" v-on:click.self="doParent">a
          <div class="Odiv2" v-on:click="doThis">b</div>
        </div>
        <div class="Odiv1" v-on:click="doParent">c
          <div class="Odiv2" v-on:click="doThis">d</div>  
        </div>  
      </div>
      <script>
        var vm = new Vue({
          el: '#app',
          methods: { 
            doParent () {
              console.log('我是父元素的單擊事件 yzx')
            },
            doThis () { 
              console.log('我是當前元素的單擊事件 yzx')
            }  
          }  
        })
      </script>

.once事件修飾符：

只觸發一次事件處理函式，案例頁面結構代碼如下

  <div id="app">
    <button v-on:click.once="doThis">yzx 只執行一次</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        doThis () {
          console.log('我是當前元素的單擊事件且只執行一次')
        }
      }
    })
  </script>

5. Vue 組件

組件：

在Vue中，組件是構成頁面中獨立結構單元，組件主要以頁面結構形式存在，不同組件也具有基本互動功能，

組件特性：

• 能夠減少重復代碼的撰寫，提高開發效率，
• 根據業務邏輯實作復雜的專案功能，
• 降低代碼之間的耦合程度，使專案更易維護和管理，
  

實作計數器

  <div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      data () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">被單擊 yzx {{count}}次</button>'
    })
    var vm = new Vue({ el: '#app' })
  </script>

注冊區域組件：

Vue.component()方法用于全域注冊組件，除了全域注冊組件外，還可以區域注冊組件，通過Vue實體的components屬性來實作，

  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    var com1 = {
      template: '<p>我是vm實體中的區域組件 yzx</p>'
    }
    var vm = new Vue({
      el: '#app',
      // 注冊區域組件
      components: { myComponent: com1 }
    })
  </script>

template模板：

Vue提供了標簽來定義結構的模板，可以在該標簽中書寫HTML代碼，然后通過id值系結到組件內的template屬性上，這樣就有利于在編輯器中顯示代碼提示和高亮顯示，不僅改善了開發體驗，也提高了開發效率，

    <div id="app">
        <p>{{title}}</p>
        <my-component></my-component>
      </div>  
      <template id="tmp1"> 
        <p>{{title}}</p> 
      </template>
      <script>  
        Vue.component('my-component', { 
          template: '#tmp1',
          data () {
            return {  
              title: '我是組件內的title資料 yzx', 
            }
          }
        })
        var vm = new Vue({
          el: '#app',
          data: {  
            title: '我是vm實體的title資料 yzx'  
          }  
        })
      </script>

props傳值：

props即道具，用來接收父組件中定義的資料，其值為陣列，陣列中是父組件傳遞的資料資訊，
子組件接收父組件傳遞的資料“title”，

  <div id="app">
    <my-parent name="title"></my-parent>
  </div>
  <script>
    Vue.component('my-parent',{
      props: ['name'],
      template: '<div> yzx 我是父組件 {{name}}</div>'
    })
    var vm = new Vue({
      el: '#app'
    })
  </script>

$emit傳值：

$ emit 能夠將子組件中的值傳遞到父組件中去，$emit可以觸發父組件中定義的事件，子組件的資料資訊通過傳遞引數的方式完成，觸發父組件中系結的childfn事件，并傳遞子組件中的message資料，

  <div id="app">
    <parent></parent>
  </div>
  <template id="child">
    <div>
      <button @click="click">Send</button>
      <input type="text" v-model="message">
    </div>
  </template>
   <script>
    Vue.component('parent', {
      template: '<div><child @childfn="transContent"></child>' +
                  '子組件傳來的值 : {{message}}</div>',
      data () {
        return {
          message: ''
        }
      },
      methods: {
        transContent (payload) {
          this.message = payload
        }
      }
    })
    // child組件
    Vue.component('child', {
      template: '#child',
      data () {
        return {
          message: '子組件的訊息 '
        }
      },
      methods: {
        click () {
          this.$emit('childfn', this.message);
        }
      }
    })
    var vm = new Vue({ el: '#app' })

v-if與v-else ：

Vue中的頁面結構是由組件構成的，不同組件可以表示不同頁面，適合進行單頁應用開發，實作登錄和注冊界面點擊按鈕進行切換（方法一）：

    <div id="app">
        <a href="#" @click.prevent="flag ? flag : flag = !flag">登錄 yzx</a>
        <a href="#" @click.prevent="flag ? flag = !flag : flag">注冊 yzx</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
      </div>
      <script>
        Vue.component('login', {
          template: '<div>登錄頁面</div>'
        })
        Vue.component('register', {
          template: '<div>注冊頁面</div>'
        })
        var vm = new Vue({
          el: '#app',
          data: { flag: true }   
        })   
     </script>

方法二：效果如上圖，不展示了哈?

  <div id="app">
    <a href="#" @click.prevent="comName='login'">登錄 yzx</a>
    <a href="#" @click.prevent="comName='register'">注冊 yzx</a>
    <component v-bind:is="comName"></component>
  </div>
  <script>
    Vue.component('login', {
      template: '<div>登錄頁面</div>'
    })
    Vue.component('register', {
      template: '<div>注冊頁面</div>'
    })
    var vm = new Vue({
      el: '#app',
      data: { comName: '' }
    })
 </script>

6. Vue 生命周期

Vue實體為生命周期提供了回呼函式，用來在特定的情況下觸發，貫穿了Vue實體化的整個程序，這給用戶在不同階段添加自己的代碼提供了機會，

鉤子函式：

鉤子函式用來描述Vue實體從創建到銷毀的整個生命周期，

beforeCreate和created：

創建實體物件之前或實體物件創建之后執行，案例演示如下，

  <div id="app">{{msg}}</div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: { msg: 'yzx' },
      beforeCreate () {
        console.log('實體創建之前')
        console.log(this.$data.msg)
      },
      created () {
        console.log('實體創建之后')
        console.log(this.$data.msg)
      }
    })
 </script>

beforeMount和mounted：

在實體創建后，如果掛載點el存在，就進行頁面掛載，

    <div id="app">{{msg}}</div>
    <script>
        var vm = new Vue({
          el: '#app',
          data: { msg: 'yzx' },
          beforeMount () {
          console.log('掛載之前')
          console.log(this.$el.innerHTML) // 通過this.$el獲取el的DOM元素
          },
          mounted () {
            console.log('掛載之后')
            console.log(this.$el.innerHTML)
          }
        })
    </script>

beforeUpdate和updated：

Vue實體掛載完成后，當資料發生變化時，會執行beforeUpdate和updated鉤子函式，

    <div id="app">
        <div v-if="isShow" ref="self"> yzx </div>
        <button @click="isShow = !isShow">更新</button>
        </div>
        <script>
            var vm = new Vue({
              el: '#app',
              data: { isShow: false },
              beforeUpdate () {
                console.log('更新之前')
                console.log(this.$refs.self)
              },
              updated () {
                console.log('更新之后')
                console.log(this.$refs.self)
              }
            })
         </script>

beforeDestroy和destroyed：

生命周期函式的最后階段是實體的銷毀，會執行beforeDestroy和destroyed鉤子函式，

  <div id="app">
    <div ref="self">test</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: { msg: 'yzx' },
      beforeDestroy () {
        console.log('銷毀之前')
        console.log(this.$refs.self)
        console.log(this.msg)
        console.log(vm)
      },
      destroyed () {
        console.log('銷毀之后')
        console.log(this.$refs.self)
        console.log(this.msg)
        console.log(vm)
      }
    })
    // 在控制臺執行：vm.$destroy()，查看效果
 </script>