（二）Vue的模板语法

最新推荐文章于 2022-09-23 17:16:19 发布

cainiao_Lyx

最新推荐文章于 2022-09-23 17:16:19 发布

阅读量180

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/cainiao_Lyx/article/details/110353999

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ok，今天来说说Vue的一些模板语法吧！

首先是Vue中的指令：
上回中我们学到了插值表达式{{xxx}}，但是插值表达式有一个问题就是闪动问题，那什么是闪动问题呢？
闪动问题就是在页面渲染的时候，先显示了原本的插值表达式，然后才替换成了我们想要的数据。

消除闪动问题我们就可以使用指令：v-cloak，原理就是首先使用样式进行隐藏，在内存中进行替换，最终将替换结果显示出来。
数据绑定指令：（数据绑定就是数据填充到标签中）
v-text（无闪动问题）填充纯文本
2）v-html 填充html片段
3）v-pre 填充原始信息
数据响应式
1）html5中的响应式（屏幕尺寸的变化导致的样式的变化）
2）数据响应式（数据的变化导致页面内容的变化）
3）v-once 只编译一次
数据双向绑定
v-model
说到数据双向绑定，那就要说说MVVM框架：
MVVM实际上就是M（model）V（view）VM（view-model），就是页面和数据之间要通过一层处理来交互，也就是M和V要通过VM来交互，如下图：

用户在view处改变了数据，model里爷就更改了，同理另一个方向也是。
下面用一段简单的程序展示一下上面所说。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LALA</title>
    <style type="text/css">
    <!--    v-cloak样式-->
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
<!--    解决闪动问题-->
    <div v-cloak>
        {{msg}}
    </div>
<!--    填充纯文本，不存在闪动问题-->
    <div v-text="msg">

    </div>
<!--    填充html片段，不推荐使用，有安全风险，易受到xss攻击-->
    <div v-html="msg1">

    </div>
<!--    显示原始信息-->
    <div v-pre>
        {{msg}}
    </div>
<!--    只编译一次，显示内容之后不再具有响应式功能-->
    <div v-once>
        {{info}}
    </div>
<!--    数据双向绑定-->
    <div>
        <input type="text" v-model="msg">
    </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            msg: 'hello vue',
            msg1: '<h1>html<h1>',
            info: 'nihao'
        }
    })
</script>
</body>
</html>

执行该程序后如图：
在这里插入图片描述
前两个是 v-text和v-cloak的测试就不多说了。
第三个是v-html的测试，可以看到它并不是将 <h1>html<h1>直接显示,显示的是html，可见它解析了这段html代码并显示出来了。
第四个是v-pre的测试，可见它并没有将msg的内容填充进去，而是直接显示了{{msg}}。
下面我在输入框进行修改如下：
在这里插入图片描述
可见所显示的msg的内容也发生了改变，这就是V->M的绑定。
我再在console里直接更改数据如下：

可见msg显示的所有信息也发生了改变，这就是M->V的绑定。
这就是v-model提供的功能，即双向数据绑定。
那v-once呢？
接下来我在console里更改info的数据如下：
在这里插入图片描述
可见没有改变，这就是v-once的功能，只编译一次，当有一些加载一次就不需要在更改的数据时，我们就可以使用v-once来显示他们，这样可以提高性能。

这里就说这几个指令，还有一些指令大家可以去Vue官网查看：Vue官网

cainiao_Lyx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
（二）Vue的模板语法

ok，今天来说说Vue的一些模板语法吧！首先是Vue中的指令：上回中我们学到了插值表达式{{xxx}}，但是插值表达式有一个问题就是闪动问题，那什么是闪动问题呢？闪动问题就是在页面渲染的时候，先显示了原本的插值表达式，然后才替换成了我们想要的数据。消除闪动问题我们就可以使用指令：v-cloak，原理就是首先使用样式进行隐藏，在内存中进行替换，最终将替换结果显示出来。数据绑定指令：（数据绑定就是数据填充到标签中）v-text（无闪动问题）填充纯文本2）v-html 填充html片段3）v-p
复制链接

扫一扫