全站公告

blackcat是国内优秀的WordPress主题开发团队,专注WordPress主题开发建站, UI设计,seo等服务;并提供有保障的维护及售后。

我已了解

Vue基础学习3

全局组件Vue.component定义方法标签TodoItem
props接收content的值
template定义模板
v-bind:content=”item”将content的值绑定item的值
v-on:click简写@click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局标签</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <!--        v-modal绑定数据-->
    <input type="text" v-model="inputValue">
    <!--        v-on事件绑定-->
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <!--            v-for循环li-->
        <!--            item in list将list的内容放入item中-->
<!--        <li v-for="item in list">{{item}}</li>-->
<!--        v-bind绑定-->
        <todo-item v-bind:content="item" v-for="item in list"></todo-item>
    </ul>
</div>
<script>
    // 全局组件
    // 每提交一次就显示一次li
    Vue.component("TodoItem",{
        props:['content'],//接收外部content的值
        template:"<li>{{content}}</li>"
    })

    // 局部组件
    var TodoItem = {
        props :['content'],
        template: "<li>{{content}}</li>"
    }

    var app = new Vue({
        el:'#app',
        component:{TodoItem:TodoItem},//注册子组件
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            handleBtnClick:function () {
                this.list.push(this.inputValue) //将输入框的数据push到列表list中
                this.inputValue = ''
            }
        }
    })
</script>
</body>
</html>

1
扫码分享到微信
Vue基础学习3
评论 0
退出

搜索一下可能来得更快
搜索
搜索
搜索