Vue在自定义模板中使用双向绑定一、自定义模板二、注册模板三、在自定义模板中绑定数据四、在自定义模板中绑定事件五、全部代码

77 阅读 0 评论 51 点赞

我是靠谱客的博主超级泥猴桃，这篇文章主要介绍Vue在自定义模板中使用双向绑定一、自定义模板二、注册模板三、在自定义模板中绑定数据四、在自定义模板中绑定事件五、全部代码，现在分享给大家，希望可以做个参考。

一、自定义模板

二、注册模板

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

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

五、全部代码

一、自定义模板

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