Vue.js初体验：踏入前端开发的灵活世界-六虎

前语

在前端范畴，很多结构和库的涌现使得开发变得愈加高效和灵敏。Vue.js（简称Vue）作为其间一员，在其简练而强壮的特性下，招引了越来越多的开发者。本文将共享我的Vue初体会，探索这个流行的JavaScript结构的根本概念和运用感受。篇尾附上一个实战小demo。

Vue.js：轻盈而强壮

Vue.js是一款渐进式JavaScript结构，专心于构建用户界面。相比于其他结构，Vue愈加轻量，简略上手，同时在大型项目中也能展现出强壮的体现。它由尤雨溪（Evan You）于2014年创立，并敏捷在开发者社区中崭露头角。

我的第一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div id="app"></div>
  <template id="tel">
    <h3>{{message}}</h3>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    Vue.createApp({
      template: '#tel',
      data: function () {
        // 数据寄存的当地
        return {
          message: 'Hello BiangBiang!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

解说:

<div id="app">：界说一个带有ID为 “app” 的空<div>元素，作为Vue运用的挂载点。
<template id="tel">...</template>：运用了Vue 3的模板语法，界说了一个模板，其间有一个<h3>标签，经过{{message}}插值语法展现一个动态的文本。这个模板被放在了<template>标签中，并经过ID为 “tel” 的模板标签进行引证。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引进Vue 3的大局构建，这是经过UNPKG提供的CDN链接引进Vue库。

可在Vue.js的官网找到：

Vue.createApp({...})：经过Vue.createApp办法创立了一个Vue运用实例。
template: '#tel'：在Vue运用实例中指定了模板，运用了之前界说的ID为 “tel” 的模板。
data: function () {...}：界说了一个数据特点 message，初始值为 ‘Hello BiangBiang!’。
.mount('#app')：将Vue运用实例（也就是上述创立的app）挂载到ID为 “app” 的HTML元素上，使Vue运用能够在该元素内进行烘托和交互。

作用：

初次学的时分还没一眼看出Vue的优势，心想本来一行能够解决的代码却写的这么麻烦，可又很简略能想到，实际项目开发代码量是巨大的，Vue的优势到那个时分想必就能体现出来了。因为本人还刚初次触摸，只了解Vue的一些优势，有的优势看了也不是很能了解，下面引证网上给出的Vue开发的优势。

简练易学： Vue.js的设计简略直观，易于学习和上手。Vue提供了明晰的文档和逐渐增量的学习曲线，使新手能够快速入门。

呼应式数据绑定： Vue选用了双向数据绑定，当数据发生变化时，视图会自动更新，反之亦然。这简化了DOM操作，进步了开发功率。

组件化开发： Vue推崇组件化开发思维，将一个运用划分为多个独立的组件，每个组件担任自己的状态和视图。这使得代码更易于保护、复用和测试。

灵敏性： Vue并不强制运用特定的工具链，能够逐渐选用，也能够与其他库和项目无缝集成。这种灵敏性使得Vue能够适应各种项目规模和需求。

渐进式结构： Vue是一个渐进式结构，能够依据项目的需要逐渐引进。你能够挑选只运用Vue的一部分功能，如只运用Vue的数据绑定而不运用其它特性。

虚拟DOM： Vue运用虚拟DOM来进步功能。经过在内存中保护一个虚拟DOM树，Vue能够在数据变化时核算出最小化的DOM更新，然后减少实在DOM操作的次数，进步页面烘托功率。

社区和生态系统： Vue具有巨大而活跃的社区，开发者能够从社区获取支撑、学习经历，并共享自己的常识。此外，Vue的生态系统也在不断强大，有许多插件和第三方库可供挑选。

适用于单页运用（SPA）： Vue对单页运用提供了杰出的支撑，经过Vue Router进行路由办理，经过Vuex进行状态办理，使得开发杂乱的前端运用变得愈加简略。

杰出的功能： Vue的虚拟DOM和合理的更新策略使得运用具有杰出的功能体现，同时Vue 3引进了一些新的优化策略，进一步提升了功能。

以上9点我现在并没有全部切身感受到，其间第1,2,5,6点现在都能感受到一点，我等下也会经过最近的学习来举例，可是相信不出一个月，我对Vue的认识也会更深一步。到时分也能够给大家共享更深层次的Vue的学习体会。下面简略介绍一下最近学习的Vue的部分指令，以及computed和watch的根本运用。

Vue指令

1.v-html

作用：刺进HTML
比如：<div v-html="info"></div>，将info中的HTML代码刺进到元素中。

2.v-text

作用：刺进文本
比如：<div v-text="msg"></div>，将msg中的文本代码刺进到元素中。

<body>
  <div id="app"></div>
  <template id="my-app">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="info"></div>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const App = {
      template:'#my-app',
      data(){
        return {
          msg:'hello World!',
          info:`<h1>这是一个富文本</h1>`
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

3.v-once

作用：只烘托一次烘托了一次就不再烘托了
比如：<h1 v-once>{{count}}</h1>，count变化一次之后就不会再变了，如下图。

不加该特点：

加上该特点：

代码事例：

<body>
  <div id="app"></div>
  <template id="my-app">
    <h2>{{count}}</h2>
    <button @click="add"> 1</button>
    <!-- v-once 只烘托一次 变了一次之后就不会再变了 -->
    <h1 v-once>{{count}}</h1>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          count: 100
        }
      },
      methods:{
        add(){
          this.count  ;
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

能够看到加上了v-once之后，本来都需要增加的下面的点击确不会再增加了。

4.v-bind

作用：进行特点绑定，能够v-bind:class（动态类名）也能够 v-bind:style（样式）
比如：<a v-bind:href="https://juejin.im/post/7307185449440182306/url">Link</a>，将href特点绑定到url变量。

5.v-on

作用：进行事件绑定，可简写成@事件名
比如：<button v-on:click="change">按我</button>，当按钮被点击时履行 change 办法。

6.v-pre

语法：v-pre
比如：<span v-pre>{{ 这里不会被编译，而是连同括号一起输出 }}</span>，使元素和它的所有子节点都越过编译。

7.v-if

作用：条件烘托，和其他编程语言的if句子类似
比如：<h2 v-if="count === 1">今日你写代码了吗？</h2> <h2 v-else-if="count === 2">今日你看文章了吗？</h2> <h2 v-else>都看了</h2>

作用展现：

<body>
  <div id="app"></div>
  <template id='my-app'>
    <h2 v-if="count === 1">今日你写代码了吗？</h2>
    <h2 v-else-if="count === 2">今日你看文章了吗？</h2>
    <h2 v-else>都看了</h2>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data: function () {
        return {
          count: 0
        }
      },
      methods: {
        change() {
          this.count  ;
          if (this.count == 3) {
            this.count = 0;
          }
          this.count %= 3;
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

8.v-show

作用：条件显现，v-show = “条件”
比如：<p v-show="isShown">Hello World</p>，依据isShown的值决定是否显现元素。

值得注意的是：相比于上面的v-if等等， v-show存在一个坏处，v-show是直接修正style特点，将display改为none ，而上面的是直接删去动物结构或许增加动物结构，所以它消失后不会允许用户右键查看直接修正display特点，而v-show能够。可是v-show也有好处，因为v-if是直接删去或增加动物结构，但在频频切换时或许涉及到DOM的销毁和创立，带来一些功能开支。而v-show更适用于需要频频切换的场景，它的功能开支较小。

9.v-for

作用：循环烘托 v-for=”item in items” 或 v-for=”(item,index) in items”
比如：<li v-for="item in items">{{ item.text }}</li>，依据数组items的内容烘托列表项。

作用展现：

<body>
  <div id="app"></div>
  <template id="my-app">
    <h2>歌曲列表</h2>
    <ul>
      <!-- 运用v-for时 常在v-for其后加上 :key="仅有且不同的标识"   不然功能就会降低 ,但下面这个index其实也没有用 这个今后再了解 -->
      <li v-for="(item ,index) in songs" :key="index" v-if="">{{index 1}}--{{item}}
        <a href="#" @click="del(index)">x</a>
      </li>
    </ul>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          songs: [
            '说好不哭',
            '稻香',
            '说好的幸福呢',
            '等你下课',
            '告白气球',
            '半岛铁盒',
            '夜曲'
          ]
        }
      },
      methods:{
        del(i){
          this.songs.splice(i, 1);
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

核算特点computed

动态更新

直接上事例：

<body>
  <div id="app"></div>
  <template id="my-app">
    <h2>今日温度：{{temp}}</h2>
    <h3>温馨提示：主张出门穿:{{suggestion}}</h3>
    <button @click="add"> </button>
    <button @click="down">-</button>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          temp: 10,
        }
      },
      computed: {
        // computed 里边的特点时呼应式履行 履行条件是当它依靠的数据源发生变化时（如：下述事例为temp） 它才会履行
        suggestion() {
          let res = '夹克'
          if (this.temp >= 20) {
            res = '短袖'
          } else if (this.temp <= 0) {
            res = '棉袄'
          } else {
            res = '夹克'
          }
          return res
        }
      },
      methods: {
        add() {
          this.temp  = 5
        },
        down() {
          this.temp -= 5
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

作用如下：

上述代码，咱们将suggestion函数放在methods里边也能履行，可是为什么还要增加一个computed核算特点呢。这是因为核算特点它是依靠缓存的，它只要依靠关系发生了变化，核算特点才会从头核算。这也意味着在屡次拜访相同的核算特点时，Vue会回来之前核算的成果，而不必从头核算，这明显进步了功能。而methods每次调用都会履行一次，这也是核算特点的优势之处。

侦听器watch

增加侦听，也能够进行动态更新

<body>
  <div id="app"></div>
  <template id="my-app">
    <h2>今日温度：{{temp}}</h2>
    <h3>温馨提示：主张出门穿:{{suggestion}}</h3>
    <button @click="add"> </button>
    <button @click="down">-</button>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          temp: 30,
          suggestion: '夹克'
        }
      },
      watch: {  // 侦听器
        // 侦听temp数据
        temp: {
          // newVal：新改变的值 oldVal：原先的值
          handler: function (newVal, oldVal) {
            if (newVal >= 20) {
              this.suggestion = '短袖'
            } else if (newVal <= 0) {
              this.suggestion = '羽绒服'
            } else {
              this.suggestion = '夹克'
            }
          },
          // 加载页面时当即履行一遍上面的handler函数，（因为咱们拿到得温度初始值或许是30，但默认的是夹克，明显不合理）
          immediate:true
        }
      },
      methods: {
        add() {
          this.temp  = 5
        },
        down() {
          this.temp -= 5
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>

作用和上述computed核算特点是一样的，不过它能够加一个特点immediate,当值为true时表示加载页面的时分就会当即履行一遍。正好会覆盖掉咱们设置的初始值。

了解了上面这些之后，下面是一个简略的实战小demo，刚触摸Vue的可先自行完成，作用如下：

附上上述小demo的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="app"></div>
  <template id="my-app">
    <table>
      <thead>
        <th>序号</th>
        <th>书本称号</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(book,index) in books" :key="index">
          <td>{{book.id}}</td>
          <td>{{book.name}}</td>
          <td>{{book.date}}</td>
          <td>{{book.price}}</td>
          <td>
            <button @click="down(index)">-</button>
            <span class="counter">{{book.count}}</span>
            <button @click="add(index)"> </button>
          </td>
          <td>
            <button @click="remove(index)">移除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>总价格: {{totalPrice}} </h2>
  </template>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="./index.js"></script>
</body>
</html>

CSS：

table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}
th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
.counter {
  margin: 0 5px;
}

JS：

Vue.createApp({
  template: "#my-app",
  data() {
    return {
      books: [
        {
          id: 1,
          name: '《算法导论》',
          date: '2006-9',
          price: 85.00,
          count: 0
        },
        {
          id: 2,
          name: '《UNIX编程艺术》',
          date: '2006-2',
          price: 59.00,
          count: 0
        },
        {
          id: 3,
          name: '《编程珠玑》',
          date: '2008-10',
          price: 39.00,
          count: 0
        },
        {
          id: 4,
          name: '《代码大全》',
          date: '2006-3',
          price: 128.00,
          count: 0
        },
      ],
    }
  },
  computed: {
    totalPrice() {
      // 两种核算价格的方式都能够
      // return this.books.reduce((sum, book) => {
      //   return sum   book.price * book.count;
      // }, 0);
      let sum = 0;
      for (let i = 0; i < this.books.length; i  ) {
        sum  = this.books[i].price * this.books[i].count;
      }
      return sum;
    },
  },
  methods: {
    add(index) {
      this.books[index].count  ;
    },
    down(index) {
      if (this.books[index].count != 0) {
        this.books[index].count--;
      }
    },
    remove(index) {
      this.books.splice(index, 1);
    }
  }
}).mount("#app");

留言

博主刚触摸Vue，或许上述内容比较简略，今后随着学习的深入，我还会持续更新质量更高的内容♥(◡)。

Vue.js初体验：踏入前端开发的灵活世界

前语