vue 学习（三）—vue
data: '2017/07/25'
}, {
title: '把中朝友谊发展得更好 新华社评论',
data: '2017/07/26'
}, {
title: '4000 亿减税改革定了，这些人受益前所未有',
data: '2017/07/27'
}, {
title: '4 月 1 日起打击非法社会组织骗钱敛财等行为',
data: '2017/07/28'
}]
var app = new Vue({
el: '.app',
data: {
price: 100,
newsList: newsList
},
computed: {
newPrice: function() {
return this.price = '￥' + this.price + '元';
},
reversNews: function() {
return this.newsList.reverse();
}
}
})
</script>
</body>
</html>
Methods Option 方法选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Methods Option 方法选项</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Methods Option 方法选项</h1>
<hr />
<div class="app">
{{a}}
<!--
方法的传参方式：
$event 里面有点击位置等内容
-->
<p> <button @click="add(5,$event)">add</button> </p>
<!--
这是组件调用方法的方式
-->
<p>
<btn @click.native="add(5,$event)"></btn>
</p>
</div>
<!--
这是 vue 作用域外部调用 vue 的方法
-->
<button onclick="app.add(3)">外部 ADD</button>
<script type="text/javascript">
var btn = {
template: '<button>组件 btn</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++;
}
console.log(event);
}
}
})
</script>
</body>
</html>
Watch 选项 监控数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Watch 选项 监控数据</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Watch 选项 监控数据</h1>
<hr />
<div class="app">
<p>今日温度：{{wendu}}度</p>
<p>穿衣建议 1：{{chuanyi}}</p>
<p><button @click="shenggao">升高温度</button></p>
<p><button @click="jiangdi">降低温度</button></p>
</div>
<script type="text/javascript">
var chayiChange = ['T 恤短信', '夹克衫，长裙', '羽绒服'];
var app = new Vue({
el: '.app',
data: {
wendu: 14,
chuanyi: '夹克衫，长裙'
},
methods: {
shenggao: function() {
this.wendu += 5;
},
jiangdi: function() {
this.wendu -= 5;
}
},
/
**
方式一：
监控某一数据，控制其他数据变化
*/
// watch: {
// wendu: function(newVal, oldVal) {
// if(newVal >= 26) {
// this.chuanyi = chayiChange[0];
// } else if(newVal < 26 && newVal > 0) {
// this.chuanyi = chayiChange[1];
// } else {
// this.chuanyi = chayiChange[2];
// }
// }
// }
});
/**
方式二：
监控某一数据，控制其他数据变化
*/
app.$watch('wendu', function(newVal, oldVal) {
if(newVal >= 26) {
this.chuanyi = chayiChange[0];
} else if(newVal < 26 && newVal > 0) {
this.chuanyi = chayiChange[1];
} else {
this.chuanyi = chayiChange[2];
}
})
</script>
</body>
</html>
Mixins 混入选项操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mixins 混入选项操作</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Mixins 混入选项操作</h1>
<hr />
<div class="app">
{{num}}
<p> <button @click="add">add</button></p>
</div>
<script type="text/javascript">
/**
混入的先执行，原生的后执行
全局的->混入的->原生的
*/
var addConsole = {
updated: function() {
console.log('混入的生命周期 被更新后' + this.num);
},
/**
如果方法与原生重复，扩展的不执行
*/
methods:{
add: function() {
console.log('混入出来的方法');
this.num++;
}
}
};
Vue.mixin({
updated: function() {
console.log('全局的 生命周期被更新后' + this.num);
},
});
var app = new Vue({
el: '.app',
data: {
num: 1
},
methods: {
add: function() {
this.num++;
}
},
updated: function() {
console.log('原生生命周期， 被更新后' + this.num);
},
mixins: [addConsole]
})
</script>
</body>
</html>
Extends Option 扩展选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Extends Option 扩展选项</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Extends Option 扩展选项</h1>
<hr />
<div class="app">
{{num}}
<p> <button @click="add">add</button></p>
</div>
<script type="text/javascript">
var extendsObj={
updated: function() {
console.log('扩展的生命周期， updated');
},
/**
扩展与混入一样，如果方法与原生重复，扩展的不执行
*/
methods:{
add: function() {
console.log('扩展出来的方法');
this.num++;
}
}
}
var app = new Vue({
el: '.app',
data: {
num: 1
评论