極簡Vue基礎指令與方法

前言：

最近感覺南方挺熱的，走在路上能聽見能聽到很大聲的蟬鳴。不過我喜歡蟬鳴。也喜歡夏天。最喜歡在夏天旅行。夏天，你好。ヽ(?????)??

最近挺久沒更新了，不如，就寫篇vue基礎的文章把。這是一篇極簡Vue基礎指令與方法的文章，快速回憶vue基礎指令。

@TOC

一.vue腳手架安裝：

vue-cli讓人們迅速搭建一個vue項目。

1.先打開cmd終端，在終端回車執行如下命令，先全局安裝@vue/cli腳?架?具。

npm install -g @vue/cli

安裝完成之后，使?如下命令查看版本號：

vue --version

2.進入一個位置創建項目，如我在D盤新建一個空文件夾ceshiItem，我要在里面建一個項目：

打開該目錄下的終端，輸入以下命令：

vue create 項目名字

如，我建一個叫auroras的項目：

3.選一個項目，箭頭代表選中的選項，上下鍵可以移動箭頭，選好之后回車。選最后一個，回車，表示自己手動選擇配置。

4.上下鍵移動，空格進行選中和不選中，選擇如下4個，選完直接回車，Router是路由，vuex是狀態機，Babel是編譯，TypeScript是TypeScript支持，CSS Pre-processors是CSS預編譯器（包括：SCSS/Sass、Less、Stylus）等等：

5.選擇2.x回車，目前還是2.x版本的用得多，回車后輸入y，再回車：

6. 選擇Babel等配置文件存放位置，第一個回車，然后出現是否記錄以便下次使用該配置，輸入y回車，然后為該配置起個名字，好下次直接選擇該配置，我就起個auroras：

7. 等待項目初始化，初始化完成，/ceshiItem目錄下有了auroras這個項目：

8. 右鍵通過vscode方式打開auroras這個文件夾，在終端輸入如下命令運行項目：

npm run serve

9.等待片刻，出現網址，瀏覽器輸入第一個網址就是項目了：

vue文件的初始模板如下，可將App.vue文件內容刪除換成下面的開始學習：

其它：

到這就創建項目好了，其實還有個方法就是用vue可視化面板創建項目，我認為這個簡單直觀得多，打開本地cmd終端，輸入命令 vue ui

可視化面板：

使用可視化面板創建項目可以參考我另一篇文章，里面的第三點詳細寫有：https://auroras.blog.csdn.net/article/details/117536679

二.頁面基渲染 {{x}}：

在data中定義?個變量，通過 Mustache 語法 (雙大括號：{{xxx}} ) 可以將其內容快速渲染至頁面：

核心語法：

{{ msg }}

定義一個msg變量：

data() { return { msg:'hello world' }; },

渲染到頁面上：

效果：

在雙大括號內部，還可以綁定 JavaScript 表達式，如下 :

看效果：

三.屬性渲染 v-bind：

雙大括號語法不能作用在 HTML attribute 上，遇到這種情況應該使?v-bind指令，簡單點來說，就是比如有個div盒子，它有一個title屬性，但這個值是什么，不確定，想用變量表示，行，在該屬性前用v-bind指令綁定其再指定一個變量做為值:

核心語法：

{{ v-bind }}

如下：

定義title這個變量值為 你好呀：

data() { return { msg:'hello world', title: '你好呀' }; },

效果：

當然，v-bind這個單詞是可以省略的，直接這樣寫 :title=“title”

四.快速渲染 v-for：

比如，我有一個數組，如 arr = [1,2,3,4]，我還有一個div盒子，我想在這個div里放4個子div，每個子div里放一個數字，一 一對應數組里的數據，那怎么寫，下面這樣嗎？：

這樣可以，但是萬一有一千一萬個數也這樣？這樣是不行的，所以可以用v-for指令根據數組內容動態渲染，先在data定義數組變量：

data() { return { arr: [1,2,3,4] }; },

給要重復生成的子div盒子動態渲染：

