入门vue 首先从vue的指令开始学起。

vue的指令:

v-if  根据是否得到的布尔值进行是否显示。

v-show:根据是否得到的布尔值是否显示。不同的地方在于隐藏是style隐藏。

v-on 监听绑定的事件。可以省略为一个@符号。 一般在后面写的是事件名称。

如:

v-bind 单向绑定数据。或者样式。或者标签属性。

如:

使用isShow可以操作这个class是否在这个元素上显示。true或者false。

v-model 双向绑定数据。默认是使用value的这个属性的。只能用在input上。

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 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之一的更多相关文章

  1. 四、vue前端路由(轻松入门vue)

    轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...

  2. 三、vue前后端交互(轻松入门vue)

    轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...

  3. 二、vue组件化开发(轻松入门vue)

    轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...

  4. 一、vue基础语法(轻松入门vue)

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  5. 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)

    继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...

  6. python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)

    BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...

  7. 08Vue.js快速入门-Vue综合实战项目

    8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...

  8. 09Vue.js快速入门-Vue入门之Vuex实战

    9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...

  9. 07Vue.js快速入门-Vue路由详解

    对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. Vue框架的兼容性 ...

随机推荐

  1. 关于LVS负载均衡tcp长连接分发的解决思路

    虽然应用keepalived搞定了后端服务负载均衡和高可用性问题,但是在具体应用的时候,还是要注意很多问题.很多应用都用tcp或者http的长连接,因为建立tcp连接或者http连接开销比较大,而应用 ...

  2. CAS适用场景

    转载:http://www.jb51.net/article/86192.htm 下面小编就为大家带来一篇Java并发编程总结——慎用CAS详解.小编觉得挺不错的, 现在就分享给大家,也给大家做个参考 ...

  3. SQL 简介

    SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL? SQL 指结构化查询语言 SQL 使我们有能力访问数据库 SQL 是一种 ANSI 的标准计算机语言 编者注:ANSI,美国国家标 ...

  4. python获取数据网页数据并创建文件夹保存(基于python3.6)

    from urllib.parse import urljoin import urllib.request from bs4 import BeautifulSoup import os impor ...

  5. XPATH如何选择不包含某一个属性的节点?

    XPATH如何选择不包含某一个属性的节点?今天博主在写一个爬虫的时候就碰到了这个问题. 我们知道选择包含某一特定属性的节点,可以使用例如//tbody/tr[@class]来选择.那么不含某属性的节点 ...

  6. python入门学习:7.函数

    python入门学习:7.函数 关键点:函数 7.1 定义函数7.2 传递实参7.3 返回值7.4 传递列表7.5 传递任意数量的实参7.6 将函数存储在模块中 7.1 定义函数   使用关键字def ...

  7. Luogu5221 Product

    Luogu5221 Product 求 \(\displaystyle\prod_{i=1}^n\prod_{j=1}^n{\frac{\operatorname{lcm}(i,\ j)}{\gcd( ...

  8. 随机产生1-12的整数 , 根据产生整数输出一下该月份的季节信息(Math.random()和if语句的应用)

    package com.summer.cn; /** * @author Summer *随机产生1-12的整数 , 根据产生整数输出一下该月份的季节信息 */ public class Test04 ...

  9. selenium:解决页面元素display:none的方法

    在UI自动化测试中,有时候会遇到页面元素无法定位的问题,包括xpath等方法都无法定位,是因为前端元素被设置为不可见导致. 这篇博客,介绍下如何通过JavaScript修改页面元素属性来定位的方法.. ...

  10. Unity编辑器:基于NGUI的引用检测工具

    这里共享一个基于NGUI的引用检测工具.工具包括几个部分:Atlas/Sprite的引用查找:字库引用查找:UITexture引用查找:Component查找: 代码就不多介绍了,文章底部提供源码下载 ...