likes
comments
collection
share

初始Vue--Vue.js CDN 快速入门

作者站长头像
站长
· 阅读数 27

通过 Content Delivery Network (CDN) 使用 Vue.js 是一种快速且简单的方法，可以让你在不进行本地安装或构建过程的情况下开始使用 Vue.js。

引入 Vue.js

我们可以通过script标签导入

<script src="https:unpkg.com/vue@3/dist/vue.global.js">  </script>

这个地址放的就是vue框架完整的源代码

引入之后我们就能使用其中的一些函数方法等

后面接着我们就可以开始写自己的script语法

这份引入的scrip提供了最重要的对象就是Vue

Vue中有一个方法：Vue.createApp()用来读取HTML代码

此时在JS里写HTML就相当于在JS里操作JS，可以提升性能

<div id="app">
</div>
//由于浏览器是由上到下执行的所以要先引入
 <script src="https:unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const list = {
      template: `<ul>
              <li>html</li>
              <li>css</li>
              <li>vue</li>
        </ul>`
    }
    const app = Vue.createApp(list)//将对象list中的tempalte值读取成dom
    app.mount('#app')//挂载到页面上id为add的容器上
  </script>

初始Vue--Vue.js CDN 快速入门

计数器示例

使用 Vue.js 的代码：

 <div id="app"></div>

  <script src="https:unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    Vue.createApp({
      template: `
        <h2 class="count">{{counter}}</h2>
        <button @click = 'add' class="add">+1</button>
        <button @click = 'minus' class="minus">-1</button>
      `,
      data: function () {//变量
        return {
          counter: 10
        }
      },
      methods: {//函数
        add() {
          this.counter++
        },
        minus() {
          this.counter--
        }
      }
    }).mount('#app')
  </script>

使用原生 JavaScript 的代码：

<h2 class="count">0</h2>
<button class="add">+1</button>
<button class="minus">-1</button>
<script>
  const count = document.querySelector('.count');
  const add = document.querySelector('.add');
  const minus = document.querySelector('.minus');

  let counter = 0;
  count.innerHTML = counter;

  add.addEventListener('click', () => {
    counter++;
    count.innerHTML = counter;
  });

  minus.addEventListener('click', () => {
    counter--;
    count.innerHTML = counter;
  });

主要区别：

  1. 数据绑定：

    • 在 Vue.js 版本中，{{ counter }} 是 Vue 的语法糖，用于数据绑定，HTML 内容会根据 counter 数据的改变自动更新。
    • 而在原生 JavaScript 版本中，必须手动更新 DOM 元素的 innerHTML 属性以反映 counter 变量的变化。

  2. 事件监听：

    • Vue.js 使用 @click 语法来绑定事件处理器，这在编译时会被转换为相应的事件监听器。
    • 原生 JavaScript 则使用 addEventListener 方法来添加事件监听器，并且需要在事件处理器中手动更新 DOM。

  3. 状态管理：

    • Vue.js 自动跟踪 counter 的变化，并且在变化时重新渲染相关的 DOM 元素。
    • 原生 JavaScript 需要显式地更新 DOM 每次状态改变。

  4. 代码组织：

    • Vue.js 提供了一种更结构化的方式来组织代码，通过将数据、模板和方法分开，这有助于保持代码的整洁和可维护性。
    • 原生 JavaScript 的代码通常更为紧凑，但在复杂的应用中可能会导致代码混乱和难以维护。

优点：修改HTML结构时，不再需要操作DOM结构，而是操作JS对象

但是这种在JS里写HTML的方法手敲的话简直是地狱，连快捷提示都没有，那咋办呢？

template

HTML还可以写在他原来的地方，就是在html里添加一个template标签，逻辑写在这里面

  <div id="app"></div> <!-- 添加id="app" -->
  <template id="temp">
    <div>
      <h2>{{ counter }}</h2>
      <button @click="add" class="add">+1</button>
      <button @click="minus" class="minus">-1</button>
    </div>
  </template>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   <script>
    const app = Vue.createApp({
      template: '#temp',
      data() { // 注意这里的箭头函数
        return {
          counter: 100
        }
      },
      methods: {
        add() {
          this.counter++
        },
        minus() {
          this.counter--
        }
      }
    }).mount('#app') // 修改选择器为 '#app'
  </script>

template标签里的东西还是会被js读成字符串（template: '#temp'）

初始Vue--Vue.js CDN 快速入门

在Vue.js 中使用template构建一个 Vue 应用

