Vue入门学习笔记4 vue原生构造器的选项详解
前言：关于vue我已经更了3篇博文了，这篇是第4篇，关于Vue原生构造器选项，包括methdos、watch、mixins、extends、delimiters、computed、propsData，下面我们一一来以例子为例进行讲解。
Tip：下面的例子要注意看注解，注解才是精髓。
1、methdos Option 方法选项
应用场景：定义执行函数，例如我们写一个点击事件的add方法，此时我们就应该在method里定义。
例子描述：学习这个methods选项，我们要掌握
1、methods里的函数是如何传值的；
2、自定义组件如何调用methods里的函数；
3、构造器作用域外如何调用methods里的函数；
4、了解点击事件的event参数。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>methdos Option 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>methdos Option 实例</h1>
<hr>
<div id="app">
{{num}} <br>
<!--
1、methods传值
2、event 相当于原始javascript的mouse event 鼠标事件的一系列事件【了解即可】
-->
<p><button @click="add(2,$event)">add</button></p>
<!--
3、 自定义组件调用methods里的函数
.native修饰符的作用是调用原生构造器下的methods选项里的成员
-->
<p><btn @click.native="add(2)"></btn></p>
</div>
<!-- 4、 作用域外（构造器作用域外）调用构造器里的methods选项下的成员函数add -->
<button onclick="app.add(3)">外部add</button>
<script type="text/javascript">
var btn = {
template:`<button>组件add</button>`
}
var app = new Vue({
el:"#app",
data:{
num : 0
},
components:{
"btn":btn
},
methods:{
add:function(a,event){
if(a != " "){
this.num+=a
}else{
this.num++
}
console.log(event)
}
}
})
</script>
</body>
</html>
2、mixins option 混入选项操作
应用场景：
- 当项目已经上线了，构造器已经成熟了的时候，突然接到新的需求时
- 当出现很多公共的方法属性时，也就是说很多构造器或者其他作用域都要调用的一些方法属性时
例子说明：
1、掌握构造器混入与全局混入的写法
2、通晓全局混入与构造器里的混入选项和原生谁先执行
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mixins option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<!--
应用场景：
1 当项目已经上线了，构造器已经成熟了的时候，突然接到新的需求时
2 当出现很多公共的方法属性时，也就是说很多构造器或者其他作用域都要调用的一些方法属性时
-->
<!--
验证目的：
1 构造器混入与全局混入的写法
2 全局混入与构造器里的混入选项和原生谁先执行
-->
<h1>mixins 混入选项操作</h1>
<hr>
<div id="app">
{{num}}
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var addConsole = {
// updated vue生命周期之一，更新时触发
updated:function(){
console.log("数据发生变化了。num变成" + this.num)
}
}
// 2 全局的混入。
// 应用场景，多个构造器作用域共有的方法时使用
Vue.mixin({
updated:function(){
// 全局混入比原生构造器里的混入要提前
console.log("我是全局的混入")
}
})
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
updated:function(){
// 混入先执行，原生后执行
console.log("我是原生的updated")
},
// 1构造器里的混入
// [addConsole]是一个数组，当有多个混入时逗号隔开就行
mixins:[addConsole]
})
</script>
</body>
</html>
3、extends option 扩展选项
应用场景：
- 类似于mixins，参见mixins部分即可
extends注意事项：
- 一个构造器里只能有一个扩展
- 当扩展的方法与原生构造器里的methods下的方法一样时，只执行原生的
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>extends option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<!--
应用场景：
类似于mixins
-->
<!--
extends注意事项：
1 一个构造器里只能有一个扩展
2 当扩展的方法与原生构造器里的methods下的方法一样时，只执行原生的
-->
<h1>extends option 扩展选项</h1>
<hr>
<div id="app">
{{num}}
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var extendsObj = {
updated:function(){
console.log("我是开展的updated");
},
methods:{
add:function(){
// 该方法不执行，原因是该方法与原生的构造器中的methods选项里add方法同名
// 当扩展到的方法与原生的同名时，只会执行原生的构造器里的methods选项里的方法
console.log("我是被扩展出来的方法");
this.num++
}
}
}
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
console.log("我是原生的方法");
this.num++;
}
},
updated:function(){
console.log("我是原生的updated");
},
// 扩展，扩展只能放一个对象，即只能有一个扩展，不能像mixins那样用一个数组混入多个
extends:extendsObj
})
</script>
</body>
</html>
4、watch Option 监控选项
应用场景：监控某个值的变化的一个生命周期
例子说明：
- 构造器内部如何写watch Option
- 实例属性如何写watch Option
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch Option 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>watch Option 实例(监控)</h1>
<hr>
<div id="app">
<p>今日温度：{{wendu}} 度</p>
<p>穿衣建议：{{chuanyi}}</p>
<p><button @click="shenggao(5)">升高温度</button><button @click="jiangdi(5)">降低温度</button></p>
</div>
<script type="text/javascript">
var chuanyiArray = ['T恤短袖','夹克长裙','棉衣羽绒服'];
var app = new Vue({
el:"#app",
data:{
wendu : 16,
chuanyi : '夹克长裙'
},
methods:{
shenggao:function(num){
if(num != " "){
this.wendu+=num
}else{
this.wendu++
}
},
jiangdi:function(num){
if(num != " "){
this.wendu-=num
}else{
this.wendu--
}
}
},
// 1 写在构造器中
// watch:{ //监控元素值的改变
// //wendu ---要监控的值
// //newVal --新值，即改变的值
// //oldVal --旧值，即原本的值
// wendu:function(newVal,oldVal){
// if(newVal >= 26){
// this.chuanyi = chuanyiArray[0];
// }else if(newVal < 26 && newVal > 0){
// this.chuanyi = chuanyiArray[1];
// }else{
// this.chuanyi = chuanyiArray[2];
// }
// }
// }
})
// 2 实例属性写watch
app.$watch('wendu',function(newVal,oldVal){
if(newVal >= 26){
this.chuanyi = chuanyiArray[0];
}else if(newVal < 26 && newVal >0){
this.chuanyi = chuanyiArray[1];
}else{
this.chuanyi = chuanyiArray[2];
}
})
</script>
</body>
</html>
5、delimiters Option 自定义插值符
应用场景：
- 当现有的插值符与项目本身冲突时使用，即需要自定义插值符的时候使用
例子说明：
原生态的vue是用两对大括号进行插值的，本来自修改为一对大括号
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>delimiters Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<!--
应用场景：当现有的插值符与项目本身冲突时使用
-->
<h1>delimiters Option 自定义插值符</h1>
<hr>
<div id="app">
<!-- 原生的插值符是两对大括号 -->
<!-- <p> {{mes}}</p> -->
<!-- 自定义成一对大括号为插值符 -->
<p>{mes}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
mes :'hell world!'
},
delimiters:['{','}']
})
</script>
</body>
</html>
6、computed Option 计算选项
应用场景：
- 不污染原始数据的前提下改变数据的格式或者排序的顺序等
例子说明：
后台向前端传递的数据价钱是100，而我们希望修改格式为￥100元，但是又不希望污染原始数据，因为在其他地方的时候我们可能就只需要100这个格式的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>computed Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<!--
应用场景：
不污染原始数据的前提下改变数据的格式或者排序的顺序等
-->
<!-- 下面以不污染原始数据的前提下修改数据的格式 -->
<h1>computed Option 计算选项操作实例</h1>
<hr>
<div id="app">
<p>{{newPrice}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
price : 100
},
computed:{
// 不污染原数据，相当于新建了一个对象。
newPrice:function(){
// 1 格式化数据
return this.price = '￥' + this.price + '元'
},
}
})
</script>
</body>
</html>
7、propsData Option 全局扩展的数据传递
应用场景：
- propsData 通常只用在扩展模板里传值。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>propsData Option 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>propsData Option 全局扩展的数据传递</h1>
<!--
propsData是用于传值的，主要用于扩展里面 。
即，全局扩展的数据传递
-->
<!-- 用到的不多 -->
<hr>
<!-- 这里的header是自定义标签 -->
<header></header>
<script type="text/javascript">
var header_a = Vue.extend({
template:`<p>{{mes}} - {{a}}</p>`,
data:function(){
return{
mes: 'hello , I am header!'
}
},
// 2 挂载a
props:['a']
});
// 1 propsData传值，传递一个变量a的值1
new header_a({propsData:{a:1}}).$mount('header')
</script>
</body>
</html>
如果你看懂那你可以去看我前面写的博客，再来看这篇。链接如下：
vue入门学习笔记1 下载安装搭建服务教程 vue入门语法 hello world
Vue入门学习笔记2 Vue内部指令整理
Vue入门学习笔记3 vue全局API整理