系列导航

<vue初体验> 一、 vue的引入和使用体验

<vue初体验> 二、 vue的列表展示

<vue初体验> 三、 vue的计数器

<vue初体验> 四、 vue的生命周期

一、     效果

利用v-for指令循环展现列表

使用谷歌浏览器动态改变数据展现自动变更

这里的app跟代码中let app = new Vue() 的app对应

二、代码结构

三、代码

02-Vue列表展示.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>02-Vue列表展示</title>

</head>

<body>

<div id="app">

  <ul>

    <li v-for="item  in books"> {{item}}</li>

  </ul>

</div>  

<script src="vue.js"></script>

<script>

  let app = new Vue({

    el: '#app',

    data: {

    	books: ['三国演义', '西游记', '水浒传']

    }

  })

</script>

</body>

</html>

四、代码解释

v-for指令 先学会用后面会详细讲解。

<vue初体验> 基础知识 2、vue的列表展示的更多相关文章

  1. Vue框架之基础知识

    在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...

  2. Vue初体验（一）

    每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: 可以看到在 V ...

  3. Vue和Element基础使用,综合案例学生列表实现

    知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...

  4. html基础知识2（有序无序列表，表格）2017-03-08

    摘要:php 基础知识2   重点:有序无序列表:<a>标签:<table>标签  内容容器 1.段落标签 <p></p> 注: 执行前后换行,并空一行 ...

  5. vue初体验-ES6 基础知识补充 let 和const

    本人水平有限,如内容有误,欢迎指正,谢谢. let  : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...

  6. vue初体验：实现一个增删查改成绩单

    前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方 ...

  7. Vue.js 运行环境搭建详解（基于windows的手把手安装教学）及vue、node基础知识普及

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  8. VUE初体验篇-安装

    现代前端框架大行其道,讲前端思想从操作dom的阶段,升级到操作数据的阶段.vue作为三大前端框架之一,其中平缓的学习曲线,让好多前端新手非常喜欢,应用也越来越广泛.虽然其他两个框架有facebook, ...

  9. vue初体验

    作为一个前端的小菜鸟,在平时的开发与学习中,除了要深入了解javascript 及 css 的各种特性,熟悉一门框架也是必不可少的.vue以其小巧,轻便,学习平滑等各种特性深受欢迎. 这里总结一下小菜 ...

  10. vue初学之node.js安装、cnpm安装、vue初体验

    1. 如果本机没有安装node运行环境,请下载node 安装包进行安装.地址:https://nodejs.org/en/ 2.装完,使用cmd命令行输入:node -v回车 如果输出版本号则成功. ...

随机推荐

  1. 精通TypeScript：打造一个炫酷的天气预报插件

    前言 ​ 随着数字化和信息化的发展,数据大屏使用越来越广泛,我们不仅需要展示数据,更需要以一种更加美观的方式展示数据.这就必然需要使用到各种图表组件,比如柱状图.饼图.折线图等等.但是有一些效果不太适 ...

  2. 一个Servlet如何实现增-删-改-查的业务逻辑

    一.业务场景 最近在教学生学习JavaWeb中的Servlet,它就是一个Java服务端的小程序,用来提供各种服务. 在讲解得时候,自己突然遇到一个问题,那就是现在没有使用什么SpringMvc框架, ...

  3. Qt+FFmpeg仿VLC接收RTSP流并播放

    关键词:Qt FFmpeg C++ RTSP RTP VLC 内存泄漏 摘要认证 花屏 源码 UDP 本系列原文地址. 下载直接可运行的源码,在原文顶部. 效果 产生RTSP流 比播放文件复杂一点是, ...

  4. 不用手动创建数据库，直接导入sql文件，就能生成数据库和数据表

  5. export详解

    linux下export命令详解 export:将自定义变量设定为系统环境变量(当前shell中有效) 功能说明:设置或显示环境变量. 语 法:export [-fnp][变量名称]=[变量设置值] ...

  6. 【Tinyui】极简跨平台桌面端小工具开发框架

    导航 Github Gitee 开发指南 用户手册 说明 在产品或项目工作中,可能会遇到需要给非开发人员或者客户提供简易的PC小工具,这些小工具通常用户交互比较简单:功能也不复杂:同时需要支持多平台以 ...

  7. 作为所有类的顶层父类，没想到Object的魔力如此之大！

    写在开头 在上一篇博文中我们提到了Java面向对象的四大特性,其中谈及"抽象"特性时做了一个引子,引出今天的主人公Object,作为所有类的顶级父类,Object被视为是James ...

  8. 中秋国庆花式玩法，用低代码DIY假日大屏“Vlog”

    ​​本文分享自华为云社区 <[云享热点]中秋国庆花式玩法,用低代码DIY假日大屏"Vlog"(内附节日福利)>,作者:华为云社区精选. 中秋.国庆双节将至,你的八天小长 ...

  9. 从中心到边缘，IoT正变为互联网之上的一张大网

    摘要:当我们从Cloud Native走到Edge Native,需要面临哪些挑战,它们各自的特点又是什么,IoT行业会迎来变革吗? 云原生.边缘计算,都是这两年的技术热词. 那么,当我们从Cloud ...

  10. 网络知识一箩筐：IP地址划分的那些知识点

    摘要:IP地址是怎么划分的呢?划分的依据是什么呢?本节小课将带你一起学习IP地址划分.子网划分.子网掩码.CIDR等网络基础概念,了解IP地址划分背后的那些故事. 首先,回忆一下,前面小课中我们有提到 ...