美文网首页
插值操作的指令

插值操作的指令

作者: 63537b720fdb | 来源:发表于2020-07-13 03:41 被阅读0次

1.Mustach
Mustach语法就是{{ }},所以也有人直接叫双括号语法

    <div id="app">
        <h1>{{message}}</h1>
        <h1>{{message}},bye!</h1>
        <h1>{{message + ' ' + message}}</h1>
        <h1>{{message}} + ' ' + {{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night'
            }
        })
    </script>
image.png

2.v-once
当我们希望页面中的数据只保持第一次渲染出的效果,不需要支持响应式的操作时,就可以使用v-once的属性

    <div id="app">
        <h1>{{message}}</h1>
        <h1 v-once>{{message}}</h1>
    </div>

在控制台修改message的值时,添加了v-once的h1中的值没有跟着变化,仍然展示着最初的数据


image.png

3.v-html
当后台传给我们的数据是个标签时,直接用Mustach展示的是未经解析完整的标签

    <div id="app">
        <h1>{{url}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
                url : <a href="http://www.baidu.com">百度一下</a>
            }
        })
    </script>
image.png

那我们希望展示按照HTML格式进行解析,并显示出相应的内容,就需要使用v-html指令

    <div id="app">
        <h1 v-html=url></h1>
    </div>
image.png

4.v-text
v-text能展示出文本信息,但是和Mustach相比不够灵活

    <div id="app">
        <h1 v-text=message></h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
    </script>
image.png

5.v-pre
v-pre能将数据不经过Vue的解析原封不动的展示出来

    <div id="app">
        <h1>{{message}}</h1>
        <h1 v-pre>{{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
    </script>
image.png

6.v-cloak
在Vue解析前,div会有一个v-cloak属性
在Vue解析后,div没有一个v-cloak属性

cloak是斗篷的意思,当遇到js文件没有解析完时,包含有Vue语法的HTML元素就像添加了v-pre的属性一样原封不动的展示数据,在js文件解析完成时,带有Vue语法的HTML代码会通过解析后生成相应的数据被展示出来,这个过程会有一个闪现的效果,用户体验感不好,所以给HTML元素添加v-cloak指令,并给带有v-cloak属性的HTML元素的样式设为dispaly:none,在js文件解析完后,v-cloak属行就会消失,想斗篷一样把自己罩住,display的样式也会失效,数据会通过Vue的解析展示出来。
可以用定时器的方式展示v-cloak的效果

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

    <div id="app">
        <h1 v-cloak>{{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        setTimeout(function(){
            var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
        },1000)
    </script>

页面会在1秒后展示出good night,也因为v-cloak属行,在js没有解析完时,将数据用css的方法隐藏,没有显示出{{message}},在1秒后js解析完毕,v-cloak的属性会自动消失,数据通过解析展示出good night。


image.png

相关文章

  • 插值操作的指令

    1.MustachMustach语法就是{{ }},所以也有人直接叫双括号语法 2.v-once当我们希望页面中的...

  • vue 知识点整理——指令

    vue指令: v-text: 用于操作纯文本。如果要更新部分的文本,需要使用 {{ Mustache }} 插值。...

  • 插值语法和指令语法

    总结: 插值语法 指令语法 使用

  • Vue常用指令(完结版)

    模板语法(插值表达式) 数据绑定的最常见的形式是文本插值 {{ }} 指令 指令的作用:当表达式的值改变时,将其产...

  • vue 常见面试题(使用)

    0. 指令、插值 插值、表达式 指令、动态属性 v-html:会有XSS风险,会覆盖子组件image.pngima...

  • 一文带你入门Vue之模版语法

    {{}} (文本插值) 使用 {{...}}(双大括号)的文本插值 v-html (Html内容渲染指令) 用于输...

  • # vue模板语法 ( v-text 和 {{}} 区别)

    vue模板语法 插值 文本 1.“Mustache”语法插值: html: js: 2.v-text指令html ...

  • (32)Vue模板语法

    模板语法 文本: v-once一次性地插值,当数据改变时,插值处的内容不会更新 v-html 指令 v-if 指令...

  • Vue-指令

    以v-开头 一、文本操作指令 上一篇文章-插值 二、条件渲染指令 上一篇文章-条件与循环 三、列表渲染指令 上一篇...

  • 看vue教程的小笔记

    vue绑定元素特性方法: 1.文本插值 {{msg}}①v-once指令你也能执行一次性地插值,当数据改变时,插值...

网友评论

      本文标题:插值操作的指令

      本文链接:https://www.haomeiwen.com/subject/mwcocktx.html