vue 通过 cdn (1) - 芒果文档

📌 相关文章

📜 vue 通过 cdn (1)

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

在网页中使用 Vue.js 通过CDN引入

Vue.js是一个流行的JavaScript框架，专注于构建用户界面。你可以通过CDN（内容分发网络）在页面中使用Vue.js。这篇文章将会介绍如何使用Vue.js CDN，并提供一些示例代码。

步骤

引入Vue.js CDN有两种方式。第一种方式是将Vue.js文件下载到本地并引入，第二种方式是通过CDN引入。在这篇文章中，我们将介绍通过CDN引入Vue.js的方式。

1. 引入Vue.js CDN

通过以下方式引入Vue.js CDN：

<html>
  <head>
    <title>使用Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
</html>

在上述代码中，我们引入了Vue.js的CDN。我们可以通过以下方法检查是否成功引入：

console.log(Vue);

如果控制台输出了Vue对象，则说明CDN引入成功。

2. 创建Vue实例

在上述代码中，我们创建了一个Vue实例。我们可以通过以下代码创建Vue实例：

var app = new Vue({
  //选项
})

在这个实例中，我们可以使用Vue.js提供的不同的属性、方法和声明周期的钩子函数来实现不同的功能，例如：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
     doSomething: function () {
        console.log('doSomething')
     }
  },
  mounted() {
    console.log('Vue component is mounted!')
  }
})

在上述代码中，我们定义了一个message属性、一个doSomething方法和一个mounted生命周期钩子函数。当Vue组件被挂载到页面时，mounted钩子函数将被执行。

3. 绑定数据

Vue.js可以将数据绑定到HTML元素上，实现动态更新。在以下代码中，我们将message属性绑定到div元素中，实现动态更新。

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

我们可以通过以下方式修改message的值：

app.message = 'Hello World!'

此时div元素中的内容将会被更新为Hello World!。

示例代码

下面是一个小例子，演示了如何使用Vue.js CDN：

<html>
  <head>
    <title>使用Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
      <button @click="reverseMessage">逆转消息</button>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        },
        methods: {
          reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
          }
        }
      })
    </script>
  </body>
</html>

在这个示例中，我们创建了一个message属性和一个reverseMessage方法。当用户点击按钮时，reverseMessage方法将调用并将message字符串逆转。

总结

Vue.js提供了一种简单、灵活和高效的方式来构建用户界面。你可以通过CDN引入Vue.js，并在网页中使用它。本文已经为你介绍了如何通过CDN引入Vue.js，并提供了一些示例代码，希望对你有所帮助。