基礎 - 從模板語法數據綁定、指令到計算屬性總結

時間 2019-11-08

標籤基礎模板語法數據綁定指令計算屬性總結简体版

原文原文鏈接

寫在前面

今年前端屆比較有意思，從大漠窮秋髮表文章比較angular和vue，繼而致歉vue做者、社區，從谷歌辭去Angular Developer PM in China一職而且呼籲你們中止各類無謂的爭論；到尤小右(尤雨溪)知乎迴應大漠窮秋，表態遺憾大漠窮秋離職，但願世界和平。html

其實我以爲更多的是二者社區、用戶、粉絲態度過激致使爭端，因此咱們要懷着一顆理性的心態去看待，切不要黨同伐異。前端

說了點題外話，進入今天的正題 - -vue

今天的主題是vue，也是我以前在初步學習vue和angular以後，選擇vue的次日，由於已經凌晨了，可是我不想去排斥其餘，應該多多學習不一樣前輩們的智慧結晶；小程序

以前在圖靈社區讀過一篇文章《Vue做者尤雨溪：以匠人的態度不斷打磨完善vue》，緩存

先來一發福利照 - - app

裏面也有尤小右一些對於開發vue的想法，總結下來就是：輕量化，快速上手，靈活運用；框架

也有給咱們的一些建議，簡單總結就是：保持好奇心，在業餘時間多作嘗試，以興趣爲動力，把興趣推動一步，保持一種持續學習，持續研究的狀態，多探索，多嘗試；函數

前綴有點長，請放下手裏的西瓜刀，接下來進入今天的正正題吧~~學習

模板語法

關鍵詞：[數據綁定]，[指令]this

談到到模板語法，咱們就會想起數據綁定和指令：

咱們能夠經過聲明式的方式將DOM綁定至vue實例的數據：

先來聊一聊數據綁定：

1）數據綁定

關鍵詞：[ 插值表達式 ]，[ v-once一次性插值 ]，[ v-html ]，[ 做用於特性v-bind ]

丶數據綁定最經常使用的形式應該就是「Mustache」語法 (雙大括號) 的文本插值，不管是vue，仍是angular，小程序都採用了這種方式的文本插值

丶而v-once指令也好理解，一次性插值，當咱們在改變數據的時候，插值的內容不會隨之改變，寫一個例子：

<div id="app9" v-once>這個將不會隨之改變：{{msg}}</div>

<script>
    var app9 = new Vue({
        el: '#app9',
        data: {
            msg: '我是一次性插入的內容'
        }
    })
    // => 數據改變，插值內容不會隨之改變
    app9.msg = 1;　　　　 
    console.log(app9.msg);   // => '1'
</script>

丶插值表達式雙大括號就將數據解釋爲普通文本，而非HTML。使用v-html指令，能夠輸出html，可是咱們通常不這麼作，對於複雜需複用的用組件代替效果更佳

丶Mustache 語法不能做用在 HTML 特性上，咱們使用v-bind做用於特性，寫一個例子：

　經過v-bind綁定disabled屬性

<input id="app10" type="button" v-model='message' v-bind:disabled="isButtonDisabled">

<script>
    var app10 = new Vue({
            el: '#app10',
            data: {
                message: 'v-bind綁定標籤特性',
                isButtonDisabled: false
            }
      })
</script>

2）指令

關於指令，上面咱們已經用到幾個了，指令是帶有 v- 前綴的特殊屬性，angular中的指令是 ng- 開頭

關鍵詞分類：[ v-bind綁定標籤屬性 ]，[ v-if條件 ]，[ v-for循環 ]，[ v-on綁定事件 ] ，[ v-model雙向綁定 ]，[ v-show顯示隱藏 ]，[ v-text/v-html讀取 ]，[ v-once一次性插值 ]

上面列出了指令關鍵詞的一些分類，對於條件指令：存在v-if，那麼咱們就會想到有沒有v-else，v-else-if指令，這點上做者知足了咱們的猜測；

丶v-bind 綁定標籤屬性，提及標籤屬性，咱們都知道，class、id、href、disabled...等等這些都是屬於標籤的屬性，上面寫了一個綁定disabled屬性的例子，那麼v-bind對於綁定class是否是那麼駕輕就熟呢？

