2021年，重学Vue.js之基本语法篇

为什么会有这篇？

话说现如今都2021年了，Vue3都已经发布了，再来写这篇网络上随处可见的文章意义在哪里呢？其实在写之前我也一直在思考这个问题，最后我得出的原因主要有以下几点：

• 1、用vue也做过一些项目，虽然很多功能都能实现，但是总感觉差点意思，没有形成一种知识体系
• 2、日常开发多数围绕业务展开，没有细细去品味框架文档，导致有的东西可能时间长了会模糊
• 3、学好Vue3那么熟练掌握基础也是必不可少的
• 4、正所谓温故而知新，虽然基础的东西可能看似简单，但是通过自己的想法输出出来，并且时长回顾，我认为还是会有意想不到的收获的。

基于以上几点，我决定还是写几篇结合Vue文档展开的一些文章，主要是要做到知识的梳理，形成一种体系，顺便打磨一下作文水平，何乐而不为呢～。

思维导图

开始任何一段文字前，我期望有一张思维导图来说明一下文章的内容脉络，这样不仅利于文章的编写，也很利于记忆。

开始正文

在开始正文之前，需要说明一下，文章中每一个字都是我逐一编写的，难免会有疏漏或者错误，也恳请大家的理解，并期望留言区予以批评指证。本文主要介绍关于模版语法相关，因此不会过多涉及到js逻辑方面。

插值表达式

原生html元素的内容部分，如果你要用一个变量表示，可能需要编写js语法动态设置，但是在Vue中不用，你只需要显示的声明你的数据，并通过双大括号语法来使用变量，并且这个标签部分的内容在未来会随着数据的变化发生变化

• v-once

执行一次性地插值，当数据改变时，插值处的内容不会更新

• v-html

默认的html原生文本无法用插值表达式表示，因此使用v-html的形式可以让浏览器显示解析html

<div id="app">
    <h1>{{message}}</h1>
    <h2 v-once>{{message}}</h2>
    <p v-html="rawhtml"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'hello vue',
            rawhtml:'<h3> this is html </h3>'
        }
    })
</script>

元素属性（即属性绑定）

html原生标签就能提供很多标准的属性给我们使用，比如title属性,在vue中，你可以这样动态的使一个属性的值是一个变量或者表达式。

<div id="app">
    <h1 v-bind:>hello vue</h1>
    <h1 :>hello vue</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            title:'this is h1 title attr'
        }
    })
</script>

class 和 style

在编写模版的时候，通常经常会给元素加上类名或者行内样式。这两个作为元素的属性，当然也支持动态绑定一个变量或者表达式，只是Vue对其做了加强而已

• class

  1、对象语法

  当对象的值为Truthy 的时候，就给元素绑定上对应key值的class,例如： red 和 yellow 将绑定到class上

  <p :class="{red:true,blue:false,yellow:1}">我是段落</p>
  

  2、数组语法

  数组语法就会一股脑的绑定上数组元素所对应的值，也就是说数组元素可以是普通字符串，也可以是变量或者表达式

  3、用在自定义组件上

  当作用在一个自定义组件的使用上时，这个class将会作用在这个组件模版的最外层元素傻姑娘

• style

  sytle也支持对象语法以及数组语法，对象语法这个对象你应该写成类似jQuery里面编写css的形式，而数组语法每个数组可以是前面对象语法的集合。例如：

<div id="app">

        <p :style="styleObj">看看段落的style 对象语法</p>
        <p :style="[ styleObj1,styleObj2]">看看段落的style 数组语法</p>
        

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                styleObj:{
                    fontSize:'40px',
                    color:'red'
                },
                styleObj1:{
                    fontSize:'20px',
                    color:'green'
                },
                styleObj2:{
                    fontWeight:'bold',
                    backgroundColor:'red'
                }
            }
        })
    </script>

计算属性VS侦听器

• 计算属性

有时候，一个插值或者是一个属性绑定依赖于多个值或者是一些复杂的条件，如果你在模版中编写大量的表达式，可能会很晕。之前我就看到过一个同时写了大量条件语句，并且直接在行内写。

• 侦听器

