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:特点是只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。

时间: 2024-08-29 10:24:28

Vue的十个常用指令的相关文章

Vue专题-js常用指令

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值. 123456789101112131415161718192021222324252627282930 <!DOCTYPE html><ht

Vue.js的常用指令

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,如下: v-if指令 v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1:v-if指令 v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下: v-if="expression"

【Vue常用指令】 &#474316;

目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 原文: http://blog.gqylpy.com/gqy/276 "@ *** Vue.js官方给自己的定义为==数据模版引擎==,并给出了一套渲染数据的指令.本文将详细介绍Vue.js的常用指令 导入vue.js https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min

vue 常用指令

vue常用指令: 1. v-model   一般用在表单元素   input-->  text  ---> v-model='msg' 2. 循环数组: <li v-for="(value,index) in arr"> {{value}}{{index}} </li> 3.循环json: <li v-for="(value,key) in json"> {{value}} {{key}} </li> 事件

vue.js介绍,常用指令,事件,以及制作简易留言版

一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 指令以v-xx 一片html代码配合上json,再new出来vue实例 个人维护项目 适合:移动端项目,小巧 angular--上手难 指令以ng-xxx 所有属性和方法都挂在$scope身上 angular由google维护 适合:pc端项目 共同点:不兼容低版本的IE 三.vue的基本使用 1.

Vue常用指令

vue中常用v-表示指令,下面总结一下常用的指令有哪些: 插入文本:v-text 相当于元素的innerText属性,必须是双标签 插入HMTL:v-html 相当于元素的innerHTML属性 循环:v-for v-for的使用,除了item属性,还有一些其他辅助属性.假设你现在循环的对象名字为students: 如果students是数组,还有index属性,如v-for="(item,index) in students"; 如果students是对象,还有value,key属性

vue 快速入门、常用指令(1)

1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs.org/ 英文:https://vuejs.org/ 官方文档:https://cn.vuejs.org/v2/guide/ 1.2 vue.js库的基本使用 在github下载:https://github.com/vuejs/vue/releases 在官网下载地址: https://cn.vu

Markdown语法 与 Hexo常用指令

Markdown语法 与 Hexo常用指令 Markdown Hexo Markdown是一种超轻量级的标记语言,常用的标记符号不超过十个,相对于更为复杂的HTML标记语言来讲,Markdown实在简便多了,因此学习成本也不是很大.更多关于Markdown的认识,我们可以参考:认识与入门 Markdown Markdown工具 关于支持Markdown的书写工具网络上有很多推荐,这里不再一一列举,常用的有: Mou:外文世界对 MarkDown 的热衷在 Mac 上可见一斑,目前虽是免费的,但功

Nginx系列--04HTTP常用指令及常用模块

前言 本篇总结Nginx中HTTP常用指令与一些常用的模块 一. HTTP协议常用指令 1. keepalive_timeout 语法 : keepalive_timeout timeout [header_timeout];解释 : 当第一个参数timeout的值不为零时,开启长连接.什么是长连接?我们知道应用层的HTTP协议使用的四层协议是tcp连接,而tcp连接非常重量级,如果用户请求一次资源就经历一次tcp的三次握手和四次挥手,伤不起呀!所以最好是能够重用TCP连接,用户请求一次资源后T