<template>
    <h3>数组变化侦听</h3>
    <button @click="addListHandle">添加数据</button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            names: ['Alice', 'Bob', 'Charlie', 'Diana']
        }
    },
    methods: {
        addListHandle() {
            // this.names.push('New Name ' + (this.names.length + 1));
            this.names.concat(['New Name ' + (this.names.length + 1)]); // 使用concat不会触发视图更新
            this.names = this.names.concat(['New Name ' + (this.names.length + 1)]); // 重新赋值可以触发视图更新
        }
    },
};
</script>

<template>
    <h3>{{ yucol.name }}</h3>
    <!-- <p>{{ yucol.kills.length > 0 ? 'Yes': "No" }}</p> -->
    <p>{{ killCount }}</p>
    <p>{{ yucolCounts() }}</p>
</template>


<script>

export default {
    data() {
        return {
        // 这里可以添加一些数据属性
        yucol:{
            name:'yucol',
            age:18,
            kills: ['coding', 'gaming', 'reading']
        }
        };
    },
    computed: {
        // 计算属性
        // 代码不更改时，只会计算一次，提升性能
        killCount() {
            return this.yucol.kills.length > 0 ? 'Yes': "No";
        }
    },
    methods: {
        // 这里可以添加一些方法
        yucolCounts(){
            return this.yucol.kills.length > 0 ? 'Yes': "No";
        }
    }
};

</script>

<template>

    <!-- <p :class="myClass">Class样式绑定</p> -->
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定</p>
    <p :class="classObject">Class样式绑定（多个对象绑定）</p>
    <p :class="arrs">Class样式绑定（数组绑定）</p>
    <p :class="[isActive ? 'active' : '', {'text-danger':hasError}]">Class样式绑定（数组和对象）</p>
</template>

<script>

export default {
    data(){
        return {
            // 这里可以添加一些数据属性
            // myClass:'red-text'
            isActive:true,
            hasError:true,
            classObject:{
                'active':true,
                'text-danger':true
            },
            arrs:['active','text-danger'],
            arrActive:"active",
            arrDanger:"text-danger"
        };
    }
};

</script>


<style>

    .active{
        color: red;
        font-size: 30px;
    }

    .text-danger{
        background-color: yellow;
    }
</style>

<template>

    <p :style="{color:activeColor, fontSize:'30px'}">Style绑定</p>
    <p :style="styleObject">Style绑定</p>

</template>


<script>

export default {
    data(){
        return {
            // 这里可以添加一些数据属性
            activeColor:'red',
            styleObject:{
                color:'green',
                fontSize:'30px'
            }
        };
    }
};

</script>

<template>

    <h3>侦听器</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">修改数据</button>
</template>


<script>

export default {
    data(){
        return {
            // 这里可以添加一些数据属性
            message:"Hello, Watch Demo!"
        };
    },
    methods:{
        updateHandle(){
            this.message = "Data has been updated!";
        }
    },
    watch:{
        // 监听 message 属性的变化
        // newVal: 新值 oldVal: 旧值
        // 函数名必须与要监听的数据属性名相同
        message(newVal,oldVal){
            // 当 message 变化时执行的代码
            console.log(`message changed from "${oldVal}" to "${newVal}"`);
        }
    }
}
</script>

<template>

    <h3>表单输入绑定</h3>
    <form action="">
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </form>

</template>

<script>

export default {
    data() {
        return {
            message: "",
            checked: false
        }
    }

}

</script>

<template>

    <div ref="container" class="container">
        {{ contents }}
    </div>
    <input type="text" ref="username">
    <button @click="getElementHandle">获取元素</button>

</template>


<script>

export default {
    data() {    
        return {
            contents:"内容"
        }
    },
    methods: {
        getElementHandle() {
            // innerHTML:原生js的属性
            this.$refs.container.innerHTML = "hhhhh";
            console.log(this.$refs.username.value);
        }
    }
}
</script>