插值表达式和文本指令

新星_
144 阅读1分钟

创建Vue对象

在html文档中使用cdn引入Vue框架的js文件后就可以使用全局函数Vue创建一个Vue对象

    <div id="app"></div>
    <script>
        let options = {
            el: "#app",
            data: {
            }
        }
        let vm = new Vue(options);
  </script>

插值表达式

插值表达式{{}}:大括号内部会作为js语法执行环境，可以运行简单的表达式比如变量取值，函数调用，数组和对象取值，加减乘除以及三目运算等有结果的表达式，表达式的结果就会被当作标签的内容渲染在页面上，大括号外部就是字符串。

普通插值表达式插入数据就是在标签尖括号中使用{{}}插入js表达式，只能用在双标签中，单标签不能使用插值表达式。

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <div id="app" v-cloak>
        <h1>{{name}}--棋士</h1>
        <p>{{gender()}}</p>
        <p>album music:{{album[1]}}</p>
        <p>{{comingsoon.name}}</p>
        <p>{{name=="gloria"?"歌莉娅":"G.E.M."}}</p>
    </div>
    <script>
        let options = {
            el: "#app",
            data: {
                name: "gloria",
                gender(){
                    return "singer";
                },
                album: ["Gloria","HELL","只有我和你的地方","你不是第一个离开的人","不想回家","受难曲"],
                comingsoon:{
                    name:"say no more"
                }
            }
        }
        let vm = new Vue(options);
        console.log(vm,options.data,vm==options.data);

1.插值表达式中标识符取的值是构造函数创建对象时传入对象中data对象的属性名的值，标识符就是创建的vm对象的属性

2.创建的vm对象的属性的属性值和属性名都是取的创建对象时传入的对象中的data对象的属性的属性值和属性名，但是创建的vm对象和创建对象时传入的对象中的data对象是两个不同的对象。

image.png

可以操作vm对象修改已经渲染在页面上的值

image.png

1.new Vue()在创建对象时就会调用函数，函数运行时就会取出模板中所有标识符的值，然后DOM操作渲染到页面上。

2.而在创建对象之后再给创建的对象添加属性但是调用函数时取不到值就不会渲染到页面上

    <div id="app" v-cloak>
        <h1>{{name}}--棋士</h1>
        <p>{{gender()}}</p>
        <p>album music:{{album[1]}}</p>
        <p>{{comingsoon.name}}</p>
        <p>{{name=="gloria"?"歌莉娅":"G.E.M."}}</p>
        <p>{{msg}}</p>
    </div>
    <script>
        let options = {
            el: "#app",
            data: {
                name: "gloria",
                gender(){
                    return "singer";
                },
                album: ["Gloria","HELL","只有我和你的地方","你不是第一个离开的人","不想回家","受难曲"],
                comingsoon:{
                    name:"say no more"
                }
            }
        }
        let vm = new Vue(options);
        vm.msg="hello";

image.png

文本指令

v-html ==>底层相当于元素节点使用innerHTML
v-text==>底层相当于元素节点使用innerText
v-pre==>会静默跳过编译，插值表达式就被识别为文本，而不是js表达式
v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性，在vue框架运行时会自动把项目中的v-clock属性去掉，可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <div id="box" v-cloak>
        <p v-html="name"></p>
        <p v-text="fansname"></p>
        <p v-pre>{{msg}}</p>
    </div>
    <script>
        let vm=new Vue({
            el:"#box",// id属性选择器
            data:{
                name:"<h1>hyomin</h1>",
                fansname:"min,us",
                msg:"hyomin in us"
            }
        });
    </script>

image.png

如何解决vue第一次加载的时候页面上使用的数据会闪烁?(面试)

1.页面第一次加载时闪屏的原因是页面在加载时是根据标签的顺序从上往下解析，所以先加载文档树中的标签节点，就导致标签中的插值表达式这个字符串会先显示一下，当vue对象生成data数据时，就会去刷新界面然后取出标识符的值做DOM操作标签的内容就会从之前的字符串替换成结果字符串。

2.解决方案：第1种是使用文本指令操作v-html以及v-text，第2种使用[v-cloak]属性选择器加入{display:none};css样式，第3种使用$mount挂载的方式，不使用el关联标签元素。

avatar
文章
阅读
粉丝