mixins 混入选项操作
<body>
<div>mixins混入选项</div>
<p>mixixs选项，在一个功能完备的Vue构造器上加入额外的操作</p>
<ul>
<li>构造器mixins选项混入</li>
<li>全局混入</li>
<li>全局中的生命周期，mixins选项声明的生命周期，原生的生命周期</li>
<li>加载先后对比：全局中的生命周期>mixins选项声明的生命周期>原生的生命周期</li>
</ul>
<hr/>
<div id='sample'>
<div v-text='num'></div>
<div><button @click='addNumber'>Add Number</button></div>
</div>
<script>
Vue.mixin({
updated:function(){
console.log('全局中混入的生命周期')
}
})
let makeConsole={
updated:function(){
console.log('数据更新完成,数据更新到 '+this.num)
}
}
let sample=new Vue({
el:'#sample',
data:{
num:0
},
methods:{
addNumber:function(){
this.num++
}
},
updated:function(){
console.log('原生的生命周期')
},
mixins:[makeConsole]
})
</script>
</body>
extends option 扩展选项
<body>
<div>extends扩展选项</div>
<p>该选项和mixins选项类似，只不过该选项后面跟的是一个对象而非数组</p>
<hr />
<div id='sample'>
<div v-text='num'></div>
<div><button @click='addNumber'>Add Number</button></div>
</div>
<script>
let extenConsole = {
updated: function () {
console.log('来自扩展的生命周期 ' + this.num)
}
}
let sample = new Vue({
el: '#sample',
data: {
num: 0
},
methods: {
addNumber: function () {
this.num++
}
},
updated: function () {
console.log('原生的生命周期')
},
extends:extenConsole
})
</script>
</body>
利用propsData在构造器扩展中插入新值
<body>
<div>利用propData在构造器扩展中插入新值</div>
<hr/>
<div id='sample'>
<makepro id='pro'></makepro>
</div>
<script>
let outInfo=Vue.extend({
template:`<p>这是第{{si}}篇文章，它讲述的就是构造器扩展相关的{{option}}</p>`,
data:function(){
return {
option:'事情'
}
},
props:['si']
})
new outInfo({propsData:{si:10}}).$mount('#pro')
</script>
</body>
computed 选项
<body>
<div>Computed</div>
<hr />
<div id='sample'>
<div>{{newPrice}}</div>
<ul>
<li v-for='item in revenews'>{{item.title}}-{{item.date}}</li>
</ul>
</div>
<script>
let newsList=[
{title:'国际',date:'2021/1/17'},
{ title: '军事', date: '2021/1/16'},
{ title: '政治', date: '2021/1/14'}
]
let sample=new Vue({
el:'#sample',
data:{
price:15,
newse:newsList
},
computed:{
newPrice:function(){
return this.price='￥'+this.price+'元'
},
revenews:function(){
return this.newse.reverse()
}
}
})
</script>
</body>
methods 选项
<body>
<ul>
<li>在methods选项声明的方法中传值的使用</li>
<li>在自定义组件中调用构造器内的方法</li>
<li>在构造器外部调用构造器内部的方法</li>
</ul>
<hr />
<div id='sample'>
<div v-text='price'></div>
<div><button @click='add()'>change this</button></div><br/>
<com @click.native='add()'></com>
</div><br>
<div><button onclick='sample.add(5)'>构造器外部声明的按钮</button></div>
<script>
let outCom={
template:`<div><button>组件声明的模板</button></div>`
}
let sample = new Vue({
el: '#sample',
data: {
price: 15,
},
methods:{
add:function(item){
if(!item){
this.price++
}else{
this.price+=item
}
}
},
components:{
com:outCom
}
})
</script>
</body>
watch选项，用来监控数据
<body>
<div id='sample'>
<div>今日温度{{temp}}°，穿衣建议：{{dress}}</div>
<div>
<button @click='addTemp'>升温</button>
<button @click='reduceTemp'>降温</button>
</div>
</div>
<script>
let dressing=['短袖','外套','羽绒服、厚外套']
let outData={
temp:15,
dress:'外套'
}
let sample=new Vue({
el:'#sample',
data:outData,
methods:{
addTemp:function(){
this.temp++
},
reduceTemp:function(){
this.temp--
}
},
watch:{
temp:function(newVal){
if(newVal>=26){
this.dress=dressing[0]
}else if(newVal<26 && newVal>12){
this.dress=dressing[1]
}else{
this.dress=dressing[2]
}
}
}
})
</script>
</body>
