【2阶】vue在自定义模板双向绑定

最新推荐文章于 2024-05-26 22:57:35 发布

小王码字

最新推荐文章于 2024-05-26 22:57:35 发布

阅读量120

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Wangzz1217/article/details/128192561

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、自定义模板

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