vue点击按钮切换显示不同内容_邂逅Vue
01
什么是Vue.js
Vue (讀音 /vju?/，類似于view) 是一套用于構建用戶界面的漸進式框架。
看到這里，你就會問了，什么是漸進式？
漸進式就是你可以將Vue作為一個項目中的部分組件改用Vue實現，不需要引入其他復雜的功能，帶來豐富的交互體驗。
也可以在一個項目中，更多的的業務邏輯都使用Vue，這樣Vue整個核心庫以及其生態系統可以逐步的引用。
02
引入Vue的方法
本篇文章因為是主要是為了Vue的入門教程，重點主要是Vue的整個基礎語法上，所以不使用vue-cli，先采用手動引入js的方式，學會Vue的基礎使用，循環漸進，更加有利于我們的學習！
引入Vue.js有三種方式：
1、直接CDN引入
2、下載和引入
? ? ? ?開發環境：https://vuejs.org/js/vue.js
? ? ? ?生產環境:https://vuejs.org/js/vue.min.js
3、NPM安裝
? ? ? ?后續會有專門的文章介紹webpack和cli的使用。
03
第一個體驗
我們在將Vue引入之后就可以開始我們第一個Vue程序了，體驗一下Vue的響應式。
運行結果：
解釋一下：
app變量就是Vue創建的對象，創建對象的時候傳入了一些options：{}
el：該屬性決定了Vue的這個對象掛載在了哪個元素上。上述代碼中就是將這個對象掛載在了id為app的這個元素上，這個對象把
{{message}}中所包含的所有的DOM都進行了實例化。
data:該屬性存儲一些數據(數據可以來自于自己定義的，也可以是服務器加載的)。
將data中的文本數據，插入到HTML的操作，有一個統一的名字——Mustache語法(雙大括號)。
04
Vue的基礎語法
2.1插值語法
?插值操作就是將Mustache語法放入到Vue對象中。Mustache語法雙大括號里面是以變量的形式出現的，也可以是表達式的形式，也可以在一個標簽中出現兩個Mustache，不在大括號中的內容則以原值顯示。
結果：
上面有說過，Vue是響應式的，響應式就是隨著data中變量的改變，頁面顯示的值也會相應的隨之改變。如：我們可以在打開開發者模式，進入Console中進行修改count的值
修改完之后，頁面的結果變為：
為了不希望它改變，我們可以加入一個Vue的指令v-once。
大家可以自己測試一下！
某些時候，我們的數據是一段HTML代碼，但是我們想要顯示的是顯示解析HTML代碼之后的內容，但是如果我們直接在Mustache語法直接顯示的話，他展示的為這段HTML代碼，我們可以使用v-html指令，這個指令后面會跟一個string類型，然后將string類型的HTML解析出來并且渲染。
結果：
將數據顯示在頁面中，除了Mustache語法外，還有一種是使用v-text指令。該指令一般情況下接收的是一個string類型的值。
結果：
接下來我們學習下一個指令v-pre，這個指令會跳過這個元素和子元素的編譯過程，顯示原本的大括號語法。
2.2綁定屬性
?前面我們學習的插值語法是將數據插入到模板的內容中，但是除了內容需要動態的決定以外，某些特有的屬性我們也希望它可以動態的來綁定，比如:a標簽中的href屬性。這個時候我們就可以使用v-bind指令。
v-bind用于綁定一個或多個屬性值，或者向另一個組件傳遞props值
結果：
點擊百度就可以跳轉到百度的頁面了，大家不妨試一試。
v-bind也可以使用語法糖的形式，也就是它的簡寫方式
2.3事件監聽
?在我們開發的過程中，我們通常要和用戶進行交互，我們就需要監聽用戶的操作，比如：點擊事件，獲取焦點事件，鍵盤事件等等。在Vue中，我們通常使用v-on指令來實現監聽事件的功能。
v-on的語法糖@，所以接下來，我們下面的示例代碼均使用語法糖形式。
注：其中的methods是Vue定義方法的位置，也是Vue對象的一個屬性。在調用其中的方法的時候，需要注意參數問題：
如果方法中不需要參數，則()可以省略不寫。
如果方法需要一個參數，調用方法的時候沒有寫括號，那么會默認的將原生事件event參數傳遞進去。
如果方法同時傳入了多個參數，那么原生事件event需要手動通過$event傳入。
結果：
2.4條件判斷
?條件判斷指令v-if、v-else-if、v-else。
結果：
實現一個小案例：
有兩個按鈕：點擊按鈕1，顯示一個input元素；點擊按鈕2，顯示另一個input元素。
完成之后，我們在input1中輸入值，點擊按鈕2
結果：
在點擊按鈕切換的時候，input已經發生了變化，但是里面的值并沒有隨著按鈕的切換而置空，原因是：
Vue在進行DOM渲染的時候，出于對性能的考慮，會盡可能的復用已經存在的元素，所以在使用v-if的時候，要加上key，并且保證key的值不同，這樣就不會出現復用的情況。
v-show和v-if的比較：
兩者都是可以決定一個元素的顯隱；
v-if條件為false 的時候，不會有對應的元素在DOM中;v-show的條件為false時，僅僅是將元素的display屬性置為none；
在開發中，如果顯隱的切換很頻繁，使用v-show；當只有一次，則使用v-if。
2.5循環
?Vue中使用v-for指令來實現將一組數據的渲染。
結果：
如果你看了官網中關于v-for的介紹，就會發現，在官網的介紹中，建議在使用v-for時，加上key屬性，這個是為什么呢？(有興趣可以去了解一下Diff算法),我這里簡單的描述一下。
當同一層有很多相同的節點，我們需要在中間添加一個新的節點的時候，比如有1,2,3,4,5五個順序的節點，現在要在第2個節點之后新加一個節點6，那么Diff算法會將3更新為6,4更新為3,5更新為4，再添加一個5節點，這樣我們渲染真實DOM開銷是非常大的，那么為了解決這個問題，我們給每個節點設置一個key來做唯一的表示，這樣子就可以正確的識別此節點，那么再添加6節點的時候，只需要找到插入的位置，直接插入新的6節點就好了。
2.6表單雙向綁定
?Vue中使用`v-model`指令來實現了表單元素和數據的雙向綁定。
結果：
我們可以很直觀的看到顯示的結果，當我們input中的數據發生變化時，會將輸入的內容傳遞給message變量，頁面中的message也會隨之發生改變，所以，通過v-model我們實現了雙向綁定。
有人可能會疑問，v-model的雙向綁定都是怎么實現的呢？其實v-model就是一種語法糖的表示形式，它包含了兩個操作:
將input的value屬性通過v-bind來綁定；
通過v-on給input標簽添加了input事件(input事件是當input標簽中的值發生變化時觸發的事件)
接下來，介紹幾個有關v-model的修飾符
通常情況下，我們已經知道了，給input標簽添加v-model指令之后，數據發生改變，那么data中對應的值也會發生相應的變化。
某些時候我們不想它們自動變化,可以使用lazy修飾符，該修飾符可以在標簽失去焦點或者是回車的時候才會更新數據。
通常情況下，我們的輸入框都會將輸入的內容當成字符串進行處理，但是如果我們希望處理的是數字類型，我們可以使用number修飾符可以讓輸入框輸入的內容自動轉為數字類型。
如果在我們輸入的內容中前后有許多的空格，通常我們希望可以將這些空格去除，那么可以使用trim修飾符來去除左右兩端的空格。
2.7計算屬性
?通過前面的學習，我們已經知道，通過插值的操作可以對data中的數據在頁面進行顯示，但是某些時候，我們需要顯示的內容可能是通過data中的數據進行一系列操作之后再進行顯示的，這個時候我們就可以使用計算屬性的方法，計算屬性是在computed中，它也是Vue對象中的一個屬性。
實現一個小案例：
計算小明需要購買課本的總價格
結果：
學會了吧，是不是很簡單。其實每個計算屬性都有一個getter和一個setter方法。
結果：
我們再來討論最后一個問題，這個功能我們不僅可以使用計算屬性的方法實現，同樣的我們也可以通過定義方法來實現，那么兩者的區別在哪里呢？我們為什么要使用計算屬性的方法，而不使用定義方法來實現呢？
首先，我們在剛才的代碼中，我們加上一個getTotalPrice方法，然后將計算屬性的值和方法的值在頁面顯示多次
結果：
我們可以看出，計算屬性會進行緩存，如果是多次使用計算屬性的值，只會調用一次；而方法在每次調用的時候都會進行調用。
通過這個小實驗，相信這兩個用哪一個你也會學會選擇了！
2.8監聽屬性
?在Vue中，我們可以使用watch來監聽屬性的變化。
結果：
結果：
如果監聽的對象是一個對象類型的話，那么使用普通的監聽是沒有效果的，所以有兩種方式監聽對象：
使用深度監聽(監聽后的結果值一樣)
使用計算屬性的方式獲取對象中需要監聽的屬性，進行普通監聽
總結
以上是生活随笔為你收集整理的vue点击按钮切换显示不同内容_邂逅Vue的全部內容，希望文章能夠幫你解決所遇到的問題。
