欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue内置指令总结

程序员文章站 2022-03-03 09:56:47
...

vue内置指令总结

v-bind

可以绑定属性,包括class style , 也可以使用:替代

  • 在1vue.0中有三种修饰符,.sync,.once,.camel,在2.0中废弃了前面两个
  • camel将绑定的特性的名称转化为驼峰法则命名

v-model

随着表单控件的不同而有所不同
可以添加修饰符

.lazy      .number      .trim

v-if v-else-if v-else v-show

可以配合模板使用
v-if和v-show两者都可以实现元素的状态切换,但是两者存在一些区别

  • v-if根据判断条件决定是否渲染,如果条件为假,不进行任何操作
  • v-show无论如何都会进行模块的渲染,只是简单的基于css 的切换
  • 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-for

  • 可以配合模板使用,也可以单独进行列表和表格的渲染

v-on

  • 进行事件的绑定,可以省略,使用@替代
类似于原生js的事件绑定的方式

 - 获取dom元素

 - 进行事件的添加

 - 添加事件处理函数

v-text

  • 绑定文本
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--在这里加入模型数据-->
            {{ message }}
            <!--上下两种书写形式的 效果是一样的-->
            <p v-text="message"></p>
        </div>
    </body>
</html>
<script>

    var viewModel = {
        //模型数据的初始化
        message: 'hello world!'
    }

    // viewModel    连接模型和数据库
    var vm= new Vue({
        el:'#app',
        data:viewModel
    })
</script>

v-html

  • 绑定html标签 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--在这里加入模型数据-->
            {{ message }}
            <!--上下两种书写形式的 效果是一样的-->
            <p v-text="message"></p>
        </div>
    </body>
</html>
<script>

    var viewModel = {
        //模型数据的初始化
        message: 'hello world!'
    }

    // viewModel    连接模型和数据库
    var vm= new Vue({
        el:'#app',
        data:viewModel
    })
</script>

v-once

  • 不需要表达式
  • 只绑定一次,数据修改时,模型上面的数据不会再动态渲染到页面上
  • 2.0版本新增 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--在这里加入模型数据-->
            <input type="text" name="" v-model="message" id="" value="" />

            <h2 v-once>{{message}}</h2>
            <h2>{{message}}</h2>
        </div>
    </body>
</html>
<script>

    var dataModel = {
        message: 'hello world!'
    }
    var vm= new Vue({
        el:'#app',
        data:dataModel
    })
</script>

v-pre

  • 不需要表达式
  • 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-cloak

  • 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <style type="text/css">
            [v-cloak] {
                display: none;
                color: red;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <!--在这里加入模型数据-->
            <div>{{ message }}</div>

            <div v-cloak>
                {{message}}
            </div>

        </div>
    </body>

</html>
<!--
    这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。

在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见

-->
<script>
    var dataModel = {
        //模型数据的初始化
        message: 'hello world!',
    }

    // viewModel    连接模型和数据库
    var vm = new Vue({
        el: '#app',
        data: dataModel
    })
</script>

上一篇： vue directives指令总结

下一篇： python 判断当前日期是否为节假日

推荐阅读