今天，給大家分享下Vue.js基礎入門，我主要由了解Vue.js、開始起步、語法三個部分簡單的寫了基礎入門知識，希望對正在學習Vue.js的你有所幫助！

一、了解 Vue.js

1.1? ?Vue.js是什么？

Vue.js是一套用于構建用戶界面的漸進式框架。Vue.js通過簡單的API提供高效的數據綁定和靈活的組件系統。

1.2 ? 特性：

確實輕量、數據綁定、指令、插件化

二、起步開始

2.1? 官方網址：https://cn.vuejs.org/

進入官方網址，點擊“學習”--“教程”

提供了多種方式安裝vue，初學者，建議用最簡單的安裝方式，下載開發版本。點擊進入之后是一個vue.js源碼文件，直接保存下來即可。

2.3? ?第一個Vue實例：

1、代碼解讀

在頭通過引入vue.js文件。

el：是element的縮寫，指要操作/綁定的元素

data：寫需要操作改變的內容。

注意：學javascript時，很多時候都是操作DOM的模式，而vue則更多是操作數據的雙向綁定。

2、Vue實例、掛載點、模板之間的關系

掛載點：需要操作的元素。例如：<div id="app"></div>

Vue實例只會處理掛載點下的內容。

掛載點內部的內容叫模板內容。比如，下面的

用模板的方式演示上面的例子，以此說明掛載點內的內容為template：

效果：自動輸出 “你好，hello vue！”

Vue實例：自動根據el，template，data數據生成最終的效果。最后放在掛載點之中。

三、語法

3.1? ?插值

文本插值是最基本的形式，用雙大括號{{ }}，如下代碼：

3.2? ?指令

指令是帶有v-前綴的特殊性，主要綁定表達式，也就是javascript表達式和過濾器。指令的作用是當表達式的值發生變化時，將這個變化也反映到DOM上：

當show為true時，展示“我是標題”的文字。否則就不展示。

指令有許多種，詳細的可以看官方文檔。比如還帶參數。修飾符。縮寫等。

以下列舉比較常用的指令：

v-text和v-html

監聽事件指令 v-on

屬性綁定指令 v-bind

表單輸入綁定指令 v-model

計算屬性

條件渲染：v-if 和 v-show的區別

1、v-text和v-html的區別

用v-html指令插值

用v-text指令插值

將上圖的v-html改成v-text，其他不變。

總結：

v-html 輸出標簽中的內容

v-text輸出結果為帶標簽 的

2、監聽事件指令 v-on

v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。

效果：當你點“點我”時，就彈出“你點到我了”。

1、代碼解讀

事件寫在Vue實例的methods對象里

v-on可以簡寫為：@

2、改變插值

如果是要改變插值的話，如下：

效果：點擊“我是標題”，變成“哈哈哈”。

3、屬性綁定指令 v-bind

v-bind??指令可以用于響應式地更新 HTML 屬性：

4、表單輸入綁定指令 v-model

v-model?指令在表單及<input>及<textarea>元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理

效果：

如果你在輸入框后加上333，那div的內容也會自動變化。

如圖：這就是雙向數據綁定！

v-model這部分的內容，可以直接看vue官網的例子。詳細，有利于初學者理解。

5、計算屬性

效果：

未輸入數字時：如圖

當你輸入值時：如圖

優點：

computed 計算屬性，它的性能是比較高的，只有當他依賴的屬性發生變化時，它才會重新請求計算，否則使用上一次的緩存值。所以如果一個龐大的數據項目，需要有緩存的，就可以用這種方法。可以減少請求次數，達到優化。

6、條件渲染：v-if 和 v-show的區別

第一種情況，顯示的時候

以上代碼，我通過在data的showOrhide的ture來控制顯示，明顯看出兩者都顯示在dom結構中。很容易理解！

第二種情況，隱藏時候

以上代碼，我將data的showOrhide的ture改為false來控制隱藏，可是，我們看dom結構，通過v-if的那個div已經在dom中移除了。而v-show的div則是通過display：none來達到隱藏。但dom結構依然存在。

來看看官網對這2個的對比：

7、列表渲染：v-for

v-for?指令根據一組數組的選項列表進行渲染

效果：

入門教程到這里基本就差不多了，你們都掌握了嗎？

歡迎關注微信公眾號【一文插畫】，回復【資源】即可獲得學習資料~?“領干貨” 一起提升技能！未經授權，不得轉載。