1.v-html

  用于输出真正html,而不是纯文本。

2.v-text

  输出纯文本。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html与v-text的区别</title>
<script src="js/vue.min.js"></script>
</head>
<body id="body">
<div v-html="showHTML"></div>
<div v-text="showText"></div>
<script>
var ve=new Vue({
el:'#body',
data:{
showHTML:'<b><i>这里我们输出HTML,HTML标签将会不会显示,并且文本将会按照标签类型显示</i></b>',
showText:'<b>这里我们输出纯文本,HTML标签将会在浏览器上显示</b>'
}
})
</script>
</body>
</html>

3.v-show

  官方文档的定义是:将元素的显示设置为none或其原始值,具体取决于绑定值的真实性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show的使用</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div v-show="true" style="width:200px;height:200px;background:red;" id="app"></div>
<script>
var ve=new Vue({
el:'#app'
})
</script>
</body>
</html>

这里要说明一下v-show=“true”是显示,v-show="false'或者v-show="none'是隐藏,还有el:"#app"不可以省去,否则v-show会失效。

4.v-bind

  用于html属性的数据绑定。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.new.js"></script>
<style>
.toGreen{background: green;}
.toRed{background: red;}
.toYellow{border:1px solid black;}
</style>
</head>
<body>
<div v-bind:class="{toGreen:isGreen,toRed:isRed}" style="width:200px;height:200px;" id="whatColor" v-on:click="changeColor()" class="toYellow"></div>
<script>
var ve=new Vue({
el:'#whatColor',
data:{
isGreen:true,
isRed:false
},
methods:{
changeColor:function(){
ve.isGreen=!ve.isGreen;
ve.isRed=!ve.isRed
}
}
})
</script>
</body>
</html>

3.v-on

  用于监听DOM事件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="v-on" v-on:click="changeStatus">
{{message}}
</div>
<script>
var vOn=new Vue({
el:'#v-on',
data:{
message:'我喜欢vue.js'
},
methods:{
changeStatus:function(){
if(this.message=='我喜欢vue.js')
{
this.message='我不喜欢vue.js'
}
else
{
this.message="我喜欢vue.js"
}
}
}
})
</script>
</body>
</html>

  注意:只有v-on和v-bind可以接参数,在指令后面用冒号指明属性和值绑定。

4.v-model

  用于表单输入与应用状态的双向数据绑定。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="v-model">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var vModel=new Vue({
el:'#v-model',
data:{
message:''
}
})
</script>
</body>
</html>

5.v-if

  v-if接收bool类型。true的话则生成html,false则不生成。或者直接将元素remove掉。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="v-if">
<p v-if="seen">我在闪烁</p>
</div>
<script>
var vIf=new Vue({
el:'#v-if',
data:{
seen:true
},
methods:{
change:function(){
if(this.seen)
{
this.seen=false;
}
else
{
this.seen=true;
}
}
}
})
setInterval(vIf.change,)
</script>
</body>
</html>

6.v-pre

跳过瓷元素及其子元素,跳过大量没有指令的节点加快编译速度。

7.v-cloak

官方文档:该属性保留在元素上,直到关联的ViewModel完成编译。结合CSS规则,例如[v-cloak] { display: none },该指令可用于隐藏未编译的胡须绑定,直到ViewModel准备好。

在vm未加载之前,html中的插值会存在,影响页面美观。在元素上添加v-cloak并在css中写入[v-cloak]{display:none;},vm加载之前,该元素一直隐藏,v-cloak指令存在,vm加载之后,元素显示,v-cloak指令消失。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<style>
[v-cloak]{display: none;}
</style>
</head>
<body>
<div v-cloak>{{message}}</div>
</body>
</html>

8.v-el

在vue2.0之前的版本使用,vue2.0之后用ref代替。这里是用vm.$$.XX获取带v-el指令的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
</head>
<body id="body">
<div v-el="hi" style="width:100px;"></div>
<script>
var vm=new Vue({
el:'#body'
})
alert(vm.$$.hi.style.width)
</script>
</body>
</html>

9v-for

用于渲染列表项。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for得使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<ul id="ul">
<li v-for="(item,index) in items">
{{item.message}}-{{index}}
</li>
</ul>
<script>
var oUl=new Vue({
el:'#ul',
data:{
items:[
{message:'Foo'},
{message:'Bar'}
]
}
}) </script>
<ul id="ul1">
<template v-for="item in items">
<li>{{item.msg1}}</li>
<li>{{item.msg2}}</li>
</template>
</ul>
<script>
var oUl=new Vue({
el:'#ul1',
data:{
items:[
{msg1:'1-1',msg2:'1-2'},
{msg1:'2-1',msg2:'2-2'},
{msg1:'3-1',msg2:'3-2'},
]
}
})
</script>
</body>
</html>

vue.js指令总结的更多相关文章

  1. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  2. 第2章-Vue.js指令

    一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

  3. vue.js指令v-model实现方法

    原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...

  4. Vue.js指令实例

    v-if  v-else  v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...

  5. vue.js自定义指令详解

    写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...

  6. Vue.js简介及指令

    1.Vue.js的特点 Vue.js是一个Javascript MVVM(Model-View-ViewModel)库,与传统Jquery的区别在于,Vue.js舍弃了繁杂的DOM操作, 如取DOM值 ...

  7. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  8. 一份不错的vue.js基础笔记!!!!

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

  9. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

随机推荐

  1. 51nod 贪心算法题集

    2070 最小罚款: 题意:初始有n元,每个任务有2个参数:t和w,<=t时刻前完成任务才可避免造成损失w.问:如何安排才能尽可能避免损失?一个任务执行时间是一个单位时间. 分析:任务按时间排个 ...

  2. PyQt5--GridLayout

    # -*- coding:utf-8 -*- ''' Created on Sep 13, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...

  3. 页面元素固定在页面底部的纯css代码(兼容IE6)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. saltstack二次开发(三)

    以下代码实现的功能: 通过saltstack的httpapi在minion上安装软件. vim saltapi.py #!/usr/bin/env python # -*- coding: utf-8 ...

  5. Oracle_spatial的空间操作符介绍

    空间操作符 一.主要空间操作符 1.SDO_FILTER SDO_FILTER(geometry1, geometry2, param); 判断两个几何体是否有相交 SELECT c.mkt_id, ...

  6. BZOJ3105:[CQOI2013]新Nim游戏(线性基,贪心)

    Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴.可以只拿一根,也可以拿走整堆火柴 ...

  7. 11.C++和C的区别,什么是面向对象

    c++封装更好,调用接口,c调用子函数 1.首先C和C++在基础语句上没有太大区别,c++在c基础上改进,兼容大部分c的语法结构.c++面向对象,c面向过程. 2.新增new和delete的语法,引用 ...

  8. Python2.7-io

    io 模块,用于处理流数据,在 python2 下,是内置 file 对象的另一种选择,在 python3 下,此模块是默认的文件和流数据的接口. 1.模块继承关系 IOBase--RawIOBase ...

  9. 清北学堂寒假集训DAY1

    第一天,上午讲了些基本的技巧和简单算法,主要就是适应这里. 中午跑到食堂吃了顿“饭”(我并没有挖苦233333),然后回宿舍休息休息 因为 迎接我们的是模拟啊啊啊啊啊阿 下午题一发下来,并没有想象中的 ...

  10. 七,ESP8266-UDP(基于Lua脚本语言)

    https://www.cnblogs.com/yangfengwu/p/7533302.html 那天朋友问我为什么有UDP Sever 和 UDP Client   ,,我说:每个人想的不一样,设 ...