item指數組里的每個元素，名字自定義。in表示在哪個數組里，固定寫法。in后面表示遍歷哪個數組，我們這是arr。:key=“item” 表示索引值，就讓當前item為索引值。

效果：

五.條件渲染 v-if，v-else，v-show：

v-if 指令用于條件性地渲染?個內容。這個內容只會在指令的表達式返回 true值的時候被渲染。 也可以與 v-else?起使用。如我有個div盒子，我想根據變量的值判斷顯不顯示它：

pan變量為假：

data() { return { pan: 0 }; },

看頁面什么都無：

改變量為真：

data() { return { pan: 1 }; },

看，出來了：

配合v-else一起用，注意，v-if 與 v-else 同時使用時，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后?，否則它將不會被識別：

data() { return { pan: 1 }; },

看效果：

v-show：

另?個?于根據條件展示元素的選項是 v-show 指令。用法大致?樣與 v-if ?樣:

data() { return { pan: 1 }; },

一樣的效果：

既然如此，為啥既生v-if還生我v-show，是因為，v-if原理為元素生成和銷毀達到效果，而v-show是通過控制樣式的顯示和隱藏達到效果。所以，某元素未來要頻繁渲染用v-show，不頻繁用v-if。

六.監聽DOM事件 v-on：

以前在寫原生 js 的時候，假如要給一個按鈕綁定鼠標或鍵盤等事件，那么要先獲取元素然后再綁定，而在vue里簡單了操作，直接在標簽里完成綁定，如給給一個按鈕綁定點擊事件：

直接在該DOM元素上寫 v-on，后面跟著綁定什么事件，如我是click鼠標點擊事件，雙引號里要寫執行的函數名字，如hand這個函數，且要在vue的 methods ：{ } 這個對象里寫執行的函數，如：

methods: { hand(){ console.log('點我了'); } },

效果：

v-on：這個可用@代替，如直接這樣寫 @click=“hand”

同時，也可以傳遞參數，如 @click=“hand(e)”

七.雙向數據綁定 v-model：

可以用 v-model 指令在表單 < input>、< textarea> 及 < select> 元素上創建雙向數據綁定。就是如輸入框的value值和vue實例里的一個變量能實時保持相同，不論誰改變同步更新。

如,為該標簽綁定msg這個變量，同時頁面渲染出來看看：

v-model=“變量名字”

定義這個變量：

data() { return { msg:"" }; },

看效果，輸入后同步更新：

八.變量識別標簽v-html：

如給div寫上v-html等于一個變量msg：

定義msg值里放一個h1標簽：

data() { return { msg:'北極光之夜' };

相當于直接給div生成了一個子標簽 < i>北極光之夜< /i>：

九.八大生命周期鉤子函數：

我們把一個vue實例對象從生成（new）到被銷毀（destory）的過程，稱為生命周期。而生命周期函數，就是在某個時刻會自動執行的函數。

生命周期詳細文章地址：https://auroras.blog.csdn.net/article/details/117658191

十.watch-：

Vue 通過 watch 選項提供了?個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。例子如下：

比如我有一個input輸入框，v-model雙向綁定一個一個變量monitor：

聲明該變量，空字符串就好：

data() { return { monitor:"" };

關鍵來了，假如我想monitor這個變量的值一改變，就能自動識別到它的改變并執行某些操作要咋辦，這就用到-了 watch：{…}了。他跟data（）{…}和methods：{…}這些是同一級別的。

如監聽monitor，它的值一改變就觸發在控制臺輸出“666666”這個操作：

data() { return { monitor:"" }; }, watch:{ monitor:function(){ console.log(6666); } }, ......略

在watch為monitor聲明一個函數，當monitor值一改變，將會自動執行函數里的內容。

看效果：

十一.watch深度監聽：

當改變?個對象的某個屬性，需要觸發監聽事件時，使用第十點的基本監聽可能無法觸發事件，此時可以使用深度監聽。

如有一個對象 people：{name：‘Aurora’，age：18}，有一個按鈕，當點擊該按鈕時，觸發事件改變 people.age 的值，-監聽到people改變時，輸出‘6666666’：

先寫一個按鈕和點擊事件：