今天来正式开始 vue的学习,首当其冲的当然是数据的渲染。毕竟数据就是拿来看的,看看如果使用 vue来展示数据。

为什么渲染

俗话说 "人靠衣装马靠鞍", 那咱们的代码就是得靠 UI 来展现了。实现的代码规不规范,表不标准那是后话。但必须要好看~(开个玩笑,代码同样要注意整洁与优雅噢)

数据无论放在后台、数据库还是缓存,对于用户而言都不知情。用户能够感受到的,就是 UI,因此我们的数据是需要渲染在页面上显示出来给用户看的。

题外话:很久之前,老师就经常提起一句话,文不如字,字不如表,表不如图。细来想想,这句话也是可以放在程序设计中的,尤其是面向用户的层面。

如何渲染

在 vue 中,自带了模板渲染,而模板的语法也非常简洁易懂。

在此之前,先来看看要做哪些准备工作。

  • 渲染的语法是 {{ 要渲染的内容 }},要渲染的内容被两对花括号包了起来。
  • 要渲染的数据必须是 this 作用域可访问到的,简单的使用我们可以换一句话来约束:要渲染的数据请放在 data()中(此描述仅为简化在初学之时涉及知识过广的问题,现在只专注于渲染)。

简单渲染

我们首先在 data() 中定义我们需要渲染的字段,并给其赋一个初始值。

data() {
return {
msg: 'hello vue'
}
}

接下来在页面中,使用我们已经定义的字段,将其渲染在页面上。

{{ msg }}

代码如下:

<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'hello vue'
}
}
}
</script>

效果如下:

优点:

  • 代码简单

缺点:

  • 只能直接渲染

表达式渲染

当我们的数据需要某种单独的处理时,简单渲染就不能满足我们的要求了。

此时我们可以选择使用 "表达式" 进行渲染。

比如说在渲染列表项时,我们需要显示序号。而数组的下标是从 0 开始,但是显示序号又是从 1 开始的。

此时我们可以进行如下操作:

<h1>{{ index + 1 }}</h1>

此时所有的序号就是从 1 开始的了,很完美。

在文中例子基础上,在渲染的数据前面显示提示性文字 "标题:"。

<h1>{{ "标题:" + msg }}</h1>

效果如下:

优点:

  • 对数据进行多样化的处理

缺点:

  • 造成大量的硬编码,不利于维护和重构

  • 相同处理逻辑会产生大量重复代码。

函数渲染

使用表达式渲染适合某类需要特殊处理的数据,并且这个处理不具备通用性

那么针对表达式渲染的缺点,尤其是重复代码的问题,我们可以对其进行封装

现在我们有一个时间类型的字段:

data() {
return {
time: new Date()
}
}

看看简单渲染的效果:

这好像和我们想的不太一样啊,一般显示的格式是:

2019-07-01 20:54:45

这两个差距有点大啊,先用表达式渲染来处理一下达到要求的格式:

{{ time.getFullYear() + "-" + time.getMonth() + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() }}

这么长一串的代码,看看能否达到要求的效果:

不是很完美!月和日这里没有做填充处理,所以不是很好的匹配要求。

这个时候,你发现系统中还有 n 个页面需要格式化时间!!!难道要一个个复制?那可能下一个维护代码的人要掏出他30米长的大刀来找你了。

面对这种具备通用性或者是大量重复的处理逻辑,就可以将其抽成一个函数:

methods: {
formatTime: function(date) {
return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
}

这里要注意,在 vue中,函数需要定义在 methods对象内,才能在作用域内调用。

下面来看看效果,和上面的一样:

优点:

  • 逻辑可封装,利于维护和重构。

  • 写法简单。

缺点:

  • 都能用函数了,还要啥自行车。

能不能写js逻辑呢,不如说if?

百闻不如一见?让我们看看下面的代码会显示什么:

<h1>{{ if(msg == '1') return time }}</h1>

当设置 msg 的值为 1 的时候, 返回时间?

嗯,显示的内容很出乎意料,报错了~

毕竟 vue 官方文档在最开始就说了,这是一个简洁的模板语法,可以支持函数表达式渲染,已经能解决绝大多数的问题了。至于在渲染时带逻辑? 那可能需要好好看看 vue文档了,官方有对策噢。

浅入深出Vue:数据渲染的更多相关文章

  1. 浅入深出Vue:前言

    浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...

  2. 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  3. 浅入深出Vue:环境搭建

    浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...

  4. 浅入深出Vue:工具准备之WebStorm安装配置

    浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...

  5. 浅入深出Vue系列

    浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...

  6. 浅入深出Vue:第一个页面

    今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...

  7. 浅入深出Vue:代码整洁之封装

    深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...

  8. 浅入深出Vue:文章列表

    终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...

  9. 浅入深出Vue:数据绑定

    上一篇我们使用了简单的数据渲染,那么如果说我们想要动态渲染标签的 class 可以这么操作么? 为什么绑定 简单的数据渲染,包括表达式.函数在内.其实都只是在标签中渲染,如果遇到以下情况怎么办呢: 需 ...

随机推荐

  1. Android UI法宝的发展Android Action Bar Style Generator

    ActionBar它是3.0经UI设计规格.同时它是Google设计风格强烈推荐,如何做一个高速设计的眼睛ActionBar之.进一步,我们设置了阶段为一个入眼ActionBar模板吧,然后,Andr ...

  2. BCGControlBar介绍

    第一次翻译有诸多不正确的地方,还忘各位指正,谢谢! 英文原文:http://www.bcgsoft.com/bcgcontrolbarpro.htm BCGControlBar是MFC的一个扩展库其英 ...

  3. 使用GDI+生成KnownColor列表

    原文:使用GDI+生成KnownColor列表 在写这篇"GDI+与WPF中的颜色简析"之前,我试着使用GDI+生成KnownColor列表.现将关键代码贴出来吧. 最终效果图: ...

  4. Opencv决策树分类器应用

    机器学习在数据挖掘.计算机视觉.搜索引擎.医学诊断.证券市场分析.语言与手写识别等领域有着十分广泛的应用,特别是在数据分析挥着越来越重要的作用.在机器学习中,决策树是最基础且应用最广泛的归纳推理算法之 ...

  5. WPF:将Office文档、任意类型文件嵌入到EXE可执行文件中

    原文:WPF:将Office文档.任意类型文件嵌入到EXE可执行文件中 版权声明:本文为博主原创文章,未经博主允许可以随意转载 https://blog.csdn.net/songqingwei198 ...

  6. Socket编程实践(6) --TCPNotes服务器

    僵尸进程过程 1)通过忽略SIGCHLD信号,避免僵尸进程 在server端代码中加入 signal(SIGCHLD, SIG_IGN); 2)通过wait/waitpid方法.解决僵尸进程 sign ...

  7. C# 用XiliumCefGlue做浏览器,JS和C#相互调用

    原文:C# 用XiliumCefGlue做浏览器,JS和C#相互调用 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013564470/artic ...

  8. Java Swing编程接口(30)---列表框:JList

    列表框同时可以在信息呈现给用户的列表多个选项,使用JList能够建立一个列表框. package com.beyole.util; import java.awt.Container; import ...

  9. html5 命运之轮生产

    码,如以下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  10. 各种Message中文解释(一部分)

    函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.该函数是应用程序和应用程序之间进行消息传递的主要手段之一.    函数原型:LRESUL ...