cdn模式下vue的基本用法详解

CDN模式下Vue的基本用法详解

本文将会详细介绍如何在CDN模式下使用Vue.js，并且通过两个示例说明其基本用法。

什么是CDN模式

CDN即Content Delivery Network，翻译为内容分发网络。在Web开发中，我们往往需要引用第三方库，例如jQuery、Vue等。CDN模式是指我们将这些库放在一个分布式的服务器群集中，用户在访问我们的网站时可从离其最近的服务器上获取这些库的资源，大大提高了访问速度和用户体验。

引入Vue

我们可以在HTML文件中通过以下方式来引入Vue：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CDN Mode Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    })
  </script>
</body>
</html>

上述代码中，我们通过<script>标签引入Vue的CDN链接，然后创建一个Vue实例，并将其挂载到#app元素上。我们还定义了一个data对象，其中message属性的值为Hello, Vue!，并在HTML中通过{{ message }}输出了这个值。

示例1：计数器

我们很常见的一个样例是创建一个计数器，即点击“+”按钮会将计数器的值加1，点击“-”按钮则将其减1。下面是这个示例的Vue代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CDN Mode Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="add">+</button>
    {{ count }}
    <button @click="sub">-</button>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        add() {
          this.count++
        },
        sub() {
          this.count--
        }
      }
    })
  </script>
</body>
</html>

在代码中我们创建了一个计数器，即count属性，它的初始值为0。我们还定义了两个方法add和sub，分别用来将计数器的值加1和减1。在HTML中，我们通过@click指令将这两个方法绑定到相应的按钮上。

示例2：动态列表

另一个常见的案例是展示一个动态列表。在下面这个示例中，我们可以不断地添加新的名字到列表中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CDN Mode Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" v-model="newName">
      <button @click="addName">Add</button>
    </div>
    <ul>
      <li v-for="name in names" :key="name">{{ name }}</li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        names: [],
        newName: ''
      },
      methods: {
        addName() {
          this.names.push(this.newName)
          this.newName = ''
        }
      }
    })
  </script>
</body>
</html>

在上述代码中，我们定义了一个空数组names，以及一个用来存储新名字的字符串newName。我们还定义了一个方法addName，它将新增的名字加入到names数组中，同时将newName字符串清空。在HTML部分，我们声明一个输入框和一个按钮，将它们绑定到相应的数据和方法上。在列表部分，我们使用v-for指令循环渲染数组中的每个元素，同时使用:key指令保证每个元素都具有唯一的key。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：cdn模式下vue的基本用法详解 - Python技术站