所有程式碼沒有引入vue.js！！！！

vue例項化物件中的this指向

在vue中 this指向vue的例項化物件

const app = new Vue({
    el:"#app",
    data:{
        name:"張三"
    },
    methods:{
        tryThis(){
            console.log(this);
            console.log(this === app);  // true
        }
    }
})
console.log(app);

app例項化後 data和methods裡面的屬性 會直接整合到vue例項上

例項化物件上已經沒有data和methods屬性 取值時 只需要使用this進行取值

自定義指令

1、自定義指令：使用Vue.directive(id,definition)註冊全域性自定義指令，使用元件的directives選項註冊區域性自定義指令。

全域性註冊：

   Vue.directive('xxx', {
        inserted: function (el) {
           //指令屬性
        }
    });

區域性註冊：

var app = new Vue({
    el: '#app',
    directives: {
        xxx: {
            
 
//指令屬性
        }
    }
});

2、鉤子函式：

指令定義函式提供了幾個鉤子函式（可選）：

bind：只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作。

inserted：被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於 document 中）。

update：第一次是緊跟在 bind 之後呼叫，獲得的引數是繫結的初始值，之後被繫結元素所在的模板更新時呼叫，而不論繫結值是否變化。通過比較更新前後的繫結值，可以忽略不必要的模板更新（詳細的鉤子函式引數見下）。

componentUpdated：被繫結元素所在模板完成一次更新週期時呼叫。

unbind：只調用一次， 指令與元素解綁時呼叫。

3、鉤子函式的引數：(el, binding, vnode, oldVnode)

el：指令所繫結的元素，可以用來直接操作 DOM 。

binding：一個物件，包含以下屬性

name：指令名，不包含v-的字首；

value：指令的繫結值；例如：v-my-directive="1+1"，value的值是2；

oldValue：指令繫結的前一個值，僅在update和componentUpdated鉤子函式中可用，無論值是否改變都可用；

expression：繫結值的字串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；

arg：傳給指令的引數；例如：v-my-directive:foo，arg的值為 'foo'；

modifiers：一個包含修飾符的物件；例如：v-my-directive.a.b，modifiers的值為{'a':true,'b':true}

vnode：Vue編譯的生成虛擬節點；

oldVnode：上一次的虛擬節點，僅在update和componentUpdated鉤子函式中可用。

 1 <div id="app" v-demo:foo.a.b="message"></div>
 2  
 3 Vue.directive('demo', {
 4   bind: function (el, binding, vnode) {
 5       console.log('bind');
 6     var s = JSON.stringify
 7     el.innerHTML =
 8       'name: '       + s(binding.name) + '<br>' +
 9       'value: '      + s(binding.value) + '<br>' +
10       'expression: ' + s(binding.expression) + '<br>' +
11       'argument: '   + s(binding.arg) + '<br>' +
12       'modifiers: '  + s(binding.modifiers) + '<br>' +
13       'vnode keys: ' + Object.keys(vnode).join(', ')
14   }
15 });
16 new Vue({
17   el: '#app',
18   data: {
19     message: 'hello!'
20   }
21 });

4、函式簡寫：大多數情況下，我們可能想在 bind 和 update 鉤子上做重複動作，並且不想關心其它的鉤子函式。可以這樣寫:

1 Vue.directive('color-swatch', function (el, binding) { 2 el.style.backgroundColor = binding.value 3 })

5.多值入參

我們可以通過 JavaScript 的物件字面量，為自定義指令一次性傳入多個值。其實任意一個合法的 JavaScript 表示式都是支援的。

<div id="app3">
    <div v-deniro-directive2="{title:'物理學家新發現四起黑洞相撞事件',content:'物理學家探測到了它們向地球發來的引力波'}"></div>
</div>
<script>
Vue.directive('deniro-directive2', {
    bind: function (el, binding, vnode) {

        el.innerHTML =
            'title:' + binding.value.title + '<br>' +
            'content:' + binding.value.content + '<br>';
    }
});
var app3 = new Vue({
    el: '#app3',
    data: {
    }
});
</script>

計算屬性

為什麼要使用計算屬性

模板內的表示式通常用於簡單的運算，當其過長或邏輯複復雜時，會變得難以維護

什麼是計算屬性
在Vue應用中，在模板中雙向繫結一些資料或者表示式，但是表示式如果過長，或者邏輯更為複雜時，就會變得臃腫甚至難以維護和閱讀

計算屬性的用法

　　在一個計算屬性裡可以完成各種複雜的邏輯，包括運算、函式呼叫等，只要最終返回一個結果就可以。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我們把複雜處理放在了計算屬性裡面了
</div>
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 例項
            return this.message.split('').reverse().join('')
        }
    }
});

計算屬性還可以依賴多個Vue 例項的資料，只要其中任一資料變化，計算屬性就會重新執行，檢視也會更新。

　　計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性可以依賴其他計算屬性; 二是計算屬性不僅可以依賴當前Vue 例項的資料，還可以依賴其他例項的資料

   <div id="app1"></div>
    <div id="app2">{{ reverseText}}</div>
var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});
 
var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
            return app1.text.split('').reverse().join('');  //使用app1的資料進行計算
        }
    }
});

每一個計算屬性都包含一個getter 和一個setter ，我們上面的兩個示例都是計算屬性的預設用法， 只是利用了getter 來讀取。

在你需要時，也可以提供一個setter 函式， 當手動修改計算屬性的值就像修改一個普通資料那樣時，就會觸發setter 函式，執行一些自定義的操作

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    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];
            }
        }
    }
});
//現在再執行 vm.fullName = 'John Doe' 時，setter 會被呼叫，vm.firstName 和 vm.lastName 也會相應地被更新。

計算屬性快取
其實細心的話就會發現，呼叫methods裡的方法也能實現和計算屬性一樣的效果，甚至有的方法還能接收引數，使用起來更加的靈活，既然使用methods就可以實現，那為什麼還需要計算屬性呢？原因就是計算屬性是基於他的依賴快取的。一個計算屬性所依賴的資料發生變化時，他才會重新取值，
所以依賴的text只要不改變。計算屬性也就不更新

computed：{
now：function（）
{
return Date.now()
}
}
這裡的Date.now()不是響應式依賴，所以計算屬性now 不會更新，但是methods則不同，只要重新渲染他就會被呼叫，因此函式也會被執行。
使用計算屬性還是methods取決於你是否需要快取，當遍歷大陣列和做大量計算時，應當使用計算屬性，除非你不希望得到快取