首页vue 引入html 页面，html页面内调用vue函数

vue 引入html 页面，html页面内调用vue函数

时间: 2023-08-08 14:06:58 浏览: 96

要在 HTML 页面中调用 Vue 函数，你需要先在 HTML 页面中引入 Vue.js 库，可以从官网下载或使用 CDN。引入后，你需要在 HTML 页面中创建一个 Vue 实例，然后在实例中定义需要的方法和属性。以下是一个简单的例子，演示了如何在 HTML 页面中引入 Vue.js 库，并创建一个包含一个计数器的 Vue 实例，并在 HTML 页面中调用该计数器： ```html <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <button @click="count++">Click me</button> <p>Count: {{ count }}</p> </div> <script> var app = new Vue({ el: '#app', data: { count: 0 } }) </script> </body> </html> ``` 在上面的例子中，我们首先在 `<head>` 元素中引入了 Vue.js 库，然后在 `<body>` 元素中创建了一个包含一个计数器的 Vue 实例。在该实例中，我们定义了一个名为 `count` 的属性，并将其初始化为 0。我们还定义了一个名为 `click` 的方法，用于在按钮被点击时将 `count` 属性加 1。在 HTML 页面中，我们使用 `{{ count }}` 将 `count` 属性的值显示在页面上。当用户点击按钮时，`count` 属性的值将自动更新，并且页面上的计数器也会随之更新。

阅读全文