vue基础指令学习

最新推荐文章于 2024-12-29 19:09:19 发布

原创最新推荐文章于 2024-12-29 19:09:19 发布 · 1k 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--定义挂载vue对象的div-->
<div id="app">
    <todo-list></todo-list>
</div>
<!--通过cdn的方式引入vue库-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 定义一个todo-item组件
    Vue.component('todo-item', {
        // props属性，定义子组件可以接收的参数以及类型和默认值，通过属性绑定的方式就可以传入参数，
        // 下文的:title="item.title" :del="item.del" 
        props: {
            title: String,
            del: {
                type: Boolean,
                default: false
            }
        },
        // data属性用于定义组件内部的参数，通过一个函数返回，无论被其他地方引用多少次，可以保证内部数据独立
        data: function () {
            return {
            }
        },
        // template属性定义组件模板代码
        // v-if指令，条件控制语句，根据其条件表达式返回的boolean值，判定当前标签的行为
        // v-else指令
        // v-show 控制标签是否显示
        // @click ，@语法糖，是v-on指令的简写，意思是进行实践绑定，这里的意思当检测到click事件时，调用handleClick函数
        template: `
        <li>
            <a v-if="!del" >{{title}}</a>
            <a v-else style="text-decoration: line-through">{{title}}</a>
            <button v-show="!del" @click="handleClick">删除</button>
        </li>
        `,
        // 定义当前组件的方法
        methods: {
            handleClick(){
                console.log("点击删除按钮")
                // this.$emit 方法，会触发父组件的一个事件，这个方法一般是子组件向父组件传递数据时使用
                // 当前场景是 触发父组件的delete方法，并传递一个参数，多个参数的话用逗号隔开就行
                // 这里的delete事件，是自定义的事件，上文的click事件时内置的事件
                this.$emit('delete', this.title)
            }
        }
    })
    // 定义一个TODOlist组件
    Vue.component('todo-list', {
        // 模板代码
        // @delete 绑定delete事件触发时执行的方法
        // v-for 循环指令
        // :title 冒号是v-bind指令的简写，用于属性绑定
        template: `
           <ul>
                <todo-item @delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"></todo-item>
           </ul>
        `,
        props: {

        },
        methods: {
            handleDelete(val){
                console.log("点击" + val)
            }
        },
        data: function () {
            return {
                list: [
                    {
                        title: '课程1',
                        del: false
                    },
                    {
                        title: '课程2',
                        del: true
                    }
                ]
            }
        }
    })

    let vm = new Vue({
        // 挂载
        el: "#app",
        data: {
            // title: String,
            // del: {
            //     type: Boolean,
            //     default: false
            // }
        }
    })
</script>
</body>
</html>