前端|初學vue

1.1進入vue官網了解vue到底是啥

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

1.2安裝

建立一個vue.html檔案

引入 Vue：

引入：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>或<script  src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.3申明是渲染

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

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

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

這樣我們成功船艦了一個Vue，可以得到一個Hello Vue！，資料和 DOM 已經就建立了關聯，所有東西都是響應式的。注意我們不再和 HTML 直接互動了。一個 Vue 應用會将其挂載到一個 DOM 元素上 (對于這個例子是#app) 然後對其進行完全控制。HTML 是我們的入口，但其餘都會發生在新建立的 Vue 執行個體内部。

個人認為為了友善了解：我可以了解為。HTML其實就是一個單純的入口，起到關鍵作用的是Vue，因為其餘都會發生在新建立的 Vue 執行個體内部，Vue執行個體内部才有真正的資料。是關聯的DOM元素也就是這裡的（#app）将入口和Vue示例内部（也就是資料和一些實際的操作）聯系了起來。

②  除了文本插值，我們還可以像這樣來綁定元素attribute：

<div  id="app-2">   <span  v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動态綁定的提示資訊！   </span>

var app2 = new  Vue({   el: '#app-2',     message: '頁面加載于 ' + new Date().toLocaleString()

v-bind attribute 被稱為指令。指令帶有字首 v-，以表示它們是 Vue 提供的特殊 attribute。它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡表示：将這個元素節點的 title attribute 和 Vue 執行個體的messageproperty保持一緻。

1.4條件循環

①   

<div id="app-3">   <p v-if="seen">現在你看到我了</p>

var app3 =  new Vue({   el: '#app-3',     seen: true

這樣就會顯示現在你看到我了。輸入 app3.seen =false，你會發現之前顯示的消息消失了。這個例子示範了我們不僅可以把資料綁定到 DOM 文本或 attribute，還可以綁定到 DOM 結構。

②Vue 還提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果。還有其它很多指令，每個都有特殊的功能。例如，v-for 指令可以綁定數組的資料來渲染一個項目清單：

<div  id="app-4">   <ol>     <li v-for="todo in  todos">       {{ todo.text }}     </li>   </ol>

var app4 =  new Vue({   el: '#app-4',     todos: [       { text: '學習 JavaScript' },       { text: '學習 Vue' },       { text: '整個牛項目' }     ]

輸入 app4.todos.push({text: '新項目' })，你會發現清單最後添加了一個新項目。本文是參考vue官網加上一些自己的了解完成的，如了解有誤還請指教。