Vue.Js簡介與資料渲染

Vue.Js是什麼

Vue 是一套用于建構使用者界面的漸進式架構。與其它大型架構不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鍊以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

Vue.js的安裝

直接使用script标簽進行導入即可，

第一種：開發環境版本，包含了有幫助的指令行警告

第二種：生産環境版本，優化了尺寸和速度

第三種：下載下傳Vue.js檔案，使用script标簽導入 ：https://cn.vuejs.org/js/vue.js

聲明式渲染

Vue.js 的核心是一個允許采用簡潔的模闆文法來聲明式地将資料渲染進 DOM 的系統：

在HTML當中進行對資料的渲染

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

在js當中聲明Vue對象進行對資料的綁定，el表示對那個元素進行挂載，這裡不單單隻是可以對id進行挂載，對class 标簽名都可以進行挂載。而data當中表示對元素進行資料綁定

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
           

運作檢視效果

關于el挂載點存在的問題：

Vue執行個體的作用範圍是什麼呢?

Vue會管理el選項命中的元素及其内部的後代元素

是否可以使用其他的選擇器?

可以使用其他的選擇器;但是建議使用ID選擇器

是否可以設定其他的dom元素呢?

可以使用其他的雙标簽,不能使用HTML和BODY

data資料對象

在前面儲存了簡單的String型，外加複雜的資料，如數組、對象等

data: {
				massage: "Hello Vue!",
				school: {
					name: "長沙民政學院",
					add: "長沙市雨花區香樟路22号"
				},
				campus:["軟體系","民社系","外語系"]
			}
           

對于對象使用

.

擷取對象的值，而對于數組使用索引進行擷取即可

<div id="app">
			{{ massage }}
			<h3>
				{{ school.name }}
				{{ school.add }}
			</h3>
			<h3>
				{{campus[0]}}
			</h3>
		</div>
           

在浏覽器當中進行檢視