Vue 指令总结大全
1.v-text
v-text主要用来更新textContent。
<p>{{msg}}</p>与<p v-text="msg2"></p>二者效果相等
<body>
<div id="app">
<p>{{msg}}</p>
<p v-text="msg2"></p>
</div>
<script type="text/javascript">
var classs = new Vue({
el:"#app",
data:{
msg:"这是第一段文本",
msg2:"这是第二段文本"
}
})
</script>
</body>
2. v-html
会解析标签，等同于js的innerHTML，会将实例的内容全部替换，慎重使用。
<div id="vue">
<div v-html="add"></div>
</div>
var vueApp = new Vue({
// 挂载点
el:"#vue",
data:{
add:"<h1 class='info'>您好！VUE</h1>",
}
})
3.v-model ！！！！！
数据双向绑定，会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
- 比如在input框里输入什么，在下面就会显示相应的东西
<body>
<div id="app">
<input type="text" name="" v-model="msg" />
<p>{{msg}}</p>
</div>
<script type="text/javascript">
var classs = new Vue({
el:"#app",
data:{
msg:""
}
})
</script>
</body>
v-model修饰符
（1）lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
<input v-model.lazy="msg">
（2）number
自动将用户的输入值转化为数值类型
<input v-model.number="msg">
（3）trim
自动过滤用户输入的首尾空格
<input v-model.trim="msg">
4.v-once
只会渲染一次，实例的子节点将会被视为静态类容跳过，可用那个又优化性能
比如：在input框输入值并用v-model实现数据双向绑定，而我想突出原始值与变化的值的对比
<div id="app">
<input type="text" name="" v-model="msg" />
<p>{{msg}}</p>
<p v-once>{{msg}}</p>
</div>
<script type="text/javascript">
var classs = new Vue({
el:"#app",
data:{
msg:"这是我的原始值"
}
})
</script>
5.v-on
v-on主要用来监听dom事件（onclick,onchange,onkeyup等等），以便执行一些代码块。表达式可以是一个方法名。
简写为：【 @ 】
<div id="app">
<button @click="myclick"></button>
</div>
<script>
var app = new Vue({
el: '#app',
data:{},
methods:{
myclick:function(){
alert(1);
}
}
})
</script>
6.v-for
对数组、对象进行遍历，优先级高于其他指令。
有两种遍历形式：（xxx in xxx）
- text是可变的；index是当前项的索引（下标），是一个可选参数；in是不可变的；texts是对应vue.js里面的data的数组（对象）名字
<li v-for="(text,index) in texts">
<li v-for="text in texts">
举例：
<body>
<div id="app">
<p v-for="(myscore,index) in score">
分数是：{{myscore}}，对应的下标是：{{index}}
</p>
<span v-for="peo in people"> {{peo}} </span>
<br>
<span v-for="str in number"> {{str}} </span>
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
score:["小明","小红","小蓝","小粉","小爱同学"],
people:{name:"张三",age:13,sex:"男"},
number:"123456"
}
})
</script>
7.v-show
根据条件展示元素，v-show里面是条件表达式，返回的是true或者false。为true的显示出来，为false的隐藏起来。
<body>
<div id="app">
<input type="text" name="" id="" v-model="num1" placeholder="请输入数字" />
<input type="text" name="" id="" v-model="num2" placeholder="请输入数字" />
<br>
<span>判断结果：</span>
<strong v-show="num1>num2">{{num1}}大于{{num2}}</strong>
<strong v-show="num1==num2">{{num1}}等于{{num2}}</strong>
<strong v-show="num1<num2">{{num1}}小于{{num2}}</strong>
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
num1:"",
num2:""
}
})
</script>
8.v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<body>
<div id="app">
<h2 v-if="obj">我是真的</h2>
<h2 v-if="obj1">我是假的</h2>
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
// 当obj为真的时候，对应内容会显示出来
obj:true,
// 当obj为假的时候，对应内容会被隐藏
obj1:false
}
})
</script>
- 被隐藏的元素，在审查的时候是被注释的
- 如果想改变多个元素，则可以用template当做一个不可见的包裹元素
<body>
<div id="app">
<!-- 不可见的包裹元素 -->
<template v-if="obj">
<h2>我是真的</h2>
<p>你是人间四月天</p>
</template>
<h2 v-if="obj1">我是假的</h2>
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
// 当obj为真的时候，对应内容会显示出来
obj:true,
// 当obj为假的时候，对应内容会被隐藏
obj1:false
}
})
</script>
9.v-else
v-else指令不能单独使用，必须紧跟在v-if 或者 v-else-if 的元素后面。可用于登陆、判断成绩合格等。相当于if else条件语句
<body>
<div id="app">
<input type="text" v-model="msg">
<!-- 相当于在这用了if else条件语句 -->
<p v-if="msg>90">{{excellent}}</p>
<p v-else-if="msg>80">{{good}}</p>
<p v-else-if="msg>60">{{qualified}}</p>
<p v-else>{{Unqualified}}</p>
</div>
</body>
<script>
var grades = new Vue({
el:"#app", //挂载点
data:{
msg:"",
excellent:"优秀",
good:"良好",
qualified:"合格",
Unqualified:"不合格"
}
})
</script>
10.v-bind ！！！！
v-bind用于属性绑定，只要是标签自带的属性都可以用。简写方式用":"表示。
<!-- 完整语法：v-bind 是指令，: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。 -->
<span v-bind:class="classProperty"></span >
<!-- 缩写语法: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。 -->
<span :class="classProperty"></span >
（1）绑定属性
不适用vue的情况下，我们对一张图片的写法，可以正常显示
使用vue的情况下，我们可以把图片路径存到js中。但是这种情况下，标签会直接显示出来，所以就需要加上v-bind
正确写法如下：
<body>
<div id="app">
<img v-bind:src="img" />
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
img:'rev4-3.jpg'
}
})
</script>
（2）绑定类
- 可动态的切换class属性
<style>
.setBorder{
border: 2px solid red;
}
.setColor{
color: red;
}
</style>
<body>
<div id="app">
<input type="text" :value="msg">
<!-- setBorder为类名 -->
<button type="button" v-bind:class="{'setBorder':border,'setColor':color,}">点击</button>
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
msg:"这是input初始值",
border:true,
color:false,
}
})
</script>
（3）数组语法
在css里面设定样式，把一个数组传给v-bind:class，以应用一个class列表
<style>
.active{
background-color: indianred;
font-size: 16px;
color: #fff;
}
</style>
<body>
<div id="app">
<ul>
<!-- v-for循环出数组的内容 -->
<!-- 三元运算符 -->
<li v-for="(text,index) in texts" :class="index == act ? 'active' : '' ">
{{text}}
</li>
</ul>
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
texts:['Vue','JavaScript','jQuery','React','HTML'],
act:2
}
})
</script>
（4）直接绑定数据对象
在vue实例的data中定义了style对象，这个对象里面是所有的类名及其真值，当里面类的值为true时则被渲染
<style>
.isActive{
font-size: 20px;
color: red;
}
.notActive{
font-size: 20px;
color: green;
}
</style>
<body>
<div id="app">
<p :class="style">我是可改变的样式</p>
</div>
</body>
<script>
var MyVue = new Vue({
el:"#app",
data:{
style:{
"isActive":true, //渲染
"notActive":false //不渲染
} } }) </script>
渲染结果为：
Vue 指令总结大全的更多相关文章
- vue指令大全~~~
是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...
- Vue指令总结---小白同学必看
今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...
- 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- vue指令总结（二）
一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...
- vue指令与$nextTick 操作DOM的不同之处
异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...
- vue指令概览
原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...
- vue 指令中el 的 parentNode 为空的问题
在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...
- vue指令用法
vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
随机推荐
- Gstreamer基础教程10 - Streaming
摘要 我们把直接从网络播放一个媒体文件的方式称为在线播放(Online Streaming),我们已经在以往的例子中体验了GStreamer的在线播放功能,当我们指定播放URI为 http:// 时, ...
- Spring Cloud ---- 服务消费与负载均衡（Rest + Ribbon ）
上一篇主要写了基于Eurake的服务的注册,主要就是创建注册中心,创建服务者,将服务者注册到注册中心,完成服务的暴露.这一篇主要写服务的消费与服务消费的负载均衡. 服务的调用方式有两种,Rest + ...
- rem辅助式响应布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 腾讯云上面部署PHP运行环境
现在云服务器已经很普及了,其价格.安全优势等成为不少开发者的首选.本人由于兴趣爱好,从朋友那边借了一个过来玩了两天,下面就分享整个部署流程吧. 1. 先到腾讯云官网购买服务器,这边就不演示.很简单,跟 ...
- windows系统先安装hexo
一.安装node.js 下载地址为:https://nodejs.org/en/可以根据自己需要下载对于的版本. 打开cmd,输入指令 node -v 若出现上图这样的结果则说明安装好了. 二.安装h ...
- linux虚拟机（centos7）常见配置解析
1. 场景描述 在win7下安装了多台虚拟机,安装后常用的几个配置记录下,因安全策略,采用的仅主机模式(内网). 2. 解决方案 2.1.更改主机名称 (1)更改主机名称,不是连接的名称,是hostn ...
- java架构之路-（MQ专题）RocketMQ从入坑到集群详解
这次我们来说说我们的RocketMQ的安装和参数配置,先来看一下我们RocketMQ的提出和应用场景吧. 早在2009年,阿里巴巴的淘宝第一次提出了双11购物狂欢节,但是在2009年,服务器无法承受到 ...
- [考试反思]1018csp-s模拟测试78(lrd day2) ：规律
zkt没素质果然考炸了! 但是他考炸了和我一个分 这场的状态是真的不好,T3比较简单但没有做,一直干T2结果还是跪了 T1的哈希写挂了,模数比int大了结果一乘就炸long long了. 调了一个小时 ...
- Flink中发送端反压以及Credit机制(源码分析)
上一篇<Flink接收端反压机制>说到因为Flink每个Task的接收端和发送端是共享一个bufferPool的,形成了天然的反压机制,当Task接收数据的时候,接收端会根据积压的数据量以 ...
- VM安装CentOS系统
本篇文章主要介绍了VMware安装Centos7超详细过程(图文) 1.软硬件准备 软件:推荐使用VMwear,我用的是VMwear 12 镜像:CentOS7 ,如果没有镜像可以在官网下载 :htt ...