likes
comments
collection
share

Vue.js入门指南：轻松玩转前端，告别抓耳挠腮的JS烦恼

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

前言

Vue.js 是一个开源的渐进式JavaScript框架，用于构建用户界面。它专注于视图层，采用了响应式数据绑定和组件化开发的方式，使得开发者能够更加高效地构建交互性强、可复用的Web应用。Vue.js具有易上手、灵活轻量、性能优秀等特点。它的核心库只关注视图层，可以与现有项目无缝整合，也可以逐步引入更多的功能。同时，Vue.js拥有生态系统丰富的工具链，如Vue CLI、Vue Router和Vuex等，能够满足构建复杂单页应用（SPA）的需求。总体而言，Vue.js在前端开发中备受青睐，是一款功能强大、易用性高的JavaScript框架。

话题引入

    <h2>首页</h2>
    <ul>
        <!-- <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>vue</li> -->
    </ul>
    <a href="./detail.html">去详情页面</a>

    <script>
        let data = ['HTML', 'CSS', 'JS', 'VUE'] // ajax

        for (let i = 0; i < data.length; i++) {
            let li = document.createElement('li')
            li.innerHTML = data[i]
            document.querySelector('ul').appendChild(li)
        }
    </script>

我们看这段原生js代码，通过for循环的方式往页面中增加信息。包括一个标题、一个空的无序列表和一个指向另一个页面的链接。在加载页面时，通过JavaScript动态创建了列表项，并将其添加到无序列表中，列表项内容来自于预先定义的数组。我们会发现其实是不够优雅的，因此我们js中有一个非常好用的框架vue来让代码编写的更加优雅和方便，是一个叫尤雨溪的大佬打造的。

初步认识vue

Vue.js入门指南：轻松玩转前端，告别抓耳挠腮的JS烦恼

我们本篇文章作为认识vue的开始，采用cdn的方式去使用vue，我们访问vue的官方，然后选择快速上手就可以找到啦！这种方式就是多增加一个script标签引入vue的源码。

<body>
  <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')
  </script>
</body>

我们首先通过这个例子来初步认识一下vue，我们要在html中创建一个div用来装我们的vue内容，然后引入vue，最后在script里进行我们的一系列操作。我们首先创建一个对象，属性为template的内容装入我们的内容，这里的属性名是严格规定的，然后通过Vue。createApp将对象读成dom结构，最后挂载到我们的appdiv中。结果如下：

Vue.js入门指南：轻松玩转前端，告别抓耳挠腮的JS烦恼

vue的简洁性

我们再次通过一些具体的实例来看看。

<body>
  <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
    })
  </script>
</body>

我们制作了一个简单的计数器。这是采用原生js书写的。核心步骤就是我们点击增加按钮时数字加一，点击减少按钮时数字减一。

  1. const count = document.querySelector('.count')：

    • 使用document.querySelector方法选择类名为count的元素，并将其赋值给常量count。这个元素用于显示当前的计数值。

  2. const add = document.querySelector('.add')：

    • 同样地，选择类名为add的元素（即“+1”按钮），并将其赋值给常量add。

  3. const minus = document.querySelector('.minus')：

    • 选择类名为minus的元素（即“-1”按钮），并将其赋值给常量minus。

  4. let counter = 0：

    • 定义一个变量counter，初始值为0，用于保存当前的计数值。

  5. count.innerHTML = counter：

    • 将count元素的内部HTML设置为当前的计数值，即0。

  6. add.addEventListener('click', () => { ... })：

    • 为“+1”按钮添加一个点击事件监听器。当按钮被点击时，执行箭头函数中的代码：

      • counter++：将counter的值增加1。
      • count.innerHTML = counter：更新count元素的内部HTML为新的计数值。

  7. minus.addEventListener('click', () => { ... })：

    • 为“-1”按钮添加一个点击事件监听器。当按钮被点击时，执行箭头函数中的代码：

      • counter--：将counter的值减1。
      • count.innerHTML = counter：更新count元素的内部HTML为新的计数值。

我们接下来看看vue的书写。

<body>
  <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>
