前言

用了這么久的vue了，但是一直沒有時間寫個系列文章，現在抽一定時間總結下vue的知識點。

首先，Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。
下面總結的內容是在2.x的版本。

安裝

直接用 <script> 引入

直接下載并用 <script> 標簽引入，Vue 會被注冊為一個全局變量。

在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!

CDN

推薦：https://cdn.jsdelivr.net/npm/vue，會保持和 npm 發布的最新的版本一致。可以在 https://cdn.jsdelivr.net/npm/vue/ 瀏覽 npm 包資源。
也可以從 unpkg 和 cdnjs 獲取 (cdnjs 的版本更新可能略滯后)。

NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

# 最新穩定版 $ npm install vue

命令行工具 (CLI)

快速搭建大型單頁應用,只需幾分鐘即可創建并啟動一個帶熱重載、保存時靜態檢查以及可用于生產環境的構建配置的項目：

# 全局安裝 vue-cli $ npm install --global vue-cli # 創建一個基于 webpack 模板的新項目 $ vue init webpack my-project # 安裝依賴，走你 $ cd my-project $ npm install $ npm run dev

開發版本

GitHub 倉庫的 /dist 文件夾只有在新版本發布時才會提交。如果想要使用 GitHub 上 Vue 最新的源碼，你需要自己構建！

git clone https://github.com/vuejs/vue.git node_modules/vue cd node_modules/vue npm install npm run build

第一個程序Hello Vue

<div id="app">{{ message }} </div> var app = new Vue({el: '#app',data: {message: 'Hello Vue!'} })

現在數據和 DOM 已經被建立了關聯，所有東西都是響應式的。我們要怎么確認呢？打開你的瀏覽器的 JavaScript 控制臺 (就在這個頁面打開)，并修改 app.message 的值

vue核心最基本的功能

聲明式渲染

給某一個DOM元素綁定屬性，如下

<div id="app"><span v-bind:title="message">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</span> </div>

JS代碼：

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

其中上面用到的v-bind 特性被稱為指令。

條件與循環

控制切換一個元素是否顯示也相當簡單：

<div id="app"><p v-if="seen">現在你看到我了</p> </div> var app = new Vue({el: '#app',data: {seen: true} })

v-for 指令可以綁定數組的數據來渲染一個項目列表：

<div id="app"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol> </div> var app = new Vue({el: '#app',data: {todos: [{ text: '學習 JavaScript' },{ text: '學習 Vue' },{ text: '整個牛項目' }]} })

在控制臺里，輸入 app.todos.push({ text: '新項目' })，你會發現列表最后添加了一個新項目。

處理用戶輸入

Vue 提供了 v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。

<div id="app"><p>{{ message }}</p><input v-model="message"> </div> var app = new Vue({el: '#app',data: {message: 'Hello Vue!'} })

組件化應用構建

重要：需要明白所有的 Vue 組件都是 Vue 實例，并且接受相同的選項對象 (一些根實例特有的選項除外)。

組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹：

在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。在 Vue 中注冊組件很簡單：

// 定義名為 todo-item 的新組件 Vue.component('todo-item', {template: '<li>這是個待辦項</li>' })

現在你可以用它構建另一個組件模板：

<ol><!-- 創建一個 todo-item 組件的實例 --><todo-item></todo-item> </ol>

但是這樣會為每個待辦項渲染同樣的文本，這看起來并不炫酷。我們應該能從父作用域將數據傳到子組件才對。讓我們來修改一下組件的定義，使之能夠接受一個 prop：

