用HTML和JS两个文件搭配没有成功，后来又成功了

hamimelon2020

于 2021-04-02 07:59:36 发布

阅读量59

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/115388994

版权

vue 专栏收录该内容

722 篇文章 4 订阅

订阅专栏

这个博客展示了如何在Vue.js应用中使用事件处理和数据绑定。通过一个简单的例子，作者演示了如何创建一个按钮，当点击时会反转`message`变量的值。示例包括在HTML中引入Vue.js库和从`44.js`导入组件定义。代码的结构显示了Vue实例的创建和挂载到DOM元素的过程。

摘要由CSDN通过智能技术生成

43.html

<!DOCTYPLE html>
<html>
    <head>
        <title>
            222222
        </title>
    </head>
   
    <body>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="./44.js">
                        
        </script>
        <div id="event-handling">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转 Message</button>
          </div>


    </body>
</html>

44.js

const EventHandling = {
    data() {
        return {
        message: 'Hello Vue.js!'
        }
    },
    methods: {
        reverseMessage() {
        this.message = this.message
            .split('')
            .reverse()
            .join('')
        }
    }
    }

    Vue.createApp(EventHandling).mount('#event-handling')

为啥呢？
引用的格式不对？

也没变什么，又行了

<!DOCTYPLE html>
<html>
    <head>
        <title>
            222222
        </title>
    </head>
   
    <body>
        <script src="https://unpkg.com/vue@next"></script>
        
        
                        
        
        <div id="event-handling">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转 Message</button>
          </div>
          <script src = "./44.js"></script>


    </body>
</html>