vue学习笔记（2）

最新推荐文章于 2024-09-17 10:07:04 发布

AkashiSejuro

最新推荐文章于 2024-09-17 10:07:04 发布

阅读量168

点赞数

分类专栏： 11 文章标签： vue.js

本文链接：https://blog.csdn.net/AkashiSejuro/article/details/106645657

版权

11 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、插值操作

1.Mustache语法(胡子)

就是双大括号{{ }}
作用：显示变量值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
       <div>{{message}}</div> 
       <h2>{{message}},李银河！</h2>
       <!--mustache语法中，不仅仅可以直接写变量，也可以写简答的表达式-->
       <h2>{{firstname + lastname}}</h2>
       <h2>{{firstname + ' ' + lastname}}</h2>
       <h1>{{firstname}}  {{lastname}}</h1>
       <h2>{{counter * 2}}</h2>
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好',
            firstname:'kobe',
            lastname:'bryant',
            counter: 100
        },
    })
            
    </script>
</body>
</html>

双大括号内不仅可以放单个变量还可以写表达式。

       <div>{{message}}</div> 
       <h2>{{message}},李银河！</h2>
       <!--mustache语法中，不仅仅可以直接写变量，也可以写简答的表达式-->
       <h2>{{firstname + lastname}}</h2>
       <h2>{{firstname + ' ' + lastname}}</h2>
       <h1>{{firstname}}  {{lastname}}</h1>
       <h2>{{counter * 2}}</h2>

2.v-once指令的使用

当data中属性变量值改变时，不想让前端页面对应的显示发生改变，则可以使用v-once指令。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
       <h2>{{message}}</h2> 
       <h2 v-once>{{message}}</h2>
       <!--该指令后面不需要跟任何表达式（与v-for不同)
        该指令表示元素和组件(后面学习)只渲染一次，不会随着数据改变而改变-->
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好', 
        },
    })        
</script>

</body>
</html>

结果如图所示：
在这里插入图片描述
如图所示，第一条message已经改变为hello world，但是第二条由于v-once代码的缘由未进行改变。

3.v-html指令的使用

把文本放到DOM上进行展示。以html的语法形式展示变量值。
如果未使用代码，会出现这种错误状况。
在这里插入图片描述
使用代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
       <h2>{{message}}</h2> 
       <h2>{{url}}</h2>
       <!--<h2 v-html="url"></h2>-->
       <!--该指令后面往往会跟一个string类型
       会将string的html解析出来并且将进行渲染-->
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好', 
            url:'<a href="https://www.baidu.com">百度一下</a>'
        },
    })        
</script>
</body>
</html>

运行结果如下：
在这里插入图片描述

4. v-text指令

把文本放到DOM上进行展示。
注：一般不用，不够灵活
1.作用与Mustache比较相似：都是用于数据显示在界面这中。
2. v-text通常情况下，接近一个string类型。
使用代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
       <h2>{{message}}</h2> 
       <h2 v-text="message"></h2>
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好'
        }
    })        
</script>
</body>
</html>

运行结果如下：
第一条message，为Mustache。第二条message，为v-text用法

5. v-pre指令

向让原本“{{…}}”这个指令原封不动的显示出来，而不是进行解析后变量值显示。
输入代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
       <h2>{{message}}</h2>
       <h2 v-pre>{{message}}</h2> 
    </div>
    <script>
        const app = new Vue({
        el: '#app',
        data:{
            message:'你好'
        }
    })        
</script>

</body>
</html>

运行结果如下：

使用v-pre代码后，第二条message并未进行解析

6. v-cloak指令

cloak为斗篷的意思，顾名思义，cloak会将一些东西遮住，在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签

原理：当给一个元素加上v-cloak时，Vue解析这个语句前v-cloak存在，但是解析了这个语句之后，v-cloak就会自动消失。所以就可以指定v-cloak未消失时的显示样式style和解析之后v-cloak消失后的显示样式。
我们将{{message}}，设置1000毫秒的延时，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      [v-cloak] {
          display: none;
      }  
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app' v-cloak>
       <h2>{{message}}</h2>
    </div>
    <script>
        setTimeout(function () {
        const app = new Vue({
        el: '#app',
        data:{
            message:'你好'
        }
      })
    }, 1000)        
</script>
</body>
</html>

运行结果如下：

这个为延时前的代码

这个为延时后出现的代码

二、动态绑定属性

1、v-bind指令

真实开发中我们可能希望一些属性值不是写死的，而是根据服务器返回来的数据，进行动态绑定，再对应显示。v-bind作用：动态地绑定一些属性值。

(1)动态绑定src、href等属性

使用代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
       <img v-bind:src="imgurl" alt="">
       <a v-bind:href="aHref">百度一下</a>
       <!-- v-bind的语法糖 -->
       <img :src="imgurl" alt="">
       <a :href="aHref">百度一下</a>
      
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好',
            imgurl: 'https://img13.360buyimg.com/babel/s590x470_jfs/t1/135568/24/1147/76723/5ed628ecEde24b483/c2dd09dcd126a363.jpg.webp',
            aHref: 'http://www.baidu.com'
        }
    })        
</script>

</body>
</html>

运行结果如下：
在这里插入图片描述
在浏览器，console调试台我们可以看见图片的地址，以及ahref的地址

v-bind语法糖的写法
把v-bind省略，直接：属性名

 <img v-bind:src="imgurl" alt="">
       <a v-bind:href="aHref">百度一下</a>
       <!-- v-bind的语法糖 -->
       <img :src="imgurl" alt="">
       <a :href="aHref">百度一下</a>

上面为v-bind的写法，下面为语法糖的写法。

(2) 动态绑定class属性（对象语法）

一般是对象语法或者数组语法
对象语法：（用的多）
class=”{}” 花括号是对象，对象由键值对构成键：值在对象中枚举出所有要用到的类名（键），然后值选用Boolean类型的变量表示。用v-bind动态绑定Boolean类型的变量的值。

<h2 v-bind:class="{key2: value1,key2: value2}">{{message}}</h2>
    v-bind:calss"{类名1：boolean，类名2；boolean}"

我们执行一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    .active {
        color:purple;
    }
</style>
<body>
    <div id='app'>
    <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
    <button v-on:click="btnclick">按钮</button>
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好',
            isActive:true,
            isLine:true
        },
        methods:{
            btnclick: function(){
                this.isActive = !this.isActive
            }
        }
    })        
</script>
</body>
</html>

执行结果如下：
在这里插入图片描述

通过图片可以得知，通过按钮进行颜色的转换。