Vue.js 选项 窥探
propsData Option 全局扩展的数据传递
propsData在全局扩展中进行数据传递。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>propsDta option</title>
</head>
<body>
<div class="container">
<h4>propsDta option</h4>
<hr>
<header></header>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
var header_a = Vue.extend({
template: `<p class="lead">{{ message }} - {{ a }}</p>`,
data: function() {
return {
message: 'Hello , I am option!'
}
},
props: ['a']
});
//{propsData:{a:12}} 传值
new header_a({propsData:{a:12}}).$mount('header');
</script>
</html>
propsData工作流程：
- 在全局扩展中加入props进行接收。
- 用propsData:{}进行传递。
- 用插值（{}）的形式写入模板。
computed Option 计算选项
computed对元数据进行改造输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>computed option</title>
</head>
<body>
<div class="container">
<h4>computed option</h4>
<hr>
<div id="app">
<p>{{newPrice}}</p>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
price: 100
},
computed: {
newPrice: function() {
return this.price = '￥' + this.price + '元';
}
}
});
</script>
</html>
computed对数据进行改造输出，在这里只是一个小例子，但它的表现远比这个要强大，待继续深入认识。
Methods Option 方法选项
在这一实例中我们将结合 compoment组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>Methods option</title>
</head>
<body>
<div class="container">
<h4>Methods option</h4>
<hr>
<div id="app">
{{ a }}
<p><button @click="add(10,$event)">Add</button></p>
<!-- 定义的组件需要加上 native修饰器 -->
<p><btn @click.native="add(5)"></btn></p>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
var btn={
template:`<button>组件ADD</button>`
}
var app = new Vue({
el: '#app',
data: {
a: 1
},
components: {
'btn': btn
},
methods: {
add: function(num,event) {
if(!num == '') {
this.a += num;
}else{
this.a++;
}
}
}
});
</script>
</html>
@为v-on:的简写。
Watch 监听数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>Watch option</title>
</head>
<body>
<div class="container">
<h4>Watch option</h4>
<hr>
<div id="app">
<p>今天星期：{{ teday }}</p><p>吃：{{ eat }}</p>
<br />
<p><button @click="add">时间飞逝</button></p>
<p><button @click="down">时间倒退</button></p>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
var e_array = ["辣子鸡","羊肉泡馍","水煮肉片","宫保鸡丁","萨拉"]
var app = new Vue({
el: '#app',
data: {
teday: 1,
eat: '辣子鸡'
},
methods: {
add: function() {
if(this.teday >= 5){ return; }
this.teday ++;
},
down: function() {
if(this.teday <= 1){ return; }
this.teday --;
}
}
});
app.$watch('teday',function(newVal) {
if(newVal == 1) {
this.eat = e_array[0]
}else if(newVal == 2) {
this.eat = e_array[1]
}else if(newVal == 3) {
this.eat = e_array[2]
}else if(newVal == 4) {
this.eat = e_array[3]
}else{
this.eat = e_array[4]
}
});
</script>
</html>
$watch传入两个值：第一个监控对象；第二个处理函数。
watch写在构造器外部，降低程序的耦合度。
Mixins 混入选项
Mixins一般用途：
- 项目临时需要新增方法，用混入会减少源代码污染。
- 公共模块，使用混入可以减少代码量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>Mixins option</title>
</head>
<body>
<div class="container">
<h4>Mixins option</h4>
<hr />
<div id="app">
{{num}}
<p><button @click = "add">Add</button></p>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
//Mixins 写在外面不影响源代码
var addConsole = {
updated: function() {
console.log('混入的方法实现功能');
}
}
//全局混入
Vue.mixin({
updated: function() {
console.log('我是全局的混入，最先执行');
}
});
var app = new Vue({
el: '#app',
data: {
num: 1
},
methods: {
add: function() {
this.num ++;
}
}
mixins: [addConsole] //混入
});
</script>
</html>
Extends Option 扩展选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
<title>Extends option</title>
</head>
<body>
<div class="container">
<h4>Extends option</h4>
<hr />
<div id="app">
<p>{{ num }}</p>
<p><button @click = "add">Add</button></p>
<p><button @click = "down">down</button></p>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
//扩展和混入的方法和构造器里的方法同名的优先执行构造器中的方法
var extendsObj = {
methods: {
down: function() {
console.log('我是扩展出来的方法');
this.num --;
}
}
}
var app = new Vue({
el: '#app',
data: {
num: 1
},
methods: {
add: function() {
console.log('我是原生的方法');
this.num ++;
}
},
extends: extendsObj //扩展只能放对象不能放数组，扩展只能有一个
});
</script>
</html>
对Vue.js的掌握必先了解其使用方法、工作原理。而这些的认知必须是通过代码的书写和阅读的。生灵不息、学无止境。希望通过简单的代码去窥探Vue的世界。
浙公网安备 33010602011771号