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. HTTPS 与 HTTP 的区别在哪?

    HTTP与HTTPS作为互联网数据传输的核心协议,其通信机制与安全特性深刻影响着现代网络应用的可靠性与用户体验.本文将解析两者的通信流程.安全机制及核心差异. 一.HTTP的通信机制 先来看看HTTP ...

  2. Qt源码阅读(二) moveToThread

    Qt 源码分析之moveToThread 这一次,我们来看Qt中关于将一个QObject对象移动至一个线程的函数moveToThread 目录 Qt 源码分析之moveToThread Qt使用线程的 ...

  3. ubuntu 刷新 hosts 命令

    systemd-resolved 服务 sudo systemctl restart systemd-resolved 这个命令将重启 systemd-resolved 服务,该服务负责 DNS 解析 ...

  4. Failed to start MySQL 8.0 database server.

    原因 在mysql错误日志里出现:The innodb_system data file 'ibdata1' must be writable,字面意思:ibdata1必须可写 查看日志报错,文件夹无 ...

  5. 『Plotly实战指南』--柱状图绘制基础篇

    柱状图作为最基础的数据可视化形式之一,能直观展示不同类别数据的对比关系,适用于一下的场景: 比较不同类别之间的数据大小,如不同产品的销售额对比. 展示数据的分布情况,如各年龄段的人口数量分布. 分析时 ...

  6. PVE常用命令

    1.查看集群下的节点信息 root@pve63-node172:~# pvecm nodes Membership information ---------------------- Nodeid ...

  7. CentOS——磁盘分区

    Centos7-磁盘分区磁盘层次结构–磁盘分区方法情况一:磁盘分区–磁盘小于2T fdisk情况二:磁盘分区–磁盘大于2T centos6:parted centos7:fdisk一.磁盘小于2T情况 ...

  8. 2025年Anaconda官网最新版本Anaconda下创建虚拟环境,并在新创建的虚拟环境下一次性安装多个软件包的经验总结

    一.为了使用tensorflow软件包中的tensorboard软件包工具,在python==3.12.8环境下创建虚拟环境pytorch,使用命令行如下.1.1 使用Anaconda prompt, ...

  9. Codeforces Round 1016 (Div. 3)题解

    题目地址 https://codeforces.com/contest/2093 锐评 在所有题意都理解正确的情况下,整体难度不算太难.但是偏偏存在F这么恶心的题意,样例都不带解释一下的,根本看不懂题 ...

  10. MySQL 中 DELETE、DROP 和 TRUNCATE 的区别是什么?

    MySQL 中 DELETE.DROP 和 TRUNCATE 的区别 在 MySQL 中,DELETE.DROP 和 TRUNCATE 都是常用于删除数据的操作,但它们在功能.性能.用途和实现方式上有 ...