<body>
  <!-- Vue 应用的挂载点 -->
  <div id="app">
  </div>

  <!-- Vue 应用的模板 -->
  <template id="temp">
    <h2>{{message}}</h2>
    <h2>{{count*10}}</h2>
    <h2>{{getReverse()}}</h2>
    <h2 @click="toggle">{{flag ? 'haha' :'heihei'}}</h2>
  </template>

  <script>
    // 创建一个 Vue 应用实例
    Vue.createApp({
      template: '#temp',//id="temp"的 template 元素的内容作为你的应用模板
      data: function () {//包含了 message, count, 和 flag 三个响应式属性
        return {
          message: 'hello vue',
          count: 1,
          flag: true
        }
      },
      methods: {
        getReverse() {//反转消息字符串
          return this.message.split('').reverse().join('');
        },
        toggle() {//切换布尔标志,切换哈哈嘿嘿
          this.flag = !this.flag;
        }
      }
    }).mount('#app');
  </script>
</body>

歌手信息页制作

现在我们已经掌握了通过CDN使用 Vue.js的方法了，接下来我们综合运用一下进行巩固。

我们要展示的页面大致为这样（部分歌手图片未展示为远程服务器的问题）：

初始Vue--Vue.js CDN 快速入门

HTML部分：

    <ul>

        <!-- 遍历singer数组，为每个元素生成一个列表项 -->
          <li class="item" v-for="item in singer">
 
        <!-- 歌手头像 -->
        <div class="avatar">
          <img :src="item.avatar" alt="">
        </div>
        <!-- 歌手描述 -->
        <div class="desc">
          <div class="name">{{item.name}}</div>
          <div class="nums">热播：{{item.songsCount}}首</div>
        </div>
      </li>
    </ul>

JavaScript部分：

   //创建Vue应用实例
    Vue.createApp({
    //指定模板来源
      template: '#list',
      //定义初始函数
      data: function () {
        return {
        //歌手数据数组
          singer: []
        }
      },
      
      //组件创建后执行
      created: function () {
       //发起网络请求获取数据 fetch('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer')
            // 将响应体转换为JSON
          .then(res => res.json())
          .then((data) => {
          //将数据赋值给singer属性
            this.singer = data.data
          })
      }


    }).mount('#app')//挂载应用到DOM节点

    * {
      margin: 0;
      padding: 0;
    }

    ul li {
      list-style: none;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
    }

    li {
      width: 50%;
      padding: 30px;
      box-sizing: border-box;
    }

    li .avatar {
      width: 100%;
    }

    li .avatar img {
      width: 100%;
    }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul li {
      list-style: none;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
    }

    li {
      width: 50%;
      padding: 30px;
      box-sizing: border-box;
    }

    li .avatar {
      width: 100%;
    }

    li .avatar img {
      width: 100%;
    }
  </style>
</head>

<body>

    <!-- 应用的挂载点 -->
  <div id="app"></div>


    <!-- 模板定义 -->
  <template id="list">
    <ul>
      <li class="item" v-for="item in singer">
        <div class="avatar">
          <img :src="item.avatar" alt="">
        </div>
        <div class="desc">
          <div class="name">{{item.name}}</div>
          <div class="nums">热播：{{item.songsCount}}首</div>
        </div>
      </li>
    </ul>
  </template>
   
    <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    Vue.createApp({
      template: '#list',
      data: function () {
        return {
          singer: []
        }
      },
      created: function () {
        fetch('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer')
          .then(res => res.json())
          .then((data) => {
            console.log(data);
            this.singer = data.data
          })
      }
    }).mount('#app')
  </script>
</body>

</html>

数据驱动的设计

在 Vue.js 中，数据是驱动应用的核心。通过 data 函数，我们可以定义应用的状态，即页面上显示的数据。

在歌手信息展示页中，我们定义了一个名为 singer 的数组，用于存储歌手的详细信息。

异步数据加载

真实的 Web 应用往往需要从服务器加载数据。在我们的示例中，我们展示了如何使用 fetch API 异步获取歌手数据，并将其存储在 singer 数组中。created 生命周期钩子为我们提供了一个完美的时机，来执行这些初始化任务。

响应式 UI 构建

借助 Vue.js 的模板语法，我们可以轻松地构建出响应式的 UI。v-for 指令允许我们遍历 singer 数组，为每位歌手生成一个列表项。同时，{{ }} 插值表达式用于显示歌手的名字、头像和歌曲数量，实现了数据与视图的实时同步。

以上就是有关通过CDN使用Vue.js的全部介绍，通过最后制作的歌手信息展示页，我们不仅实践了 Vue.js 的基本使用，还深入理解了数据驱动的设计理念、异步数据加载的技巧以及响应式 UI 的构建方法。希望本文对你有所帮助，感谢你的阅读！

转载自:https://juejin.cn/post/7392513761855504394
评论
请登录