1、生命周
<div id="app">
{{nickname}}
<ul>
<li v-for='item in 10'> {{item}} </li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
nickname:'simba'
}
},
beforeCreated(){
console.log('beforeCreated',this.$data,this.$el)
},
created(){
this.nickname = 'Roger'
console.log('created处理data')
},
beforeMounted(){
console.log('beforeMounted',this.$data,this.$el)
},
mounted(){
console.log('mounted处理DOM')
document.getElementsByTagName('li')[5].style.color = 'red'
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
},
beforeDestroy(){
console.log('beforeDestroy')
},
destroyed(){
console.log('destroyed')
},
})
</script>
2、监听器
<div id="app">
<ul class="list">
{{totalprice | fmprice}}
<li @click='activeIndex=i'
:class='{active:i===activeIndex} '
v-for=' (item,i) in pricelist '>
{{item.name}}
</li>
</ul>
<div style="display: flex;">
<button @click='count--' :disabled='count===1' style="width: 30px;">-</button>
<input type="text"
style="width: 30px;text-align: center;"
v-model.Number='count'>
<button @click='count++' :disabled='count===6' style="width: 30px;">+</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="./filter.js"></script> -->
<script>
Vue.filter('fmprice',val=>{
return '¥'+ val.toFixed(2)
})
new Vue({
el: '#app',
computed: {
totalprice() {
return this.pricelist[this.activeIndex].price * this.count
}
},
watch:{
count(val){
if( !/^[1-6]$/.test(val)) this.count=1
}
},
data() {
return {
activeIndex: 0,
count: 1,
pricelist: [
{
price: 180,
name: '15-18排'
},
{
price: 580,
name: '10-14排'
},
{
price: 880,
name: '5-9排'
},
{
price: 1880,
name: '1-4排'
}
]
}
},
})
</script>