Vue--基础3

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', // 等同 在vue外面写 
            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: {  // 计算属性的getter
                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>