有时候可能需要监听一些属性的变化而执行某些操作，比如网络请求，这个时候就需要编写一个侦听器来处理了

    <div id="app">
      <p>{{title}}</p>
      <p>{{info.time}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          city: "wuhan",
          age: 16,
          sex: "女",
          info:{
              time:60
          }
        },
        computed:{
            title:function(val){
                if(this.city === 'wuhan' && this.age  === 16 && this.sex === '女'){
                    return '武汉妙龄少女'
                }else{
                    return '武汉女汉子'
                }
            }
        },
        mounted:function(){
            setInterval(() => {
                this.info.time--;
            }, 1000);
        },
        watch:{
            info:{
                handler:function(val,oldval){
                    console.log(val,oldval);
                    // todo something
                },
                deep:true,
                immediate: true
            }
        }
      });
    </script>

二者的区别：

• 计算属性有缓存性，计算所得的值如果没有变化不会重复执行
• 侦听器适合执行异步操作或较大开销操作的情况

条件渲染

• v-if v-else v-else-if 可以实现日常条件渲染

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

• key值来处理一些条件渲染的问题，vue 不会傻瓜式的全部重新渲染，而是会尽可能的高效渲染，例如：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

当登录类型发生变化的时候，默认情况下 vue会复用这个表单项，有时候你可能期望切换登录方式，表单项需要独立重新清空渲染，此时你只需要为这个表单项设置不同的key即可

• v-show & v-if

v-show无论其条件是真还是假都会做出渲染，而v-if只有在条件为真的时候才会去渲染元素。所以一般来说，如果会频繁切换的模版代码段，你可能更应该使用v-show,毕竟v-if会频繁的对条件块内的事件监听器和子组件适当地销毁和重建。

• v-for & v-if

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。所以不推荐二者一起使用。因为你可以想象一下，每次循环都会先循环，然后在判断，这样也是一种性能的损耗

循环输出

在模版里面，可能你经常需要循环输出一些item项，此时你就需要用到列表循环了。例如：

<div id="app">
  <p class="item" v-for="item of itemList">{{item}}</p>
  <p v-for="item of message">{{item}}</p>
  <p v-for="item of 10">{{item}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "helloworld",
      itemList: ["昨天", "今天", "明天"],
    },
  });
</script>

列表渲染不仅仅是作用于数组，他还能循环遍历出object，实际上，这个指令也可以迭代字符串、数字等。

• 在使用列表渲染循环输出的时候，我们推荐并强制要求你必须为没一个item项指定一个唯一的key值。因为key主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。并且有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

• 数组变更的几个变异方法，Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

用户输入之双向绑定

你可以用 v-model 指令在表单 <input> 、 <textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上是语法糖。它将转换为输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<input v-model="username" type="text" v-on:keydown.enter="addUser"/>

由于此类篇幅较长，建议直接查看官方文档：表单输入

事件处理

事件是前端DOM非常核心的一块内容，传统的事件处理，你可能需要先获取元素，在绑定事件，并编写事件处理函数。有时候你可能还需要针对不同的情况对事件的行为以及触发场景做一些约束，在原生开发中，通常这是一件很复杂的流程。那么在Vue里面，你只需要使用v-on指令来对对应的元素做事件绑定，并通过修饰符来控制一些行为约束即可。Vue为了解决一系列事件处理的流程，它给我们做了一套完善的简单的事件处理方案。 具体文档事件处理 这里仅仅需要记住一句话：

当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除（除非是你自己绑定的，比如一些浏览器窗口的事件等）。你无须担心如何清理它们。

模版到底是什么？

实际上前面可能讲的一些东西官方文档都有，这里只是做一个总结归纳。最后这一块我想说的是，究竟我们在编写类似html模板的时候到底是在干什么。实际上这也是本文最后想要弄明白的一个问题。可能聪明如你会想到说Vue肯定会帮我们编译解析我们写的模版，没错确实如此，实际上我们写的这些html 最终都会转换称为render函数，并且转换成为虚拟DOM.最后再挂载

<div id="app">
   <!-- <p>{{message}}</p> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  var app = new Vue({
    // el: "#app",
    data: {
      message: "helloworld",

    },
    render(){
        with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',[_v(_s(message))])])}
    }
}).$mount('#app')

console.log(app.$options.render);
</script>

最后

最后，Vue.js基本的语法篇以及其最终的本质讲完了，可能这里并非是你期待的那样完善，实际上我在写到一半的时候也觉得看这里还真不如看官方文档。但是作为一篇总结归纳型的文章，我觉得还是把一些我认为重要的基础篇章讲清楚了。接下来，可能我会仔细规划一下关于组件方面的东西以及后面的路由和vuex相关，以及一些跟vue组件化开发相关的一些技术类文章。总的来说，还是希望2021年，一起共勉吧。如果想一起写点文章的朋友可以相互关注并监督，相互鞭策相互成长，谢谢～！