Vue.component('todo-item', {// todo-item 組件現在接受一個// "prop"，類似于一個自定義特性。// 這個 prop 名為 todo。props: ['todo'],template: '<li>{{ todo.text }}</li>' })

現在，我們可以使用 v-bind 指令將待辦項傳到循環輸出的每個組件中：

<div id="app"><ol><!--現在我們為每個 todo-item 提供 todo 對象todo 對象是變量，即其內容可以是動態的。我們也需要為每個組件提供一個“key”，稍后再作詳細解釋。--><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol> </div> Vue.component('todo-item', {// todo-item 組件現在接受一個// "prop"，類似于一個自定義特性。// 這個 prop 名為 todo。props: ['todo'],template: '<li>{{ todo.text }}</li>' })var app = new Vue({el: '#app',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '隨便其它什么人吃的東西' }]} })

這個例子子單元通過 prop 接口與父單元進行了良好的解耦。我們現在可以進一步改進 <todo-item> 組件，提供更為復雜的模板和邏輯，而不會影響到父單元。
在一個大型應用中，有必要將整個應用程序劃分為組件，以使開發更易管理

<div id="app"><app-nav></app-nav><app-view><app-sidebar></app-sidebar><app-content></app-content></app-view> </div>

組件與自定義元素的關系

你可能已經注意到 Vue 組件非常類似于自定義元素——它是 Web 組件規范的一部分，這是因為 Vue 的組件語法部分參考了該規范。例如 Vue 組件實現了 Slot API 與 is 特性。但是，還是有幾個關鍵差別：

• Web 組件規范仍然處于草案階段，并且未被所有瀏覽器原生實現。相比之下，Vue 組件不需要任何 polyfill，并且在所有支持的瀏覽器 (IE9 及更高版本) 之下表現一致。必要時，Vue 組件也可以包裝于原生自定義元素之內。
• Vue 組件提供了純自定義元素所不具備的一些重要功能，最突出的是跨組件數據流、自定義事件通信以及構建工具集成。

剖析一個完整的vue實例

數據與方法

當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

// 我們的數據對象 var data = { a: 1 }// 該對象被加入到一個 Vue 實例中 var vm = new Vue({data: data })// 它們引用相同的對象！ vm.a === data.a // => true// 設置屬性也會影響到原始數據 vm.a = 2 data.a // => 2// ……反之亦然 data.a = 3 vm.a // => 3

重要：當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時 data 中存在的屬性才是響應式的。也就是說如果你添加一個新的屬性，比如：vm.b = 'hi'

那么對 b 的改動將不會觸發任何視圖的更新。如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在，那么你僅需要設置一些初始值。比如：

data: {newTodoText: '',visitCount: 0,hideCompletedTodos: false,todos: [],error: null }

我們也可以使用ES6標準中提供的一個方法Object.freeze(),其方法作用就是凍結對象，對對象中的屬性進行修改無效。也即是會阻止修改現有的屬性，也意味著響應系統無法再追蹤變化。

var obj = {foo: 'bar' }Object.freeze(obj)new Vue({el: '#app',data () {return {obj}} }) <div id="app"><p>{{ obj.foo }}</p><!-- 這里的 `obj.foo` 不會更新！ --><button @click="obj.foo = 'baz'">Change it</button> </div>

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。例如：

var data = { a: 1 } var vm = new Vue({el: '#example',data: data })vm.$data === data // => true vm.$el === document.getElementById('example') // => true// $watch 是一個實例方法 vm.$watch('a', function (newValue, oldValue) {// 這個回調將在 `vm.a` 改變后調用 })

實例生命周期鉤子

每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。

比如 created 鉤子可以用來在一個實例被創建之后執行代碼：

new Vue({data: {a: 1},created: function () {// `this` 指向 vm 實例console.log('a is: ' + this.a)} }) // => "a is: 1"

也有一些其它的鉤子，在實例生命周期的不同階段被調用，如 mounted、updated 和 destroyed。生命周期鉤子的 this 上下文指向調用它的 Vue 實例。

不要在選項屬性或回調上使用箭頭函數，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

生命周期圖示

下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

注：特別有用

轉載于:https://www.cnblogs.com/moqiutao/p/8258353.html

總結

以上是生活随笔為你收集整理的vue从入门到进阶：简介（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。