propsData Option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>propsData Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>propsData Option</h1>
<hr>
<header></header>
<script type="text/javascript">
var header_a=Vue.extend({
template:`<p>{{message}}-{{a}}</p>`,
data:function () {
return{
message:'Hello,I am header!'
}
},
props:['a']
});
new header_a({propsData:{a:12}}).$mount('header');
</script>
</body>
</html>
computed Option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<ul>
<li v-for="reversNew in reversNews">{{reversNew.title}}-{{reversNew.date}}</li>
</ul>
</div>
<script type="text/javascript">
var newList = [
{title:'aaaaaaa',date:'2020/6/4'},
{title:'ffffff',date:'2020/6/7'},
{title:'ccccccc',date:'2020/6/7'},
{title:'hhhhhhh',date:'2020/6/8'}
];
var app = new Vue({
el:'#app',
data:{
price:100,
newsList:newList
},
computed:{
newPrice:function () {
return this.price="￥"+this.price+'元';
},
reversNews:function () {
return this.newsList.reverse();
}
}
})
</script>
</body>
</html>
methods Option
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>methods Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
<p>{{count}}</p>
<p>
<button @click="add(2,$event)">ADD</button>
</p>
<p>
<!-- 自定义组件调用构造器中的add方法 -->
<btn @click.native="add(2,$event)"></btn>
</p>
</div>
<!-- 外部button调用构造器中的add方法 -->
<button οnclick="app.add(3)">外部ADD</button>
<script type="text/javascript">
var btn={
template:`<button>组件ADD</button>`
}
var app = new Vue({
el:'#app',
data:{
count:0
},
components:{
'btn':btn
},
methods:{
add:function (num,event) {
if(num!=''){
// 点击事件
console.log(event);
return this.count+=num;
}else {
return this.count++;
}
}
}
})
</script>
</body>
</html>
watch 选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>watch 选项</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>watch 选项</h1>
<hr>
<div id="app">
<p>今日温度：{{wendu}}°</p>
<p>穿衣建议：{{chuanyi}}</p>
<p>
<button @click="shenggao">升高温度</button>
<button @click="jiangdi">降低温度</button>
</p>
</div>
<script type="text/javascript">
var chuanyiArray=["T恤短裙","夹克长裙","羽绒服"];
var app = new Vue({
el:'#app',
data:{
wendu:14,
chuanyi:'夹克长裙'
},
methods:{
shenggao:function () {
return this.wendu+=5;
},
jiangdi:function () {
return this.wendu-=5;
}
},
// 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];
// }
// }
// }
})
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>
Mixin 混入选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mixin 混入选项</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Mixin 混入选项</h1>
<hr>
<div id="app">
{{num}}
<p><button @click="add">ADD</button></p>
</div>
<script type="text/javascript">
var addConsole={
updated:function () {
console.log("数据发生变化，变成了"+this.num);
}
};
Vue.mixin({
updated:function () {
console.log("我是全局的mixin");
}
});
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function () {
this.num++;
}
},
updated:function () {
// 混入的先执行，原生的后执行
console.log("我是原生的update");
},
mixins:[addConsole]
})
</script>
</body>
</html>
extends Option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>extends Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<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 () {
console.log("我是扩展的methods");
this.num++;
}
}
};
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function () {
console.log("我是原生的方法");
this.num++;
}
},
updated:function () {
// 混入的先执行，原生的后执行
console.log("我是原生的update");
},
extends:extendsObj,
delimiters:['${','}']
})
</script>
</body>
</html>
