码迷,mamicode.com
首页 > 其他好文 > 详细

vue基础指令学习

时间:2020-04-01 10:48:12      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:utf-8   methods   div   实战   ret   绑定   独立   引入   tps   

<!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>

欢迎大家去 我的博客 瞅瞅,里面有更多关于测试实战的内容哦!!

vue基础指令学习

标签:utf-8   methods   div   实战   ret   绑定   独立   引入   tps   

原文地址:https://www.cnblogs.com/zyjimmortalp/p/12610776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!