继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue基础指令学习

测试老憨
关注TA
已关注
手记 29
粉丝 4
获赞 11
<!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>

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP