vue實例化

1. 創建一個vue實例

通過vue函數來創建一個vue 實例,
一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可嵌套的、可複用的組件樹組成。

let wm = new Vue({
	//選項
})

雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啓發。因此在文檔中經常會使用 vm (ViewModel 的縮寫) 這個變量名錶示 Vue 實例。
(ViewModel 的縮寫) 這個變量名錶示 Vue 實例。

當創建一個Vue實例是,我們可以傳入一個選項對象(有時我會稱之爲配置對象).

一個Vue應用偶一個通過 new Vue 創建的根 Vue 實例,以及可選的嵌套的 ,可複用的組件數組成.

2. 聲明式渲染

Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統

2.1 關於{{}}插值表達式

插值表達式,表達式,賦值運算,計算,三元表達式,但是儘量少在這裏寫邏輯計算

 <div id="app">
        {{msg}}
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:"hello world",
            }
        })
    </script>

如何確定現在的數據已經和DOM建立了關聯，變成響應式的呢
將js中的new Vue 複製給一個全局變量app.此時app就是Vue實例化對象,未來可能會用它來搞很多事情,但是最常用到它的時候,是通過this關鍵字來使用它

這樣我媽們就已經成功的創建了一個 Vue 應用,{{}}這樣渲染數據的方式看起來和我們 es6 中學習的字符串模板非常相似.

但是Vue 在背後已經做了非常多的工作,現在我們的數據和 DOM 已經建立了關聯,所有的東西都是響應式的.

現在我們如何驗證數據已經被稱響應式了呢?
我們已經將 new Vue 賦值給了一個全局變量vm ,此時的 vm 就是 Vue 的實例化對象,未來可能會用它做很多的事情.

我們在控制檯中輸入下面的diamante,頁面中的值將會發生相應的改變:

	vm.msg = "你好 世界"

有沒有發現一件事情,我們修改的語句用的是 vm.msg ,難道不應該是 vm.data.msg 嗎?
這是因爲當我們創建一個 Vue 實例化的時候,data 身上的屬性也會自動掛載到 vm 身上.通過這兩種方法都可以訪問到 msg , 但是通常我們會使用 vm.msg 訪問(因爲可以少些一點代碼啊><)

2.2 使用JavaScript語法

在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對於所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

這些表達式會在所屬 Vue 實例的數據作用域下作爲 JavaScript 被解析。
示例代碼:

    <div id="app">
        <!-- 數字操作 -->
        <p>{{ number + 2 }}</p>

        <!-- 三目運算 -->
        <p>{{ ok ? 'YES' : 'NO' }}</p>

        <!-- 字符串翻轉 -->
        <p>{{ message.split('').reverse().join('')  }}</p>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                message: 'Hello World',
                number: 10,
                ok: true,
            }
        })
    </script>

但是有個限制就是，每個綁定雙大括號(Mustache語法)裏面都只能包含單個表達式

2.3 關於數據編程

Vue關注的是數據變化,不需要在像以前一樣關注DOM的變化

比如我想在2秒之後讓頁面發生變化,我們只需要在2秒後更改數據就可以了.

<div id="app">
    {{msg}}
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: 'Hello World',
        }
    })

    setTimeout(function () {
        vm.$data.msg = "你好 世界"
    },2000)
</script>

這裏面 vm 是 Vue 的實例對象,這個對象上有 $data 屬性,其值就是選項對象(就是在實例化 Vue 時傳入的對象)中的 data 屬性值,
這個示例在2秒後通過app對象將 data 中的msg的值改變了, 因爲Vue是始終在關注着msg這個數據,一旦數據發生變化,就會觸發Vue的響應式, 繼而改變視圖顯示

3. 實例上的方法

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。通過實例對象使用屬性時,屬性前面都需要帶上前綴 $，以便與用戶定義的屬性區分開來.

<div id="app">
    {{a}}
</div>

<script>
    let  msg = { a: 1 };
    let  vm = new Vue({
        el: '#app',
        data: msg,
    })

    console.log( vm.$data === msg)   // => true
    console.log( vm.$el === document.getElementById('app') )   // => true

</script>

3.1 實例上的常用方法

vm.$attrs   // 用戶獲取父組件傳遞給子組件的屬性,除了props接受的屬性和class,style外的屬性
vm.$data    // vm 上的數據
vm.$watch   // 監聽
vm.$el      // 當前el元素
vm.$set     // 後加的屬性實現響應式
vm.$options // vm 配置 上的 所有屬性
vm.$nextTick(()=>{})   // 異步方法,等待渲染dom完成後來獲取vm
vm.$refs     // 獲取dom元素或者組件實例的引用

當我們實例化了一個 vue 對象的時候我們也可以在控制檯上打 vue 的實例化對象,

可以看到這裏面有很多的屬性和方法.

4.實例化多個Vue

我們可以在頁面上同時實例化多個Vue, 不同的實例接管頁面上不同的區域.
看下如下的示例:

    <div id="app">
       <p>{{name}}{{price}}元一斤</p>
    </div>

    <div id="box">
        <p>{{name}}今年{{age}} 歲了</p>
    </div>
    <script>
        let vm1 = new Vue({
            el:'#app',
            data:{
               name:"香蕉",
                price:6,
            }
        })

        let vm2 = new Vue({
            el:'#box',
            data:{
                name:"希文",
                age:18,
            }
        })
    </script>

通過實例我們瞭解 兩個實例 vm1和 vm2 接管了不同的 DOM 元素.

5. Vue操作 DOM 元素

雖然Vue是數據驅動的,但是有的時候我們就需要自己手動的獲取到DOM元素,對DOM元素進行操作,那麼該如何處理呢.

我們可以在需要操作的DOM元素中使用ref屬性,ref屬性的值是自己定義的名字
然後我們可以在mounted函數中通過Vue實例的$refs屬性獲取操作dom元素.

<div id="app">
    <div ref="why"></div>
</div>

<script>
    let  msg = { a: 1 };
    let  vm = new Vue({
        el: '#app',
        data: msg,
        mounted(){
            console.log(this.$refs.why)
        }
    })
</script>

因爲可以在多個 DOM 元素上使用 ref,所以 Vue 實例的 $refs 屬性獲取的是所有具有 ref 屬性的 DOM 元素的集合, 因爲如果我們想獲取一個確定的 DOM 元素就需要再通過當初的 ref值獲取.

簡而言之: 就是ref 如果在 dom 元素上this.$refs.名字 是獲取dom元素

此時就獲取到了 DOM 元素, 然後就可以採用原生的JavaScript 對 DOM 進行操作

<div id="app">
    <div ref="why"></div>
</div>

<script>
    let  msg = { a: 1 };
    let  vm = new Vue({
        el: '#app',
        data: msg,
        mounted(){
            console.log(this.$refs.why)
            let box = this.$refs.why;
            box.style.width = '500px';
            box.style.height = '300px';
            box.style.backgroundColor= "pink";
        }
    })
</script>

Vue 接管的DOM元素之外的元素使用ref是獲取不了的,值是undefined