我的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的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
随机推荐
- 纯离线部署本地知识库LLM大模型
纯离线部署本地知识库LLM大模型 一.下载离线大模型 下载的网址:https://hf-mirror.com/ deepseek qwen 相关的模型,只建议使用1.5B的,GGUF后缀的模型 推荐下 ...
- Web前端入门第 17 问:前端开发编辑器及插件推荐
HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. 虽然说 Web 前端开发用记事本也能玩,但正常的开发者绝不用记事本玩(大佬除外). 想想要用记事本扣一个淘宝.京 ...
- `go install`指令行为分析
分析go install [build flags] [packages]指令做了什么,如何实现安装GO软件,我们如何编写一个软件使得可以使用该指令安装自己编写的程序. 参考go官方文档 安装位置 $ ...
- 实验一:Tableau数据可视化入门
实验目的: 1.熟悉TableauDesktop使用方法. 2.通过Tableau软件来实现Excel中数据的基本可视化. 实验原理: Tableau是新一代商业智能工具软件,它将数据连接.运算.分析 ...
- 2D小游戏--猜对应卡牌(unity)
博客地址:https://www.cnblogs.com/zylyehuo/ 项目名称 guess_card_game 参考源码链接: https://www.manning.com/books/un ...
- PVE虚拟平台常用简明操作,三分钟搞定虚拟机更换安装配置
Proxmox Virtual Environment是一个基于QEMU/KVM和LXC的开源服务器虚拟化管理解决方案,本文简称PVE,与之相类似的虚拟化平台是VMWARE的ESXi虚拟平台,相较于商 ...
- centos7下扩展根分区(图文详解)
df -h 查看当前系统磁盘使用状况 fdisk -l 可以看见,我新添加了一块硬盘,大小为10G,新磁盘/dev/sdb fdisk /dev/sdb 对新的磁盘进行分区 在交互模 ...
- Netty源码—3.Reactor线程模型二
大纲 5.NioEventLoop的执行总体框架 6.Reactor线程执行一次事件轮询 7.Reactor线程处理产生IO事件的Channel 8.Reactor线程处理任务队列之添加任务 9.Re ...
- 【SpringMVC】使用 @RequestMapping 映射请求
使用 @RequestMapping 映射请求 Spring MVC 使用 @RequestMapping 注解为控制器指定可以处理哪些 URL 请求 在控制器的类定义及方法定义处都可标注 @Requ ...
- 【Linux】U-Boot 加载并启动 Linux 系统程序
U-Boot 加载并启动 Linux 系统程序 零.介绍 最近在玩一些嵌入式的开发板,在引导操作系统时需要用到U-Boot,故此研究一下. U-Boot(Universal Bootloader)是一 ...