2020-10-17

今天主要学习了Vue中以下几个指令的使用

  • v-bind
  • v-if
  • v-on
  • v-for
  • v-model

其中v-bind与v-model都是属于数据绑定,v-bind通常来说是绑定属性与data中的数据,而v-model较多在表单中使用,实现数据的双向绑定。

v-if的话和其他语言中的if使用差不多吧,当条件为true时,标签的内容就可以生效,即在页面上显示出来。

v-for循环加载对象列表中的对象,做一些相同的操作,不过要搞清楚v-for应该放在需要进行操作的标签内,不要搞错位置了。v-on就是一个

监听了,通常是接一个事件,比如点击,然后加上这个事件对应的处理操作了,可以直接写JS语句在后面,操作复杂可以通过函数代替。

比较有意思的是,在写v-for例子的时候,把v-for放在了ol标签中,出来的结果就是所有的对象前面的序号都是1,尴尬尴尬。


Vue 生命周期钩子

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • deforeDestory
  • destoryed

Examples: Demo1.html

Github:  https://github.com/jvxiao/vue-road

我的Vue之旅(1)的更多相关文章

  1. 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

  2. 我的Vue之旅 06 超详细、仿 itch.io 主页设计(Mobile)

    第二期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 仿 itch.io 平台主页. 我的主题 HapiGames 是仿 itch.io 的 in ...

  3. 我的Vue之旅、05 导航栏、登录、注册 (Mobile)

    第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...

  4. 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制

    第三期 · 使用 Vue 3.1 + TailWind.CSS + Axios + Golang + Sqlite3 实现简单评论机制 效果图 CommentArea.vue 我们需要借助js的Dat ...

  5. 我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang

    第四期 · 将部分数据存储至Mysql,使用axios通过golang搭建的http服务器获取数据. 新建数据库 DROP DATABASE VUE; create database if not e ...

  6. 我的Vue之旅 10 Gin重写后端、实现页面详情页 Mysql + Golang + Gin

    第三期 · 使用 Vue 3.1 + Axios + Golang + Mysql + Gin 实现页面详情页 使用 Gin 框架重写后端 Gin Web Framework (gin-gonic.c ...

  7. 我的Vue之旅 11 Vuex 实现购物车

    Vue CartView.vue script 数组的filter函数需要return显式返回布尔值,该方法得到一个新数组. 使用Vuex store的modules方式,注意读取状态的方式 this ...

  8. 我的Vue之旅、01 深入Flexbox布局完全指南

    花了几个小时整合的"A Complete Guide to Flexbox"最新版本,介绍了flexbox的所有属性,外带几个实用的例子. 传统布局.Flexbox 布局的传统解决 ...

  9. 我的Vue之旅、02 ES6基础、模块、路径、IO

    自定义模块 为什么要模块?模块化源代码能给我们带来什么好处? 试想一个巨无霸网购平台,在没有模块化的情况下,如果出现bug,程序员就要在几百万行代码里调试,导致后期维护成本上升,为了解决问题,模块化按 ...

  10. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

随机推荐

  1. 探秘Transformer系列之(9)--- 位置编码分类

    探秘Transformer系列之(9)--- 位置编码分类 目录 探秘Transformer系列之(9)--- 位置编码分类 0x00 概述 0x01 区别 1.1 从直观角度来看 1.2 从模型处理 ...

  2. 单页应用(SPA)是什么?

    来源:https://zhuanlan.zhihu.com/p/648113861 概述 单页应用(SPA,Single Page Application)是一种网页应用或网站的设计模式,它在浏览器中 ...

  3. Windows编程----进程的当前目录

    进程的当前目录 Windows  Api中有大量的函数在调用的时候,需要传递路径.比如创建文件,创建目录,删除目录,删除文件等等.创建文件的APICreateFile做比喻,如果我们要创建的文件路径不 ...

  4. k8s 手动更新 seldon core ca证书

    前言 seldon core 报错:x509: certificate has expired or is not yet valid: current time 这是因为 seldon core 默 ...

  5. linux测试url的访问速度

    在Linux中,你可以使用curl命令来测试URL的访问速度.curl是一个强大的命令行工具,可以用于文件传输和测试网络连接. 以下是使用curl测试URL访问速度的步骤: 打开终端或命令行界面. 输 ...

  6. SQL INSERT批量插入方式

    1.常规INSERT写法   INSERT INTO ... VALUES (...); INSERT INTO 表名( `字段1`, `字段2`) VALUES ('字段1的值', '字段2的值') ...

  7. Delphi 判断操作系统是32位或是64位

    function IsWin64: Boolean; var Kernel32Handle: THandle; IsWow64Process: function(Handle: Windows.THa ...

  8. 保存深度值——小端序,位数,Android,Huawei AR engine

    保存深度值--小端序,位数,Android accuireDepthImage 华为Mate Pro系列基本上前置摄像头都是有TOF的,也就是能够得到场景的深度信息,在华为的AR engine里提供了 ...

  9. 基于.NetCore开发 StarBlog 番外篇 (2) 深入解析Markdig源码,优化ToC标题提取和文章目录树生成逻辑

    前言 虽然现在工作重心以AI为主了,不过相比起各种大模型的宏大叙事,我还是更喜欢自己构思功能.写代码,享受解决问题和发布上线的过程. 之前 StarBlog 系列更新的时候我也有提到,随着功能更新,会 ...

  10. 卧槽!C 语言宏定义原来可以玩出这些花样?高手必看!

    大家好啊!我是小康. 今天我们来聊一个听起来枯燥但实际上暗藏玄机的话题 -- C 语言的宏定义. 啥?宏定义?那不就是个简单的替换工具吗? 兄dei,如果你也是这么想的,那可就大错特错了!宏定义在 C ...