第2阶段23-vue在自定义模板中使用双向绑定

最新推荐文章于 2024-04-28 11:51:43 发布

阿正Sir

最新推荐文章于 2024-04-28 11:51:43 发布

阅读量221

点赞数

文章标签： vue.js javascript 前端

原文链接：https://juejin.cn/post/7164682276616273957

版权

一、自定义模板

<template id="template01">
    <div>
        <h1>哈哈哈</h1>
    </div>
</template>
复制代码

二、注册模板

Vue.component('hello',{
    template: '#template01'
})
复制代码

三、在自定义模板中绑定数据

四、在自定义模板中绑定事件

五、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="assets/vue.min-v2.5.16.js"></script>
</head>
<body>
<template id="template01">
    <div>
        <h1>{{msg}}</h1>
        <button @click="doTest">点我试试</button>
    </div>
</template>

<div id="app">
    <hello></hello>
</div>
<script>
    Vue.component('hello',{
        template: '#template01',
        data(){
            return{
                msg: '这是我自定义的模板'
            }
        },
        methods: {
            doTest(){
                this.msg = '哈哈啊哈'
            }
        }
    })
    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

作者：大坏蛋_
链接：https://juejin.cn/post/7164682276616273957
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。