如何入门vue之一
入门vue 首先从vue的指令开始学起。
vue的指令:
v-if 根据是否得到的布尔值进行是否显示。
v-show:根据是否得到的布尔值是否显示。不同的地方在于隐藏是style隐藏。
v-on 监听绑定的事件。可以省略为一个@符号。 一般在后面写的是事件名称。
如:
v-bind 单向绑定数据。或者样式。或者标签属性。
如:
使用isShow可以操作这个class是否在这个元素上显示。true或者false。
v-model 双向绑定数据。默认是使用value的这个属性的。只能用在input上。
v-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model
不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用 input
事件。
但是input事件拿不到 键盘的keyCode 的值。 如果想要拿到keyCode的值需要使用keyup类似的事件。
v-html 将想要表达的标签显示出来
如:
v-text:可以将文本内容进行输出。
v-for :一般进行对象或者数组的遍历。
如:
当然v-for 也可以进行遍历数字和字符串。
如:
也可以使用of 去替代in
v-pre:用来跳过该标签不进行编译。
大量跳过不需要编译的标签会提升编译速度。提高性能。
v-once:只执行初始化的一次编译。后面无法进行改动。
如何入门vue之一的更多相关文章
- 四、vue前端路由(轻松入门vue)
轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...
- 三、vue前后端交互(轻松入门vue)
轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...
- 二、vue组件化开发(轻松入门vue)
轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...
- 一、vue基础语法(轻松入门vue)
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)
继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...
- python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)
BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- 09Vue.js快速入门-Vue入门之Vuex实战
9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...
- 07Vue.js快速入门-Vue路由详解
对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. Vue框架的兼容性 ...
随机推荐
- Java 过一下基础
点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...
- Django-rest-framework 接口实现 Serializer 使用
Django接口实现 DRF 使用 以下模块 实现 json数据 序列化 博客: https://www.cnblogs.com/liwenzhou/p/9959979.html Django RES ...
- WPF 使用Console.Write打印信息到控制台窗口中
WPF中使用Console.Write函数来打印信息是没有意义的,因为并没有给其输出字符的窗口.对于桌面程序来说,这是十分合理的,然而有时为了方便调试,在程序编写过程中打印出信息给程序员看还是必要的, ...
- spring boot 注解方式 idea报could not autowire
File-Project Structure 页面 Facets下删掉 Spring(直接右键Delete) 这个解答是对的.并不会降低安全性!!因为创建项目的时候,都是先创建空项目再创建web mo ...
- 【转】具透 | 你可能不知道,iOS 10 有一个中国「特供」的联网权限功能
9 月底,苹果正式在北京成立了苹果中国研发中心.近几年,我们也在每年更新的 iOS 系统中不断看到,苹果对中国市场的关照.从早前的九宫格输入法,到最近的骚扰电话拦截,都照顾了国内用户的需求. 在 iO ...
- Linux:Day4(下) 用户及组管理
Linux用户:Username/UID 管理员:root,0 普通用户: 1-65535 系统用户:1-499 对守护进程获取资源进行权限分配: 登陆用户:500+ 交互式登录: Linux组:Gr ...
- day1-pycharm使用
1.Ctrl+滑轮 字体大小 2.改变字体大小 3.开头模板 4.多行注释 ctrl+? 5.切换Python版本解释器
- SpringBoot + Shiro + shiro.ini 的踩坑记录
0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
- SpringBoot整合Mybatis使用注解或XML的方式开发
2018-6-4 补充mybatis-spring-boot注解的使用 1.导包 只需要再导入mysql+mybatis两个包 <dependency> <groupId>or ...
- zookeeper-操作与应用场景-《每日五分钟搞定大数据》
Zookeeper作为一个分布式协调系统提供了一项基本服务:分布式锁服务,分布式锁是分布式协调技术实现的核心内容.像配置管理.任务分发.组服务.分布式消息队列.分布式通知/协调等,这些应用实际上都是基 ...