Vue 基礎 筆記1
部落格園不相容typora有點蛋疼哦
什麼是Vue
Vue是一種資料驅動的漸進式前端開發框架，主要用於解決複雜的DOM操作。
特點
漸進式， 元件化， 響應式
模式MVVM（Model View ViewModel）簡略...
Model: 負責資料儲存，用資料表示模型
View: 負責頁面展示
ViewModel: 負責業務邏輯(比如ajax請求)，對資料進行加工後還給View展示
資料雙向繫結 簡略...
資料可以驅動檢視的變化，檢視也可以驅動資料的變化。後期再深究原理。
虛擬DOM
JS內被構建的類似DOM的物件。它可以用來去拼裝資料，拼裝完整後，把資料整體解析（一次性完成DOM操作），一次性插入html中，而不像傳統操作時機DOM一樣不停操作HTML，影響效能。
條件渲染
v-if/v-else-if/v-else
<!DOCTYPEhtml> <htmllang="cn"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <body> <!--View宣告式渲染--> <divid="app"> <h1>使用者名稱:{{username}}</h1> <!--通過v-if/v-else繫結變數isvip設定條件渲染--> <h3v-if="isVip">使用者型別：VIP</h3> <!--v-if和v-else之間不能有其他元素否則失效--> <h3v-else-if="isAdmin">使用者型別:管理員</h3> <h3v-else>使用者型別:經濟型使用者</h3> <hr> <h1>年齡段</h1> <h3v-if='age>18'>成熟了</h3> <h3v-else-if='age>14'>長大了</h3> <h3v-else>成熟了</h3> </div> <scriptsrc="../vue.js"></script> <script> letapp=newVue({ el:"#app", data:{ username:"老王", isVip:false, isAdmin:true, age:10 } }); console.log(app); </script> </body></html>
v-show
</html>
列表渲染
注意：元素繫結key可以讓元素不被Vue混用。繫結key的時候，如果key的值是變數，應當加冒號 :key='variable'，常量可以直接 key=‘10’
單次插入後不再更新 v-once
v-html=帶有HTML語法的變數 可以自動解析其內部語法
v-cloak: 可以防止
動態屬性
:value
計算屬性
:style
模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在這個地方，模板不再是簡單的宣告式邏輯。你必須看一段時間才能意識到，這裡是想要顯示變數 message 的翻轉字串。當你想要在模板中的多處包含此翻轉字串時，就會更加難以處理。
所以，對於任何複雜邏輯，你都應當使用計算屬性。
你可能已經注意到我們可以通過在表示式中呼叫方法來達到同樣的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在元件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我們可以將同一函式定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函式。
這也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：
computed: {
now: function () {
return Date.now()
}
}
相比之下，每當觸發重新渲染時，呼叫方法將總會再次執行函式。
我們為什麼需要快取？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴於 A。如果沒有快取，我們將不可避免的多次執行 A 的 getter！如果你不希望有快取，請用方法來替代。
監聽器：計算太多效能低，少用
如果我們希望資料能夠實時更新，可以使用監聽器 v-watch來監聽資料。一旦某個資料（一般是watch物件裡面的對應屬性）發生改變，它內部的函式就會被呼叫 ，屬於1對N的操作：1個變數變化，N個相關函式呼叫。
<body>
<div id="app">
{{msg}}<br>
<div :style='css'>
</div>
<button @click="changeColor">更改</button>
</div>
<script src="../vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
color:"red",
css: {
width: "100px",
height: "100px",
backgroundColor: "red"
}
},
methods:{
changeColor: function(){
if(this.css.backgroundColor == "yellow"){
this.color = "red";
}else{
this.color = "yellow";
}
this.css.backgroundColor = this.color;
}
},
// 內部引用的變數發生變化它就會自動執行
computed:{
msg: function(){
slogan=(this.color=="red")?"紅色鐵拳!":"蒼天已死，黃天當立！"
return slogan;
}
},
// 指定的資料（如msg）改變可以觸發的函式，放在監聽器中
watch:{
msg: msg=>{
alert("大人，時代變了！");
},
}
});
</script>
</body>
動態class渲染
<body>
<div id='app'>
<div :class="isActive?'red':'green'"></div>
<div :class="{dark:isActive}"></div>
<div :class="classObj"></div>
<div :class="classArr"></div>
<button @click='handler'>切換</button>
</div>
</body>
<script src='../vue.js'></script>
<script>
let app =new Vue({
el: "#app",
data: {
isActive: true,
// 物件給元素新增多個物件型別...
classObj:{
student: true,
green: true
},
classArr:["dark", {border: true}],
},
methods:{
handler: function(){
this.isActive = !this.isActive;
}
}
});
</script>
內聯樣式渲染
<body>
<div id="app">
<!-- 直接渲染樣式 -->
<div style="width: 100px;height: 100px;background: darkgreen;" :style="{border: borderWidth +'px solid yellow', padding:paddingWidth+' px'}"></div>
<!-- 用物件渲染樣式-->
<div :style="styleObj"></div>
<!-- 用陣列渲染樣式 -->
<div :style="styleArr"></div>
</div>
</body>
<script src="../vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data:{
borderWidth: 15,
paddingWidth: 10,
styleObj: {
width: "180px",
height: "180px",
backgroundColor: "skyblue"
},
styleArr: [
{
width: "200px",
height: "200px",
backgroundColor: "darkred"
},
{
border: "5px black solid"
}
]
},
});
</script>
表單渲染
<body>
<div id="app">
<h1>稱呼</h1>
<input type="text" name="user" v-model='username' id=""><br>
{{username}}
<h2>描述:滑鼠離開才會發生修改一節省效能</h2>
<textarea name="描述" id="" cols="30" rows="10" v-model.lazy="description"></textarea>
<p>{{description}}</p>
<h2>領域</h2>
<span v-for="area in domains">
{{area}}
<input v-model="checkedDomain" :value="area" type="checkbox" name="domins" id="">
</span>
<p>{{checkedDomain}}</p>
<h2>性別</h2>
<span v-for="item in gander">
{{item}}
<input type="radio" :value="item" v-model="sex" name="" id="">
</span>
<p>{{sex}}</p>
<h2>城市</h2>
<select name="cities" id="" v-model="city">
<option v-for="region in cities" :value="region">{{region}}</option>
</select>
<p>{{city}}</p>
<h2>愛好</h2>
<select name="" id="" multiple="multiple" v-model="hobby">
<option v-for="like in hobbies" :value="like">{{like}}</option>
</select>
<p>{{hobby}}</p>
</div>
</body>
<script src="../vue.js"></script>
<