master

分支 (1)

管理

管理

master

vue-courseware
/
22-vue模板解析注意事项.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/myselect.css">
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-select></my-select>
        <table border="" cellpadding="" cellspacing="">
            <tr>
                <td>123</td>
                <td>456</td>
                <td>
                    <my-select></my-select>
                </td>
            </tr>
            <tr>
                <my-select></my-select>
            </tr>
            <!-- 动态绑定组件, 利用is属性 -->
            <tr is="my-select"></tr>
        </table>
    </div>
</body>
<script>
    Vue.component("my-select", {
        template: `<div class="select">
                <div class="result">
                    <span class="option">{{option}}</span>
                    <span class="trig" v-bind:class="{'active':state}" v-on:click="changeState">&lt;</span>
                </div>
                <ul v-bind:class="state?'active':''">
                    <li v-for="(ele,i) in arr" v-on:click="choose(ele)">{{ele}}</li>
                </ul>
            </div>`,
        data() { //组件中的data是一个函数，并且返回一个对象。
            //（思考：为什么？函数有独立作用域，可以保证每一次调用组件，组件data都是独立的，互相不干扰）
            return {
                state: false, //记录列表展开的状态   false---隐藏
                arr: ['html', 'css', 'js'],
                option: "html"
            }
        },
        methods: {
            changeState() { //切换展开的状态
                this.state = !this.state
            },
            choose(str) {
                this.option = str
                this.state = false
            }
        },
        created() {
            console.log("created")
        },
        mounted() {
            console.log("mounted")
        },
        updated() {
            console.log("updated")
        },

    })

    new Vue({
        el: "#app",
        data: {

        },
    })
</script>

</html>