Vue的十个常用指令
1.v-text:用于更新标签包含的文本,作用和{{}}的效果一样。
2.v-html:绑定一些包含html代码的数据在视图上。
3.v-show:用来控制元素的display属性,和显示隐藏有关。v-show指令的取值为true/false,当值为true时直接渲染,当值为false时渲染出来之后带有display:none属性。
4.v-if:控制元素是否被渲染出来。v-if指令的取值为true/false,当值为true时直接渲染,当值为false时直接不渲染。和v-show的区别为:如果需要频繁的切换显示/隐藏的,就用
v-show,如果运行后不太可能切换显示/隐藏的,就用v-if。
5.v-else:没有对应的值,但是要求前一个兄弟节点必须要使用v-if指令。v-if和v-else只有一个被渲染出来。
6.v-for:实现列表的渲染,可以用于data中存放的是array形式的数据之类。v-for除了可以迭代数组,还可以迭代对象和整数。
7.v-bind:用于动态绑定DOM元素的属性,常见的用法有:<a>标签里边的href属性,<img/>标签的src属性等。
8.v-on:相当于绑定事件的监听器,绑定的事件触发了,可以指定事件的处理函数。例如click事件等。
9.v-model:实现表单控件和数据的双向绑定,是最重要最常用的指令,一般用在表单输入。
10.v-once:特点是只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。
Vue的十个常用指令的更多相关文章
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- Vue专题-js常用指令
vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue常用指令】
目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- vue.js介绍,常用指令,事件,以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- vue 快速入门、常用指令(1)
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
随机推荐
- hibernate 中的拦截器EmptyInterceptor接口功能
Interceptor接口提供了从会话(session)回调(callback)应用程序(application)的机制, 这种回调机制可以允许应用程序在持久化对象被保存.更新.删除或是加载之前,检查 ...
- haproxy小结(一)基础概念篇
HAProxy是法国人Willy Tarreau个人开发的一个开源软件,目标是应对客户端10000以上的同时连接,为后端应用服务器.数据库服务器提供高性能的负载均衡服务.HAproxy可以实现基于TC ...
- Java--23种设计模式之decorator模式
装饰模式:装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案,提供比继承更多的灵活性.动态给一个对象增加功能,这些功能可以再动态的撤消.增加由一些基本功能的排列组合而产生的非常大量的 ...
- Linux编写Shell脚本入门
一. 一般编写shell需要分3个步骤 1. 新建一个脚本文件,并编写程序 vi hello.sh #!/bin/bash #注释 #输出 printf '%s\n' "Hello Worl ...
- Identity Server 4 原理和实战(完结)_单点登录实例(添加Flask客户端,Express.js的API)
idp授权资源的添加 如果下面哪个客户端想访问api2这个资源的话 就把它写上scope里面就可以了 nodeJS的客户端 python的库 MVC客户端分别访问API和API2 python客户端演 ...
- 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- C#基础:使用Thread创建线程
Thread类可以创建和控制线程,Thread类的构造函数重载为接受ThreadStart和ParameterizedThreadStart类型的委托参数.下面我们用一个例子来解释怎样用Thread类 ...
- Linux useradd 添加用户
在 linux 中,如果我们想添加一个用户,那么使用的命令如下: 用户管理命令: useradd 基础的命令 命令名称:useradd 命令的所在路径:/usr/bin/useradd 执行权限:ro ...
- https协议(4)
架构层次 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTT ...
- URAL1222
题意: 把n拆分成几个数,把这些数乘起来最大. 思路: 3越多越好. 对4,5特判一下,4的时候是2*2大,5的时候还剩个2,那么就是n%3=1的话,我们先拿个4,n%3==2的话就是先拿个2,后面把 ...