</body>

  1. Vue.createApp({...}).mount('#app')：

    • 创建一个新的Vue应用实例，并将其挂载到具有ID为app的DOM元素上。

  2. template: ...：

    • 定义组件的模板。

    • 使用了Vue的模板语法：

      • <h2 class="count">{{counter}}</h2>：展示当前计数值，使用双花括号{{}}进行数据绑定。
      • <button @click='add' class="add">+1</button>：定义一个按钮，点击时调用add方法。
      • <button @click='minus' class="minus">-1</button>：定义另一个按钮，点击时调用minus方法。

  3. data: function() { return { counter: 10 } }：

    • 定义组件的初始数据。data必须是一个返回对象的函数，这里返回一个包含counter属性的对象，初始值为10。

  4. methods: { ... }：

  • 数据代理：

    • data函数返回一个对象，其中定义了counter属性。Vue会自动将该对象中的属性代理到Vue实例上，因此可以通过this.counter访问和修改它。

  • 方法定义：

    • methods对象包含两个方法：add和minus。当按钮被点击时，相应的方法会被调用，更新counter的值。

  • 挂载：

    • mount('#app')将Vue实例挂载到ID为app的DOM元素上，使得Vue接管该元素及其子元素的渲染和更新。

我们首先定义要挂载的div，然后引入vue源码，同样在script内进行我们的操作，我们首先来简单了解一下createApp方法内接收对象的不同属性值含义，首先template是我们要加入到html中的dom结构，data是我们的数据源，以匿名函数返回值的形式返回，methods是我们定义的方法，里面的this可以调用我们的数据源内容。其中我们的template里的内容可以采用{{}}的方式引入我们的数据源，也可以采用@click方式绑定我们的点击事件回调函数。然后将整体内容挂载至我们的div中，怎么样，是不是比原生js的方式要简洁优雅许多呢？

更为优雅的写法

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

  <template id="temp">
    <div>
      <h2>{{counter}}</h2>
      <button @click="add">+1</button>
      <button @click="minus">-1</button>
    </div>
  </template>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    Vue.createApp({
      template: '#temp',
      data: function() {
        return {
          counter: 100
        }
      },
      methods: {
        add() {
          this.counter++
        },
        minus() {
          this.counter--
        }
      }
    }).mount('#app')
  </script>
</body>

这个时候，可能就会有同学感到疑惑，为什么我的html内容要写在vue中，感觉怪别扭的，不能直接写在html内嘛，答案是当然可以，只不过我们要将这个template片段作为一个标签书写，然后引入vue中就可以啦！这样子就更加符合我们的日常书写习惯咯！

vue指令

<body>
  <div id="app">
    <!-- <h2>Hello world</h2> -->
  </div>

  <template id="temp">
    <h2>{{message}}</h2>
    <h2>{{count * 2}}</h2>
    <h2>{{message.split(' ').reverse().join(' ')}}</h2>
    <h2>{{getReverse()}}</h2>
    <h2 @click="toggle">{{flag ? '哈哈' : '嘻嘻'}}</h2>
  </template>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    Vue.createApp({
      template: '#temp',
      data: function () {
        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>

vue中还提供了一些非常好用的指令，除了我们之前所提到的，就是我们可以在template里的标签里加入js变量并且进行操作的。其中包括可以填入我们定义的变量，将变量进行运算，或者是字符串与数组之间的转换，甚至是直接进行方法的调用都是没有问题的。

实战小demo

    <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">
        <ul>
        </ul>
    </div>

    <script>
        fetch('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer')
            .then(res => res.json())
            .then((data) => {
                console.log(data);
                const list = data.data
                let html = ''
                list.forEach(item => {
                    const li = `<li class="item">
                      <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>`
                    html += li
                });
                document.querySelector('ul').innerHTML = html
            })
    </script>
</body>

我们这段代码首先采用原生js书写，大致实现效果如下：

Vue.js入门指南：轻松玩转前端，告别抓耳挠腮的JS烦恼

我们可以发现最终是实现了一个简单的歌手列表功能。接下来我们看看采用vue进行编写的方便。

<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>

  <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>

基本内容是相似的，我们的主体内容放在template里面，然后我们首先在vue里面放入这个list，然后created是当一个Vue实例被创建时，会触发生命周期钩子函数，这个函数允许你在组件生命周期的特定阶段执行代码。说白了就是里面的内容直接执行。因此我们在这里面去获取我们的singer对象数组，然后data先返回一个空数组，后面立马会变成我们的歌手对象数组。然后我们直接使用v-for="item in singer"对其内容进行遍历，然后分别进行赋值，最终就会实现我们的效果，是不是很方便呢？

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