Vue選項
1. 數據選項
Vue在聲明組件時，如果使用了對象類型的data選項，模板將找不到data中被聲明的數據。如果使用了支持Vue模板的語法檢器，將得到錯誤的提示“data property in component must be a function”。
2. 屬性選項
Vue爲組件開發提供了屬性（props）選項，我們可以使用它爲組件註冊動態屬性，來處理業務之間的差異性，
使代碼可以複用相似的應用場景。
props選項可以是數組或者對象類型，用於接收從父組件傳遞過來的參數，並允許爲其賦默認值、類型檢查和跪着校驗等。
示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選項</title>
</head>
<body>
<div id="app">
<color-text text="Hello World"></color-text>
<br>
<color-text></color-text>
<br>
<color-text color="#f78" text="Hello World"></color-text>
<br>
<color-text color="#43gh" text="Hello World"></color-text>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component('color-text',{
props:{
text:String,
color:{
type:String,
default:'#000', //默認顏色
required:true,
validator (value) { //校驗規則，判斷顏色是否合法
return /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(value);
}
}
},
template:'<span :style="{color:color}">{{text}}</span>'
});
let app = new Vue({
el:"#app"
});
</script>
</body>
</html>
3. 方法選項
代碼示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法選項</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
let test1 ={
msg:'Hello World',
fun1:function () {
console.log('-------普通函數-----',this);
console.log(this.msg);
}
}
test1.fun1();
let test2 ={
msg:'Hello World',
fun2: ()=> {
console.log('-------箭頭函數-----',this);
console.log(this.msg);
}
}
test2.fun2();
let app = new Vue({
el:"#app",
});
</script>
</body>
</html>
使用箭頭函數定義方法時並不會創建函數作用域，因此this也不會指向其父級實例，此時的this會向上追蹤。當找到某個函數作用域時
this將指向該函數的父級實例，否則this將指向瀏覽器的內置對象Windows。
4. 計算屬性
計算屬性（computed選項）目的在於減輕模板上的業務負擔，當數據鏈上出現衍生數據時，我們可以利用它去維護使用。
示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性</title>
</head>
<body>
<div id="app" style="font-family: Roboto,sans-serif;color: #45c0ff;margin-left: 100px">
<h2>英語中的“互文”</h2>
<p>案例:</p>
<p>{{message}}. 我看到的是車還是貓。</p>
<p>{{noSpaceMsg}}</p>
<p>{{palindromeMsg}}</p>
<p>英語中也有“互文”的修辭手法，比如{{message}}這句話，</p>
<p>將句中空格去掉可得 {{noSpaceMsg}},</p>
<p>將句中空格去掉並將其倒序可得 {{palindromeMsg}}。</p>
<p>可看到，{{noSpaceMsg}} == {{palindromeMsg}}</p>。
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data(){
return{
message:'WAS IT A CAT OR A CAT I SAW'
}
},
computed:{
noSpaceMsg(){
return this.message.replace(/\s/g,'')
},
palindromeMsg(){
return this.message.replace(/\s/g,'').split('').reverse().join('');
}
}
});
</script>
</body>
</html>
使用了computed之後，組件的代碼結構明顯清晰了許多，而且即使日後數據的數據處理方式發生了變化，也只需要在選項中修改即可，
與methods一樣，computed不能以箭頭函數聲明，同時它也會被混入Vue實例，並可通過this調用。
由於計算屬性依賴於響應式屬性，所以當且僅當響應式屬性變化時，計算屬性纔會被重新計算，因此相比於使用methods函數求值，這種求值的效率更高。
5. 偵聽屬性
Vue可以使用偵聽屬性（watch屬性）爲實例添加被觀察對象，並在對象被修改時調用開發者自定義的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偵聽屬性</title>
</head>
<body>
<div id="app">
<h2>數據變化之前
<i style="color: gray;font-size: 14px;">
* 指令v-once可以限制視圖不在響應數據變化
</i>
</h2>
<p v-once>{{message}}</p>
<p v-once>{{noSpaceMsg}}</p>
<h2>數據變化之後</h2>
<p>{{message}}</p>
<p>{{noSpaceMsg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let app = new Vue({
el:"#app",
data(){
return{
message:'人有悲歡離合， 月有陰晴圓缺。',
noSpaceMsg:'',
remoteMsg:'',
msg:{
sender:'aaa',
receiver:'bbb'
}
}
},
methods:{
loginLine(){
console.log('----------------------');
},
loginMsg(newValue,oldValue){
console.log(newValue);
}
},
/*
watch:{
message (newValue,oldValue){
this.noSpaceMsg = this.message.replace(/\s/g,'');
}
}*/
//異步修改數據
/*
watch:{
message (newValue,oldValue){
axios({ //發送ajax異步請求
method:'GET',
url:'/demo',
params:{
message:newValue
}
}).then(res =>{
this.remoteMsg = res.data.message //接收響應後異步修改數據值
})
}
}*/
//聲明式watch
watch:{
msg:{
handler:'logMsg', //方法名
deep:true, //深度觀察：對任何數據發生變化，watch方法都會被觸發
immediate:true //立即調用：在偵聽開始時立即調用一次watch方法
},
'msg.sender':['logMsg','logLine'] //數組方式，可調用多個方法
}
});
</script>
</body>
</html>