Vue常用指令使用指南

最新推荐文章于 2022-10-10 18:18:28 发布

现实啊

最新推荐文章于 2022-10-10 18:18:28 发布

阅读量129

点赞数 1

本文链接：https://blog.csdn.net/m0_52960319/article/details/110518715

版权

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

<style>
        [v-v-cloak]{
            display: none;
        }
    </style>

引入文件vue.js

<script src="./js/vue.js"></script>

用法

<!-- 对于MVVM的理解 -->
    <!-- 解放DOM -->
    <!-- 指令：就是vue.js为我们提供的方便操作的自定义属性 -->

    <!-- <-- View --> 
    <div id="app">
        <!-- 1.使用模板语法的标签上添加v-cloak 的指令 -->
        <p v-cloak>{{msg+1+1+1}}</p>

        <!-- 模板语法 -->
    </div>
    <!-- View end -->
    <script>
        //创建一个vue环境，创建一个VM层
        let vm = new Vue({
            el:'#app',
            data:{//Model层
                msg:'hello word'
            }
        })
    </script>

#v-text
数据绑定语法 - 插值

<script src="./js/vue.js"></script>
<body>
    <div id="app">
        <!-- {{myDiv}} -->
        <p v-text="myDiv"></p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                myDiv:'hahhhahah'
            }
        })
    </script>
</body>

#v-html
数据绑定语法 - 插值
更新元素的 innerHTML

<script src="./js/vue.js"></script>
<div id="app">
        <!-- {{myDiv}} -->
        <div v-html="myDiv"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                myDiv:'<h2>hello</h2>'

            }
        })
    </script>

#v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

<script src="./js/vue.js"></script>
<div id="app">
        <p v-once>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'哈哈哈哈'
            },
            mounted(){
                this.msg ='洗我洗我嘻嘻嘻我嘻嘻嘻'
            }
        })
    </script>

#v-pre
跳过这个元素和它的子元素的编译过程

<script src="./js/vue.js"></script>
<!-- 不被解析出来 -->
    <div id="app">
        <p v-pre>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '不想被解析！'
            }
        })
    </script>

#v-model
在表单控件或者组件上创建双向绑定
参考
1.表单控件绑定
2.组件-在输入组件上使用自定义事件

<script src="./js/vue.js"></script>
<!-- 双向绑定 -->
    <div id="app">
        <input type="text" value="" v-model="username">
        <p>{{username}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                username:'花花'

            }
        })
    </script>

#v-on
v-on缩写：@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略

<script src="./js/vue.js"></script>
<div id="app">
        <input type="text" value="" v-model="num">
        <input type="button" value="+1" v-on:click="add">
        <input type="button" value="-1" @click="sun">
        
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                num:1
            },
            //将num值进行操作
            //methods:用来写页面需要的方法的配置
            methods:{
                add:function(){
                    this.num += 1;
                },
                sun(){
                    this.num -= 1;
                }
            }
           
        })
    </script>

#v-bind
v-bind缩写是 “：”
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式

<script src="./js/vue.js"></script>
<!-- v-mind用来绑定属性 -->
    <div id="app">
        <!-- <img v-bind:src="msg"> -->
        <img :src="msg">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'./src/timg.jpg'
            },//这个逗号必须有
            mounted(){
                //这个this必须有,他用来指定当前的vm实例
                this.msg = './src/timg1.jpg'
            }
        })
    </script>

现实啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue常用指令使用指南

#v-bloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕<style> [v-v-cloak]{ display: none; } </style>引入文件vue.js<script src="./js/vue.js"></script>
复制链接

扫一扫