Vue在自定义模板中使用双向绑定

最新推荐文章于 2024-09-13 10:44:09 发布

朵朵宝

最新推荐文章于 2024-09-13 10:44:09 发布

阅读量383

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/magic_818/article/details/127831130

版权

Vue.js 自定义模板数据绑定事件处理组件

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、自定义模板

<template id="template01">
    <div>
        <h1>哈哈哈</h1>
    </div>
</template>

二、注册模板

Vue.component('hello',{
    template: '#template01'
})

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

注意:红框里是固定格式,正常Vue为数据在data中,此处为data中的return中写入数据

然后在模板中进行数据绑定

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

同时在模板中加入按钮的调用方法

五、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.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>