【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><divclass="mainclass":class="{ customBg: customStr == 'world', customColor: customNum == 1 }">动态class测试</div><divclass="mainclass":class="customStr == 'world' ? 'customBg' : 'customColor'">动态class测试</div><!-- 动态style --><div class="mainclass" :style="additionalStyle">动态style测试</div><divclass="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 {//动态classadditionalClass: {customBg: true,customColor: false,},customNum: 1,customStr: "hello",// 动态styleadditionalStyle: {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>

---

五、事件处理

关于vue2的事件处理语法，建议参考：事件处理

本篇介绍一些需要注意的地方：

• 在官方文档中绑定事件的方法为 v-on: ，日常工作中使用简写方式 @ ，例如：@click
• 如果你需要在事件处理器中访问原生事件对象，可以使用 $event 关键字作为参数传入调用的方法中。

    <div @click="handleClick($event)">

---

六、表单输入绑定

关于vue2的表单输入绑定语法，建议参考：表单输入绑定

本篇介绍一些需要注意的地方：

• 表单输入绑定主要用于需要用户输入信息或者选择信息的标签，主要是这三种： <input> 、<textarea> 及 <select> 。

---

七、总结

以上即为vue基础语法的内容，建议从官方文档入手，结合本篇介绍的需要注意的点一起学习。

本篇重点：

• 再次熟悉 表达式 这个概念
• 了解 computed 的传参用法
• 掌握列表渲染与条件渲染嵌套使用时的应对方法。
• vue的一些语法简写

接下来我们将学习vue工程引入第三方库，进行数据获取、路由配置、全局状态管理等。

再接再厉~