我的Vue之旅(1)
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)的更多相关文章
- 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)
什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...
- 我的Vue之旅 06 超详细、仿 itch.io 主页设计(Mobile)
第二期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 仿 itch.io 平台主页. 我的主题 HapiGames 是仿 itch.io 的 in ...
- 我的Vue之旅、05 导航栏、登录、注册 (Mobile)
第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...
- 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制
第三期 · 使用 Vue 3.1 + TailWind.CSS + Axios + Golang + Sqlite3 实现简单评论机制 效果图 CommentArea.vue 我们需要借助js的Dat ...
- 我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang
第四期 · 将部分数据存储至Mysql,使用axios通过golang搭建的http服务器获取数据. 新建数据库 DROP DATABASE VUE; create database if not e ...
- 我的Vue之旅 10 Gin重写后端、实现页面详情页 Mysql + Golang + Gin
第三期 · 使用 Vue 3.1 + Axios + Golang + Mysql + Gin 实现页面详情页 使用 Gin 框架重写后端 Gin Web Framework (gin-gonic.c ...
- 我的Vue之旅 11 Vuex 实现购物车
Vue CartView.vue script 数组的filter函数需要return显式返回布尔值,该方法得到一个新数组. 使用Vuex store的modules方式,注意读取状态的方式 this ...
- 我的Vue之旅、01 深入Flexbox布局完全指南
花了几个小时整合的"A Complete Guide to Flexbox"最新版本,介绍了flexbox的所有属性,外带几个实用的例子. 传统布局.Flexbox 布局的传统解决 ...
- 我的Vue之旅、02 ES6基础、模块、路径、IO
自定义模块 为什么要模块?模块化源代码能给我们带来什么好处? 试想一个巨无霸网购平台,在没有模块化的情况下,如果出现bug,程序员就要在几百万行代码里调试,导致后期维护成本上升,为了解决问题,模块化按 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
随机推荐
- 探秘Transformer系列之(9)--- 位置编码分类
探秘Transformer系列之(9)--- 位置编码分类 目录 探秘Transformer系列之(9)--- 位置编码分类 0x00 概述 0x01 区别 1.1 从直观角度来看 1.2 从模型处理 ...
- 单页应用(SPA)是什么?
来源:https://zhuanlan.zhihu.com/p/648113861 概述 单页应用(SPA,Single Page Application)是一种网页应用或网站的设计模式,它在浏览器中 ...
- Windows编程----进程的当前目录
进程的当前目录 Windows Api中有大量的函数在调用的时候,需要传递路径.比如创建文件,创建目录,删除目录,删除文件等等.创建文件的APICreateFile做比喻,如果我们要创建的文件路径不 ...
- k8s 手动更新 seldon core ca证书
前言 seldon core 报错:x509: certificate has expired or is not yet valid: current time 这是因为 seldon core 默 ...
- linux测试url的访问速度
在Linux中,你可以使用curl命令来测试URL的访问速度.curl是一个强大的命令行工具,可以用于文件传输和测试网络连接. 以下是使用curl测试URL访问速度的步骤: 打开终端或命令行界面. 输 ...
- SQL INSERT批量插入方式
1.常规INSERT写法 INSERT INTO ... VALUES (...); INSERT INTO 表名( `字段1`, `字段2`) VALUES ('字段1的值', '字段2的值') ...
- Delphi 判断操作系统是32位或是64位
function IsWin64: Boolean; var Kernel32Handle: THandle; IsWow64Process: function(Handle: Windows.THa ...
- 保存深度值——小端序,位数,Android,Huawei AR engine
保存深度值--小端序,位数,Android accuireDepthImage 华为Mate Pro系列基本上前置摄像头都是有TOF的,也就是能够得到场景的深度信息,在华为的AR engine里提供了 ...
- 基于.NetCore开发 StarBlog 番外篇 (2) 深入解析Markdig源码,优化ToC标题提取和文章目录树生成逻辑
前言 虽然现在工作重心以AI为主了,不过相比起各种大模型的宏大叙事,我还是更喜欢自己构思功能.写代码,享受解决问题和发布上线的过程. 之前 StarBlog 系列更新的时候我也有提到,随着功能更新,会 ...
- 卧槽!C 语言宏定义原来可以玩出这些花样?高手必看!
大家好啊!我是小康. 今天我们来聊一个听起来枯燥但实际上暗藏玄机的话题 -- C 语言的宏定义. 啥?宏定义?那不就是个简单的替换工具吗? 兄dei,如果你也是这么想的,那可就大错特错了!宏定义在 C ...