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

た入场券 2023-10-11 19:44 18阅读 0赞

**目录**

一、自定义模板

二、注册模板

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

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

五、全部代码

--------------------

## 一、自定义模板 ##

## 二、注册模板 ##

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

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

![7df6247b4d2d4545b1886f1a44b313e2.png][]

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

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

![425648378d92450c9af34620a7df2467.png][]

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

![1a6416fee2d14ce0b67e89f417f966c3.png][]

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

![d462cd99acfd43419cab8cc5dff0f759.png][]

## 五、全部代码 ##

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

[7df6247b4d2d4545b1886f1a44b313e2.png]: https://img-blog.csdnimg.cn/7df6247b4d2d4545b1886f1a44b313e2.png
[425648378d92450c9af34620a7df2467.png]: https://img-blog.csdnimg.cn/425648378d92450c9af34620a7df2467.png
[1a6416fee2d14ce0b67e89f417f966c3.png]: https://img-blog.csdnimg.cn/1a6416fee2d14ce0b67e89f417f966c3.png
[d462cd99acfd43419cab8cc5dff0f759.png]: https://img-blog.csdnimg.cn/d462cd99acfd43419cab8cc5dff0f759.png