vue-文本类指令

文本表达式

插值表达式 {{}}
v-text
v-html
v-once

Vue初体验

新建一个空的项目，引入vue.js文件。写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
    {{name}}
</div>
</body>

<script>
    // 2、创建一个Vue的实例
    //new出来的对象就是MVVM中的 View Module（调度者）
    var myVue = new Vue({
        el: '#div1', //当前vue对象将接管上面的div1区域
        data: {//data就是MVVM中的 module
            name: 'smyhvae'
        }
    });
</script>
</html>

如果我们在控制台输入myVue.$data.name = 'haha'，页面会自动更新name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。

插值表达式 {{}}

将数据展示在页面中最常用的语法之一 {{}}

 <p>{{msg}}</p>

    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue'
        }
    })

无论何时，当data中的msg发生变化时，p标签中的msg会 自动更新

{{}} 对javascript 表达式(一个表达式会产生一个值)的支持 插值表达式中不可以放语句

    {{ num +1 }}

    {{ ok ? 'YES' : 'NO' }}  // 三目运算符

    {{ name == 'a' ? 'true' : 'false' }}

错误示范语句

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

v-text

v-text 将data中的变量渲染到指定元素中

    <p v-text='msg'></p>

插值表达式和 v-text 的区别

  <!-- 差值表达式 -->
  <p>content:++++++{{name}}------</p>

  <!-- v-text -->
  <p v-text="name">------++++++</p>

区别1: 插值表达式只会替换自己这个占位符，不会覆盖整个元素的内容但是如果网络慢将会出现闪烁问题，需要使用使用v-cloak来解决闪烁问题
区别2：v-text 会覆盖整个元素的内容，但是没有闪烁问题,因为他是放在属性中

其实，第二行代码中，只要浏览器中还没有解析到v-text="name"的时候，会显示------++++++；当解析到v-text="name"的时候，name的值会直接替换------++++++。

v-html

v-text 渲染的是纯文本内容,v-html会被解析成html元素
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本）攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。


    <p v-html="msg"></p>


    data: {
        msg: '<h1>我是一个大大的h1标题</h1>'
    }

v-html使用注意: 在单文件组件中有scoped的样式不会作用到有v-html的元素上,因为那部分的HTML没有被vue的模板编译器处理过, 解决办法替换为 CSS Modules 或用一个额外的全局 style 元素手动设置类似 BEM 的作用域策略。

扫描二维码关注公众号，回复： 8649526 查看本文章

v-once

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

  <p v-once> {{ msg }}</p>

年十_web

发布了3 篇原创文章 · 获赞 0 · 访问量 255

私信关注