📌  相关文章
📜  Vue 3 CDN - Javascript (1)

📅  最后修改于: 2023-12-03 15:21:03.976000             🧑  作者: Mango

Vue 3 CDN - Javascript

Vue 3 是一种用于构建用户界面的渐进式框架，它采用了现代的JavaScript 开发技术。本文将介绍如何通过使用 Vue 3 的CDN (Content Delivery Network) 来快速上手。

引入 Vue 3

要使用 Vue 3，您需要在HTML文件的<head>标签中引入 Vue 的CDN链接，如下所示：

<script src="https://unpkg.com/vue@3.2.0/dist/vue.global.prod.js"></script>
创建 Vue 应用

一旦 Vue 3 的CDN链接引入成功，您就可以开始构建一个简单的Vue 3 应用了。首先，在HTML中创建一个容器元素，用于渲染Vue组件：

<div id="app">
  {{ message }}
</div>

接下来，在<script>标签中，实例化一个Vue对象并将其挂载到上一步中创建的元素上：

<script>
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
})

app.mount('#app')
</script>

以上代码将在<div id="app">元素中渲染Hello Vue 3!。您可以自定义data中的message属性来实现不同的渲染效果。

在 Vue 组件中使用 Vue 3

Vue 3 提供了组件化的开发方式，使得代码可以更加模块化和可复用。以下演示一个简单的Vue组件的使用方法：

<div id="app">
  <my-component></my-component>
</div>

<script>
const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <div>
      <h2>My Component</h2>
      <p>This is my Vue component.</p>
    </div>
  `
})

app.mount('#app')
</script>

在上述代码中，我们定义了一个名为my-component的组件，它会在<div id="app">中渲染，并显示一个标题和一段文本。

添加交互功能

Vue 3 允许您通过methods属性添加交互功能。以下是一个简单的示例，展示了如何在按钮点击时更新数据：

<div id="app">
  <button @click="increment">Click me!</button>
  <p>Count: {{ count }}</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

app.mount('#app')
</script>

通过点击<button>按钮，count属性会自增，并实时更新在页面上。

总结

通过使用 Vue 3 的CDN链接，您可以快速上手Vue 3，并开始构建交互式的用户界面。引入依赖，创建Vue应用，编写组件和添加交互功能是基本的开发步骤。希望本文对您有所帮助！