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

目录

引言

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

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

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


一、页面动态插值

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

一般情况下,这个表达式可以是:

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

1. 一般用法

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

html 复制代码
<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变量,而是接收一个传入的参数做计算,具体写法如下

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

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

html 复制代码
    <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属性值。
html 复制代码
<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属性 对数据进行筛选,然后在进行列表渲染,避免列表渲染和条件渲染同时使用。

举个例子:

html 复制代码
<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 关键字作为参数传入调用的方法中。
html 复制代码
    <div @click="handleClick($event)">

六、表单输入绑定

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

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

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

七、总结

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

本篇重点:

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

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

再接再厉~

相关推荐
奔跑草-3 分钟前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与14 分钟前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun14 分钟前
CSS样式实现3D效果
前端·css·3d
咔咔库奇23 分钟前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青1 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图1 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
fakaifa1 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
夜色呦1 小时前
掌握ECMAScript模块化:构建高效JavaScript应用
前端·javascript·ecmascript
peachSoda71 小时前
随手记:简单实现纯前端文件导出(XLSX)
前端·javascript·vue.js
大叔是90后大叔1 小时前
vue3中查找字典列表中某个元素的值对应的列表索引值
开发语言·前端·javascript