<style>
    .red {
        background: red;
    }
    .blue {
        width: 100px;
        height: 100px;
        background: blue;
    }
    </style>
</head>

<body>
    <div id="box">
        <div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>
        <div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data() {
                return {
                    isred: false
                }
            }
         })
    </script>

咱們看了一下效果，看來v-bind能夠很好的操做標籤屬性，包括class、id等這些

丶v-if 主要作添加判斷，操做刪除Dom元素，來寫一個簡單的例子：

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

丶v-for 作循環遍歷數據等，並經過插值表達式將它們輸出到頁面

丶v-on 綁定事件，能綁定的事件有不少：參考 MDN 事件類型一覽表，寫一個click的例子：

<div id="app5">
     <p>{{message}}</p>
     <button v-on:click="reverseMessage">逆轉消息</button>
</div>

<script>
 var app5 = new Vue({
     el: '#app5',
     data: {
         message: 'hello v-on!'
     },
     methods: {
         reverseMessage: function() {
             this.message = this.message.split('').reverse().join('')
         }
     }
 })
</script>

丶v-model 雙向綁定，使用v-model實現雙向數據綁定，

在看vue雙向數據綁定以前，咱們先看一下一個簡單的angular的雙向數據綁定：

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <p>{{ note }}</p>
        <input type="text" ng-model="note">
    </div>
</div>

<script>
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
    $scope.note = '';
]);
</script>

再來寫一個vue的雙向綁定例子：

<!-- 雙向綁定：v-model -->
<div id="app6">
     <p>{{message}}</p>
     <input type="text" v-model="message" v-on:change='textChange'>
</div>

<script>
 var app6 = new Vue({
     el: '#app6',
     data: {
         message: 'hello v-modle!'
     },
     methods: {
         textChange: function() {
             console.log(this.message);
         }
     }
 })
</script>

從我我的而言，在這裏相比之下，vue的代碼編寫風格更加簡潔，通俗易懂；

計算屬性和觀察者

vue支持內聯表達式，能夠完成簡單的布爾操做，字符串拼接；可是若是涉及更復雜的邏輯，就須要用到計算屬性了

關鍵詞：[ 計算屬性computed ]，[ 計算屬性computed VS 方法methods ]，[ 計算屬性computed VS 監聽屬性watch ]，[ 計算屬性的setter ]，[ 偵聽器watch ]

丶計算屬性computed VS 方法methods，特色：計算屬性 依賴緩存，沒必要每次執行函數，直到相關值發生變化時才從新計算

丶計算屬性computed VS 偵聽watch，特色：watch 過程式，$watch回調

<div id="app11">
     <p>Original message:"{{ message }}"</p>
     <p>Computed reversed message:"{{ reversedMessage1 }}"</p>
</div>
<div id="app12">{{fullName}}</div>

<script>
// 計算屬性
    var app11 = new Vue({
     el: '#app11',
     data: {
         message: 'Hello'
     },
     computed: {
         // 計算屬性的getter
         reversedMessage1: function() {
             return this.message.split('').reverse().join('');
         }
     }
 })
 // watch偵聽屬性
 var app12 = new Vue({
     el: '#app12',
     data: {
         firstName: 'foo',
         lastName: 'bar',
         fullName: 'foo bar'
     },
     watch: {
         firstName: function(val) {
             this.fullName = val + ' ' + this.lastName;
         },
         lastName: function(val) {
             this.fullName = this.firstName + ' ' + val;
         }
     }
 })
</script>

這種狀況下，咱們每每選擇計算屬性。

丶計算屬性的setter，像上面那樣，通常computed計算屬性默認只有一個getter，可是若是有須要能夠提供一個setter給計算屬性；

<div id="app13">{{fullName}}</div>

<script>
 // 計算屬性的setter
 var app13 = new Vue({
     el: '#app13',
     data: {
         firstName: 'okay',
         lastName: 'chen',
         fullName: 'okay chen'
     },
     computed: {
         fullName: {
             // getter
             get: function() {
                 return this.firstName + ' ' + this.lastName
             },
             // setter
             set: function(newValue) {
                 var names = newValue.split(' ')
                 this.firstName = names[0]
                 this.lastName = names[names.length - 1]
             }
         }
     }
 })
 app13.fullName = 'john Doe';
 console.log(app13.fullName);
</script>