03构造器里的选项
03构造器里的选项
1，propsData option
<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>2，computed Option 计算选项
<body>
<h1>computed option</h1>
<hr>
<div id="app">
<p>{{newPrice}}</p>
<ul>
<li v-for="item in reversNews">{{item.title}}--{{item.data}}</li>
</ul>
</div>
<script type="text/javascript">
var newsList=[
{title:'7级分销项目网站使用介绍',data:'2017/3/24'},
{title:'手机获取短信验证码',data:'2017/3/25'},
{title:'三级分销数据库设计',data:'2017/3/26'},
{title:'数据库之设计表：用户表信息以及第三方登录信息如何同',data:'2017/3/27'}
]
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>3，Methods Option 方法选项
<body>
<h1>Methods Option 方法选项</h1>
<hr>
<div id="app">
{{a}}
<p><button @click="add(2,$event)">add</button></p>
<p><btn @click.native="add(2)"></btn></p>
</div>
<button onclick="app.add(3)">外部ADD</button>
<script type="text/javascript">
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++
}
console.log(event);
}
}
})
</script>
</body>4，Watch Option
<body>
<h1>Watch Option</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(){
this.wendu+=5;
},
jiangdi:function(){
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>5，Mixins Option混入选项操作
<body>
<h1>Mixins Option混入选项操作</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('我是全局的混入');
}
})
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
updated:function(){
console.log('我是原生的update');
},
mixins:[addConsole]
})
</script>
</body>6，extends Option 扩展选项
<body>
<h1>extends Option 扩展选项</h1>
<hr>
<div id="app">
{{num}}<br>
${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
},
methods:{
add:function(){
console.log('我是原生的方法');
this.num++;
}
},
updated:function(){
console.log('我是原生的update');
},
extends:extendsOBJ,
delimiters:['${','}']
})
</script>
</body>回复列表
回复操作