後端學前端：Vue學習總結（二）
Tags: Vue
四、雙向綁定
指令：v-model
作用：用在,和上，實現雙向綁定
官網：
注意：
v-model 會忽略所有表單元素的 value、checked、selected。 attribute 的初始值而總是將 Vue 實例的數據作爲數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 單行文本演示-->
<input v-model="singlemessage">
<span>單行文本編輯的內容：{{singlemessage}}</span>
<!-- 多行文本演示-->
<textarea v-model="multimessage"></textarea>
<span>多行文本編輯的內容:{{multimessage}}</span>
<!-- 單個複選框，側重於選沒選-->
<input type="checkbox" v-model="checked">
<span>{{checked}}</span>
<!-- 多個複選框，側重選了誰-->
<input type="checkbox" value="A" v-model="checkwho">
<span>A</span>
<input type="checkbox" value="B" v-model="checkwho">
<span>B</span>
<input type="checkbox" value="C" v-model="checkwho">
<span>C</span>
<span>選了誰：{{checkwho}}</span>
<br>
<!-- 單選框演示-->
<input type="radio" value="A" v-model="radiocheck">
<span>A</span>
<input type="radio" value="B" v-model="radiocheck">
<span>B</span>
<span>選了誰{{radiocheck}}</span>
<br>
<!-- 下拉框演示-->
<select v-model="selectcheck">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>{{selectcheck}}</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
singlemessage:"Vue給的單行初始值",
multimessage:"Vue給的多行初始值",
checked:true,
checkwho:[],
radiocheck:'',
selectcheck:''
}
})
</script>
</body>
</html>
五、組件
組件是啥？
合法的自定義標籤
官網：
Prop大小寫問題：
HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋爲小寫字符。這意味着當使用 DOM 中的模板時，大小寫不敏感。如果使用字符串模板，大小寫敏感。
官網說明：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 先遍歷，把遍歷到的值綁定給組件模板裏的值-->
<!-- 注意：此處大小寫不敏感！！-->
<lol v-for="item in message" v-bind:tovue="item"></lol>
</div>
<script>
Vue.component('lol',{
props:['tovue'],//聲明通過”什麼“來獲取值
template:'<li>{{tovue}}</li>'//進行輸出
})
var vm = new Vue({
el:'#app',
data:{
message:['Java','Python','C++']
}
})
</script>
</body>
</html>
六、Axios
由於Vue只關注視圖層，所以我們需要一個工具來與外部通信，曾經官方有過“vue-resource”，但後來被棄用，並推薦了Axios。
前端猿就是通過這個來向我們後端猿寫的接口請求數據。
官網：
CDN導包：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<span>{{info.name}}</span>
<br>
<span>{{info.age}}</span>
</div>
<script>
var vm = new Vue({
el:'#app',
data(){
return {//與數據的格式必須相同
info:{
name:null,
age:null
}
}
},
mounted(){
axios.get('data.json').then(response=>(this.info = response.data))
}
})
</script>
</body>
</html>
data.json
{
"name": "lol",
"age": 1234
}
七、計算屬性
這是啥？
簡單來說，就是“緩存”。第一次訪問時，通過調用函數，將屬性計算出來並展示，然後會將屬性儲存到內存中，再次訪問時，會直接從內存中取出屬性進行展示，節省資源。但是要注意，“緩存”、“緩存”，如果該屬性發生了變動，那麼需要重新調用函數進行計算，並儲存到內存中。
官網：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 調用方法-->
<span>{{computenow2()}}</span>
<!-- 調用屬性-->
<span>{{computenow}}</span>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:"hello"
},
methods:{
computenow2:function () {
return Date.now();
}
},
computed:{
computenow:function () {
this.message;//如果改變這個值，會重新計算
return Date.now();
}
}
})
</script>
</body>
</html>