【无标题】

最新推荐文章于 2024-09-22 11:17:00 发布

铃铛儿√

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量159

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_46479336/article/details/126589349

版权

插值表达式

1.普通插值表达式插入数据: 在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等
,插值表达式中的标识符代表vue对象中的data的属性名或者methods中的方法名

插值表达式案列1

<!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 id="show">
        <!-- jack -->
        <h1>{{name}}</h1>
        <!-- 20 -->
        <h3>{{age}}</h3>
        <!-- male -->
        <h3>{{gender}}</h3>
        <!-- [ "吃饭", "睡觉", "打豆豆" ] -->
        <h4>{{intrest}}</h4>
        <!-- 吃饭 -->
        <h4>{{intrest[0]}}</h4>
        <!-- 0 -->
        <h5>{{fn()}}</h5>
        <!-- 0+1 -->
        <h5>{{fn()}}+1</h5>
        <!-- 0---666 -->
        <h5>{{fn()}}---666</h5>
        <!-- world -->
        <p>{{ count==10?"hello":"world" }}</p>
        <!-- hello -->
        <p>{{ count==1?"hello":"world" }}</p>
    </div>
    <script>
      let data = {
        name: "jack",
        age: 20,
        gender: "male",
        intrest: ["吃饭", "睡觉", "打豆豆"],
        fn: () => 0,
        count:1
      };
      let res = {
        el: "#show",
        data//data: data,
      };
      let ne=new Vue(res);
      console.log(ne,data,res==data);
    </script>
  </body>
</html>

在这里插入图片描述

插值表达式案列2

<!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 id="show">
        <!-- 小明 -->
        <h1>{{name}}</h1>
        <!-- 护士 -->
        <div>{{obj.sister1[2]}}</div>
        <!-- [ "小蓝", 30, "中学教师" ] -->
        <p>{{obj.sister2}}</p>
        <!-- 保家卫国 -->
        <a href="">{{dream}}</a>
    </div>
    <script>
        let vm=new Vue({
            el:'#show',
            data:{
                name:"小明",
                obj:{
                    sister1:["小红","20","护士"],
                    sister2:["小蓝",30,"中学教师"]
                },
                dream:"保家卫国"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

通过以上两个案列，我们可以总结出插值表达式的作用：
1、 在vue中的作用范围中使用data
2、 支持js代码的运算
3、支持函数的调用

指令

没有写指令时

<body>
    <style>

    </style>
    <div id="show">    
        <h1>{{name}}</h1>
        <div>{{age}}</div>
        <p>{{gender}}</p>
        <h2>{{major}}</h2>
        <pre>{{from}}</pre> 
    </div>
    <script>
        let vm=new Vue({
            el:"#show",
            data:{
                name:"小明",
                age:18,
                gender:"male",
                major:"中文",
                from:"American"
            }
        })
    </script>
</body>

在这里插入图片描述

加上指令之后

<!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>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
    <div id="show" v-clock>
        <!-- v-html ==>相当于innerHTML -->
        <!-- v-text==>相当于innerText -->
        <!-- v-pre==>插件表达式就被识别为文本,而不是js表达式 -->
        <!-- v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏) -->
    
        <!-- 小明==>中文 -->
        <h1 v-text="major">{{name}}</h1>

        <!-- 18==>小明 -->
        <div v-html="name">{{age}}</div>

        <!-- male==>{{gender}} -->
        <p v-pre>{{gender}}</p>


        <h2 v-clock>{{major}}</h2>

        <p>{{age>=18?"成年":"未成年"}}</p>
        <pre v-pre>{{from}}</pre>
    
    </div>
    <script>
        let vm=new Vue({
            el:"#show",
            data:{
                name:"小明",
                age:18,
                gender:"male",
                major:"中文",
                from:"American"
            }
        })
        /* 添加一个属性 v-clock  在vue框架运行时 会吧项目中的v-clock属性去掉，
            解决闪屏（页面最开始加载的时候会先加载{{xxx}},顺序执行之后才会替换
            花括号中的内容）问题
        */
    </script>
</body>
</html>

在这里插入图片描述

指令（指令是带有“v-”前缀的特殊属性）这里有一些指令：

指令	释义
v-text	直接进行输出，会覆盖原有内容；相当于innerText
v-html	会把数据解析成html代码执行；相当于innerHTML
v-pre	插件表达式就被识别为文本,而不是js表达式
v-cloak	加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)
v-bind	对属性进行绑定
v-model	表单数据的双向绑定，也是vue
v-if	控制标签元素每次都会删除或者创建元素，有较高的切换性能消耗
v-show	控制标签元素没有进行删除，添加了dispaly：none ，有较高的初始渲染开销
v-for	循环
v-on	绑定事件

v-show与 v-if的区别：
v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入标签

属性绑定

<!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="./vue.js"></script>
</head>
<style>
    img{
        width: 200px;
        height: 200px;
    }
</style>
<body>

    <div id="show">
        <div>{{name}}</div>
        <p v-text="obj.sister"></p>
        <div v-html="obj.age"></div>
        <img v-bind:src="obj.touxiang" alt="">
        <a v-bind:href="sina[0].source">{{sina[0].page}}</a>
        <!-- <a v-bind:href="sina[0].source" v-html="sina[0].page"></a> -->
        <input type="text" v-bind:value="email">
        <!-- <div v-bind:class="box">12222</div> -->
        <!-- <input type="text" :value=""email> -->
    </div>
    <script>
        let vm=new Vue({
            el:"#show",
            data:{
                name:"小明",
                obj:{
                    sister:"小红",
                    age:24,
                    touxiang:"https://img0.baidu.com/it/u=4060770951,4069855872&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                },
                sina:[{
                    source:"http://www.baidu.com",
                    page:"百度一下"
                }],
                email:"123456@qq.com"
            }
        })
    </script>
</body>
</html>