vue框架入门--基础指令

春意迟迟、

已于 2022-11-17 16:53:14 修改

阅读量175

点赞数 1

文章标签： vue.js javascript 前端

于 2022-08-29 19:40:57 首次发布

本文链接：https://blog.csdn.net/qq_58167492/article/details/126588699

版权

1.{{}}：插值表达式的符号

在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等(不要写太复杂的，例如for循环、if循环等 ) ,插值表达式中的标识符代表vue对象中的data的属性名或者methods中的方法名。

例1：直接创建vue对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div class="box">
        //{{}}里面的值只能去data里面的成员
        <div>{{id[0]}}</div>
        <div>{{id[0].name}}</div>
        <div>{{id[1].age}}</div>
    </div>

    <script>
        new Vue({
            el:".box",  //与页面上的元素关联
            data:{
                id:[{name:"rose",age:21},{name:"karen",age:23}]
            }
        })
    </script>
</body>
</html>

结果：

插值表达式里面的值，只能是data的成员，或者methods中的方法名。

例2：将参数传入vue对象中

<body>
    <div class="box">
        <div>名字：{{name}}</div>
        <div>{{arr[2]}}</div>
        <div>{{people.say}}</div>
    </div>

    <script>
        let data={
            name:"rose",
            arr:[0,1,2,3],
            people:{say:"hello"}
        }

        let obj={
            el:".box",
            data
        }
        var re=new Vue(obj)
    </script>
</body>

结果：

2.文本指令

v-html：相当于innerHTML，可以插入文本，可以解析标签

v-text：相当于innerText，可以插入文本，不能解析标签

v-pre:插件表达式就被识别为文本,而不是js表达式

v-cloak：加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)，可以解决使用插值表达式渲染到页面上时出现的闪屏问题。
<body>
    <style>
        /* []是属性选择器 */
        [v-clock] {
            display: none;
        }
    </style>
    <div class="box">
        <div v-html="son1"></div>
        <div v-html="son2"></div>
        <hr>
        <div v-text="son3"></div>
        <div v-text="son4"></div>
        <hr>
        <div v-clock>{{son5}}</div>
        <hr>
        //将{{}}插值表达式解析为文本
        <div v-pre>{{son6}}</div>
    </div>

    <script>
        new Vue({
            el:".box",
            data:{
                son1:"<b>v-html可以解析标签</b>",
                son2:"v-html可以插入文本",
                son3:"<b>v-text不可以解析标签</b>",
                son4:"v-html可以解析标签",
                son5:"hello",
                son6:"world"
            }
        })
    </script>
</body>
结果：

总结：

1.插值表达式{{}}，只能渲染vue对象中的data属性的成员和method的方法。

2.v-html和v-text的区别：前者不仅可以插入文本，还可以解析标签哦，而后者只能插入文本，不能解析标签。

3.解决插值表达式渲染到页面上时的闪屏问题:v-clock可以隐藏{{}}而解决闪屏问题，v-html、v-text都不使用{{}}符号，所以不会闪屏，从而解决闪屏问题

4.v-pre可以将js关键字解析为普通文本