Vue.js 基礎學習

標籤：解析   解釋   屬性   一個   sage   app   https   通過   var   

今天我開始了Vue.js 的學習。

那麼什麼是Vue.js 呢？

Vue.js是一套開發Web頁面的JavaScript指令碼架構。聽起來感覺很難，不過據說，Vue.js是Web-Javascript指令碼架構中最容易上手的架構。所以我便選擇了先來學習這個。

要學習Vue.js首先就要擷取庫檔案了，在網上有很多地方可以找到，我是在bootcdn上找到的

接下來我們通過Vue輸出一串Hello World !

首先引入vue.

    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>

然後在body中建立一個div 並設定id

<div id="myApp">        {{ message }}    </div>

在文檔中一旦出現{{ }}這種兩對花括弧時，vue就開始解析了，會把它當成類似js的語句來解釋

接下來是js代碼

<script>    var myApp = new Vue({        el : ‘#myApp‘ ,        data : {            message : "hello world!"        }    })</script>

解釋一下，上面js代碼的含義 

new 一個Vue 其中el 是element的意思，用來綁定對象，即產生的Vue對象會產生一個域，這個域作用在那個元素上的 ，此處就是作用在id為myApp的元素上的

data 底下所有的屬性都是綁定在這個myApp下的。

vue中的內容是直接和記憶體中的綁定的，如果你在網頁的審查元素中書寫 myApp.message = "Hello Vue" 那麼此時頁面內容也會變成Hello Vue

這樣我們就實現了Hello world 了。

Vue.js 基礎學習