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.数据驱动.双向绑定 ...

随机推荐

node.js的File模块
1.Node.js是什么? (1) Nodejs是为了开发高性能的服务器而诞生的一种技术 (2) 简单的说 Node.js 就是运行在服务端的 JavaScript,基于V8进行运行 (3) Node ...
Flask：第一个Flask项目
在上一篇文章:Flask:项目的准备工作中,我写了flask项目的准备工作,不清楚创建flask项目需要做哪些准备的朋友可以点击链接看看 1.最简单的Flask项目代码: from flask im ...
API 网关知识看这篇就足够了！
本文已经收录自 JavaGuide (60k+ Star[Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识.) 本文授权转载自:https://github.com/java ...
jdk基础配置
今遇到一事,tomcat启动是报错,将jdk位数错误,有问题,32位和64位的问题 cmd java -verison 显示的确实是jdk 64位,又跑到环境变量看了下java_home的配置这里 ...
学习笔记30_ORM框架
*在以往DAL层中,操作数据库使用DataTable,如果使得数据表DataTable转为List<>的话,写错属性名,在编译阶段是查不出来的,而ORM框架能解决此问题. *ORM是指面向 ...
中文￥乱码 vue js
/** * * 中文￥格式化,返回格式化后的￥100.00 * @param {any} money */utils.formatCNY = function (money) { let format ...
FastJson稍微使用不当就会导致StackOverflow
GitHub 9.4k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 9.4k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 9.4k Star 的 ...
java架构之路-（NoSql专题）MongoDB快速上手
NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL".在现代的计算系统上每天网络上都会产生庞大的数据量.这些数据有很大一部分是由关系数据库管理系统(RD ...
python基础-闭包函数和装饰器
闭包函数和装饰器闭包函数概念:在函数中(嵌套)定义另一个函数时,内部函数引用了外层函数的名字. 特性闭包函数必须在函数内部定义闭包函数可引用外层函数的名字闭包函数是函数嵌套.函数对象.名称空 ...
Mybaits 源码解析（十二）----- Mybatis的事务如何被Spring管理？Mybatis和Spring事务中用的Connection是同一个吗？
不知道一些同学有没有这种疑问,为什么Mybtis中要配置dataSource,Spring的事务中也要配置dataSource?那么Mybatis和Spring事务中用的Connection是同一个吗 ...

Vue 指令总结大全