1-5 基本用法-模板

目录：

  • 简介
  • 数据绑定的方式
  • 其他指令

一、简介

　　Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例数据中，说白了，就是数据的绑定。

　　模板就是{{}}，用来进行数据的绑定，显示在页面中，也称为mustache语法。

二、数据绑定的方式

2.1、双向绑定

双向绑定之前也讲过了，就是 使用的是 v-model 指令，就是说在标签中的数据和data中数据是双向的，就是说标签中数据改变，则data中的数据也随之改变。

具体事例，我就不说了，这个有在之前的博客中写道。

2.2、单项绑定

方式一：使用两对大括号，即：{{}}，可能会出现闪烁的问题，可以使用 v-cloak解决。

v-cloak用法：不需要表达式

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

 

方式二：使用v-text、v-html，用这两个指令，不会出现闪烁的问题。

<body>
    <div id="box">
        <input type="text" v-model="msg">

        <!--不识别html标签，内容直接当做纯文本-->
        <h3 v-text="msg"></h3>
        
        <!--识别内容中html标签-->
        <h3 v-html="msg"></h3>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#box",
            data:{
                msg:"",
            }
        });
    </script>
</body>

输出结果如图：

三、其他指令

v-once：数据只绑定一次

v-pre：不编译，直接原样显示

代码如下：

<body>
    <div id="box">
        <input type="text" v-model="msg">
        <!--只加载一次-->
        <h3 v-once>{{msg}}</h3>
        <!--本身是什么，就显示什么-->
        <h3 v-pre>{{msg}}</h3>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#box",
            data:{
                msg:"",
            }
        });
    </script>
</body>

 

posted @ 2020-02-25 16:57  帅丶高高  阅读(229)  评论(0)    收藏  举报