2018.9.6 關於對前端框架Vue.js的理解
晚上19.35又是一個安靜的夜晚，趁著安靜，趕緊過來csdn總結一下今天學到vue的知識。
首先了解一個新的東西，必須瞭解它是什麼，能幹什麼。這是我比較深刻的體會。
什麼是Vue.js：
*** vue.js:是目前最火的框架（關注的人是最多的），而react是目前最流行的框架（使用的人數是最多的），React除了可以開發網站，還可以開發手機APP，Vue也是可以開發手機APP 的，但是需要藉助Weex。
***Vue.js 是前端的**主流框架之一**，和Angular.js、React.js 一起，併成為前端三大主流框架！
***Vue.js 是一套構建使用者介面的框架，**只關注檢視層**，它不僅易於上手，還便於與第三方庫或既有專案整合。（Vue有配套的第三方類庫，可以整合起來做大型專案的開發。
***前端的主要工作？主要負責MVC中的V這一層；主要工作就是和介面打交道，來製作前端頁面效果；
為什麼要學習前端框架Vue.js:
***在企業中為了提高開發效率，從而來使用框架進行提神開發的效率。
***能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向資料繫結的概念通過框架提供的指令，我們前端程式設計師只需要關心資料的業務邏輯，不再關心DOM是如何渲染的了。
***在Vue中，一個核心的概念，就是讓使用者不再操作DOM元素，解放了使用者的雙手，讓程式設計師可以更多的時間去關注業務邏輯；
框架和庫的區別
***框架：是一套完整的解決方案；對專案的入侵較大，專案如果需要更換框架，則需要重新架構整個專案。
***庫：其實就是外掛，提供一些小的功能，對專案入侵比較小，如果有的庫完成不了某些需求，可以很容易的切換到其他的實現需求。
Node（後端）中的MVC與前端中MVVM之間有什麼區別：
***MVC 是後端的分層開發概念。
***MVVM是前端檢視層的概念，主要關注在於檢視層進行分離，也就是說：MVVM把前端的檢視層分為了三部分 Model,View, ViewModel.
如何使用Vue.js呢：如下
關於標籤 v-cloak還有v-text理解：
v-cloak:能夠解決所有差值表示式因為網速慢導致表示式閃爍的問題，也可以在msg的前後新增任何的資料，不會進行覆蓋。
v-text:本身就預設沒有閃爍問題的，但是因為v-text在標籤裡面，當解析到這裡的時候，會先執行標籤裡的內容，導致123倍覆蓋
v-html:能夠把轉義的標籤（就是字串）變成html的標籤
舉個小栗子：
var vm=new Vue({
el:'#app',
data:{
msg:'<h1>哈哈哈，記得每天保持好心情哦！</h1>'
}
})
//接下來使用v-html來進行得到h1標籤，而不是字串：
<div id="app">
<div v-html="msg"></div>
</div>
這樣就會在客戶端顯示出h1標題的打字了
要是沒有使用v-html的話輸出是這樣子的：<h1>哈哈哈，記得每天保持好心情哦！</h1> 的字串
v-bind:可以用來繫結屬性指令的變數；
舉個小栗子：
var vm=new Vue({
el:'#app',
data:{
mytitle:'這是我自定義的標籤’
}
})
<div id="#app">
<input type="button" value="按鈕" v-bind:title="mytitle+'強哥'/>
</div>
結果在在頁面上有一個按鈕，滑鼠放上去會顯示一句話：這是我自定義標籤強哥。
此外v-bind還可以進行簡寫：<input type="button" value="按鈕" :title="mytitle+'強哥'/>
<!--v-bind:指令可以被簡寫為 ：要繫結的屬性-->
<!--v-bind 中可以寫合法的js表示式-->
先小小的總結一下：
***1.如何定義一個基本的Vue程式碼結構
***首先先匯入架包<script src="./vue-2.4.0.js"></script>
***然後在建立Vue 的最基本的結構：
***var vm=new Vue({
el:'#app' , //表示要控制的區域
data:{ //data存放的是我們el中要使用的資料
msg:'welcome'
},
methods:{ //它用來定義Vue屬性可用的方法
show：function（）{
alert("hello!")
}
}
})
***2.差值表示式{{}} 和v-text
***3.v-cloak
***4.v-html
***5.v-bind Vue提供事件繫結機制 縮寫是 ：
***6.v-on Vue提供方法繫結機制 縮寫是 @：
2018.9.7 晚上八點整 接上
Vue的事件修飾符：
*** .stop:阻止冒泡（就是指一層一層的進行顯示）
<input type="button" value="點我" @click.stop="onclick"> //這個按鈕點選後就不會再往外執行啦 這就是阻止冒泡
*** .prevent:阻止預設事件
<a href="www.baidu.com" @click.stop="onclick">百度一下，你就知道！</a> //這個阻止預設事件就是 不會再去訪問百度
*** .capture :新增事件監聽器的時候使用事件捕獲模式
<div class="inner" @click.capture></div> //這個是新增監聽器時預設使用監聽器的捕獲模式
*** .self :只當事件在該元素（比如不是子元素）觸發時進行回撥
<div class="inner" @click.self="divHeader"></div>
*** .once:事件只觸發一次
vue的雙向繫結 v-model
***首先需要說明的是v-bind無法進行雙向的繫結，只能從M到V
***v-model:就可以實現雙向資料的繫結，但是v-model只能用於表單資料中input(radio,text,address,email......) select checkbox textarea等元素。
示例程式碼：<input type="text" v-model="msg" style="width:100%">
現在使用v-model來寫一個簡易的計算器：
***介面如圖所示（裡面有水印，不要在意那些細節）
程式碼實現：
<html>
<head>
<script src="./vue-.2.4.0.js"><scritp>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" name="=" :click="jisuan">
<input type="text" v-model="result">
</div>
var vm=new Vue({
el:'#app',
data:{
n1:'0',
opt:'+',
n2:'0',
result:'0'
},
methods:{
jisuan(){
switch(this.opt)
case:+
this.result=parseInt(this.n1)+parseInt(this.n2)
break;
}
}
})
</body>
</html>
在vue中使用格式
### 使用class樣式
1. 陣列
<h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>
2. 陣列中使用三元表示式
<h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>
3. 陣列中巢狀物件
<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>
4. 直接使用物件
<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>
### 使用內聯樣式
1. 直接在元素上通過 `:style` 的形式，書寫樣式物件
<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>
2. 將樣式物件，定義到 `data` 中，並直接引用到 `:style` 中 + 在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
+ 在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：
<h1 :style="h1StyleObj">這是一個善良的H1</h1>
3. 在 `:style` 中通過陣列，引用多個 `data` 上的樣式物件
+ 在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
+ 在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：
<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>
## Vue指令之`v-for`和`key`屬性
***1.進行迭代物件中的屬性
***<div v-for="(value,key,i)" in userInfo>鍵是：{{key}}---值是：{{value}} ---索引下標是：{{i}} //進行遍歷物件屬性身上的屬性
***2.進行迭代陣列
***<p v-for="(item,i)in list">index:{{i}}--------value:{{item}}</p>
***3.用來迭代數字
***<p v-for="i in 10">這是第{{i}}個標籤</p>
***2.2.0+ 的版本里，**當在元件中使用** v-for 時，key 現在是必須的。通過key來唯一標識。
## Vue指令之`v-if`和`v-show`
> 一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。