【vue2.0入门】vue基本语法

引言

本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不重要，只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端，细节技巧性内容，可以在后续的开发工作中自行发现并掌握。

在上一篇【vue2.0入门】vue单文件组件中，我们已经对vue单文件各个部分做了解释，本篇将通过几个例子对常用vue语法进行讲解。

详细的vue语法内容参考：vue2语法教程

一、页面动态插值

在template中以 {{ 表达式 }} 的形式，将一个表达式的结果以文本形式动态插入页面标签中。

一般情况下，这个表达式可以是：

data中定义的变量
props中从父组件传入的属性
computed中对data变量或是props属性加工后的表达式

1. 一般用法

仍然使用 HelloWorld 组件，按照【vue2.0入门】vue单文件组件中介绍的vue2代码片段初始化一个vue组件模板。

<template>
  <div class="container">
    <div class="item">
      <span>父组件传值</span>
      <span>{{ msg }}</span>
    </div>
    <div class="item">
      <span>系统内存</span>
      <span>{{ memorySize }} B</span>
    </div>
    <div class="item">
      <span>系统内存格式化方式1：</span>
      <span>{{ (memorySize / 1024 / 1024 / 1024).toFixed(2) }} GB</span>
    </div>
    <div class="item">
      <span>系统内存格式化方式2：</span>
      <span>{{ memorySizeFormat }} GB</span>
    </div>
    <div class="item">
      <span>引用类型属性为空：</span>
      <span>{{ sysInfo.cpu || "AMD" }} </span>
    </div>
    <div class="item">
      <span>引用类型属性不存在：</span>
      <span>{{ sysInfo.gpu || "NVIDIA" }} </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: "hello world!",
    },
  },
  data() {
    return {
      memorySize: 8589935000,
      sysInfo: {
        cpu: "",
      },
    };
  },
  // 计算属性
  computed: {
    memorySizeFormat() {
      return (this.memorySize / 1024 / 1024 / 1024).toFixed(2);
    },
  },
};
// 其他代码
</script>

如上代码中：

系统内存格式化方式1 和 系统内存格式化方式2 的插值我用了两种方式，表达的意思是一样的。插值符号中可以利用变量编写表达式，最后呈现表达式执行结果的字符串形式，当表达式过于复杂时，可以考虑使用computed加工一下变量。computed就像是一个加工车间，输入的是data或是props的变量，输出一个表达式结果。 memorySizeFormat 就表示一条产品线，它等价于 (this.memorySize / 1024 / 1024 / 1024).toFixed(2) 这个生产过程的结果。当前组件的全局都可以通过 this.memorySizeFormat 访问到这个结果。
当需要向template插入的值取自一个 sysInfo 的属性，然而这个属性值为空或是不存在时，可以使用 || 符号添加默认值，使页面位置不为空。

效果如下：

在这里插入图片描述

二、计算属性computed

在页面动态插值部分我们已经展示了computed的基础使用方法。

在一些特殊情况下，computed并不依赖于data变量或是props变量，而是接收一个传入的参数做计算，具体写法如下

  // 计算属性
  computed: {
    memorySizeParams(){
      return (params)=>{
        return (params / 1024 / 1024 / 1024).toFixed(2);
      }
    }
  },

我们在 template 中可以按照函数传参的方式来调用，这里把 memorySize 作为参数传入函数内部，返回处理后的结果用于页面插值渲染。

    <div class="item">
      <span>系统内存格式化方式3：</span>
      <span>{{ memorySizeParams(memorySize) }} GB</span>
    </div>

三、动态class、style绑定

class的绑定主要是对一个 自定义class名 做一个是否为 真 的判断，style的绑定主要是对 css属性名 赋予动态的 属性值 。

写法上只需要在原有的class和style属性名前加上冒号 : 即可，例如 :class 、 :style 。此时这两个属性的值需要是一个表达式，而不是确定的值。（表达式可以是变量，可以是计算属性的返回值，也可以是通过代码运算后得到的值）

对于class的绑定：

多个类的动态绑定我会采用对象形式，可以在data中设置对象变量，属性名为你需要设置的 class名，属性值为Boolean，用于判断当前class名是否授予这个标签。在style中也要提前编写好对应 class名 的样式类。
你同样可以把这个对象直接搬到标签中，这和你使用data中的对象是等价的。需要要注意的是 双引号 " " 和 单引号 ' ' 的嵌套关系，避免一些报错。
当你需要动态添加单个class类，那可以不加 大括号 {}，直接编写表达式（需要该表达式最终返回一个class名）。我这里用了一个 三元运算符 返回一个确定的class名，感兴趣的百度一下这个运算符用法。

对于style的绑定：

和class的区别就是，style的绑定主要是对一个确定css属性赋予动态的值。通过表达式获取一个合规的css属性值。

<template>
  <div class="container">
    <!-- 动态class -->
    <div class="mainclass" :class="additionalClass">动态class测试</div>
    <div
      class="mainclass"
      :class="{ customBg: customStr == 'world', customColor: customNum == 1 }"
    >
      动态class测试
    </div>
    <div
      class="mainclass"
      :class="customStr == 'world' ? 'customBg' : 'customColor'"
    >
      动态class测试
    </div>
    <!-- 动态style -->
    <div class="mainclass" :style="additionalStyle">动态style测试</div>
    <div
      class="mainclass"
      :style="{
        background: customBackground,
        color: customColor,
      }"
    >
      动态style测试
    </div>
    <div class="mainclass" :style="{ color: customNum == 1 ? 'red' : 'blue' }">
      动态style测试
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //动态class
      additionalClass: {
        customBg: true,
        customColor: false,
      },
      customNum: 1,
      customStr: "hello",
      // 动态style
      additionalStyle: {
        background: "yellow",
        color: "blue",
      },
      customBackground: "yellow",
      customColor: "blue",
    };
  },


};
</script>
<style scoped>
.mainclass {
  margin-top: 20px;
}

.customBg {
  background: #f8a5d4;
}

.customColor {
  color: #0ade0d;
}
</style>

观察对比开发者工具中标签属性和代码，理解下动态绑定的过程

在这里插入图片描述

四、条件渲染与列表渲染

这两个语法在官网中有着较为详尽的介绍，参考：条件渲染、列表渲染

本篇针对列表渲染与条件渲染嵌套使用时如何处理。

在这里插入图片描述

这个问题常发生在一些场景中，例如从后端拿到了一组原始数据，数据中有个 A属性 代表该数据是否渲染。我们一般做法是提前根据这个 A属性 对数据进行筛选，然后在进行列表渲染，避免列表渲染和条件渲染同时使用。

举个例子：

<template>
  <div class="container">
    <!-- 列表渲染 -->
    <div class="mainclass" v-for="item in handleFruits" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 列表渲染
      Fruits: [
        { id: 1, name: "苹果", visible: true },
        { id: 2, name: "香蕉", visible: false },
        { id: 3, name: "橙子", visible: true },
        { id: 4, name: "桃子", visible: false },
      ],
    };
  },
  // 计算属性
  computed: {
    handleFruits() {
      return this.Fruits.filter((item) => item.visible);
    },
  },

};
</script>