目录
- 引言
- 一、页面动态插值
-
- [1. 一般用法](#1. 一般用法)
- 二、计算属性computed
- 三、动态class、style绑定
- 四、条件渲染与列表渲染
- 五、事件处理
- 六、表单输入绑定
- 七、总结
引言
本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容,并不代表这部分内容不重要,只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端,细节技巧性内容,可以在后续的开发工作中自行发现并掌握。
在上一篇 【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工程引入第三方库,进行数据获取、路由配置、全局状态管理等。
再接再厉~