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>