Vue备课

最新推荐文章于 2024-08-02 00:34:21 发布

YSunshine2333

最新推荐文章于 2024-08-02 00:34:21 发布

阅读量1.1k

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/qq_38801960/article/details/106629741

版权

Vue学习专栏收录该内容

2 篇文章 1 订阅

订阅专栏

Vue备课笔记

模板语法P12-P16

模板语法P12-P16

Vue模板语法，默认语法的功能就是前端渲染，前端渲染即把数据填充到html标签中。
数据（来自服务器） + 模板（html标签） = 前端渲染（产物是静态html内容）

使用前端模板引擎。它拥有自己的一套模板语法规则。优点是大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。

Vue模板语法，什么是指令？
　　1）、什么是自定义属性。自定义属性是区别于标准属性的，标准属性是标签自带的属性。
　　2）、Vue指令的本质就是自定义属性。
　　3）、Vue指令的格式，以v-开始，比如v-cloak。指令的名称取决于设计者。

内容概述

在这里插入图片描述

一、插值操作

新建一个文件夹“02-插值操作”
在文件夹里再新建一个html文件：Mustache语法的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
 
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊，丁颖',
            },
        })
    </script>
</body>
</html>

1、Mustache语法

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

 <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>

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

2、v-once指令的使用

Vue的data数据可以做到响应式，即data中的属性变量值发生改变，前端页面的对应显示会自动发生改变。这是开发时可能产生新的需求：当data中属性变量值改变时，不想让前端页面对应的显示发生改变，则可以使用v-once指令。

<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>

在这里插入图片描述

3、v-for循环遍历指令

4、v-html

把文本放到DOM上进行展示。以html的语法形式展示变量值

<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>

在这里插入图片描述

5、 v-text指令

把文本放到DOM上进行展示。

<body>
    <div id='app'>
       <h2>{{message}},李银河！</h2> 
       <h2 v-text="message"></h2>
       <!--一般不用，不够灵活
       作用与Mustache比较相似：都是用于数据显示在界面这中
       v-text通常情况下，接近一个string类型-->
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好'
        }
    })        
</script>

</body>

在这里插入图片描述
不灵活，会覆盖。

6、v-pre指令

作用：向让原本“{{…}}”这个指令原封不动的显示出来，而不是进行解析后变量值显示。
在这里插入图片描述

<body>
    <div id='app'>
       <h2>{{message}}</h2>
       <h2 v-pre>{{message}}</h2> 
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好'
        }
    })        
</script>

</body>

7、v-cloak指令

cloak斗篷-像个斗篷一样把不想显示的东西遮住
html语句从上到下解析，如果解析时卡住了script的语句没有解析出来，则用户可能会看到页面中会显示出{{message}}，用户体验感不是很好。所以为了卡住的时候宁愿什么也不显示出来（空白页）也比显示出{{message}}好。
v-cloak可以指定未解析时的页面显示。
原理：当给一个元素加上v-cloak时，Vue解析这个语句前v-cloak存在，但是解析了这个语句之后，v-cloak就会自动消失。所以就可以指定v-cloak未消失时的显示样式style和解析之后v-cloak消失后的显示样式

<body>
    <div id='app' v-cloak>
       <h2>{{message}}</h2>
    </div>
    <!--在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签
    cloak：斗篷
    -->
    <script>
        // 在vue解析之前，div中必有一个属性v-cloak
        // 在vue解析之后，div中没有一个属性v-cloak
        setTimeout(function () {
        const app = new Vue({
        el: '#app',
        data:{
            message:'你好'
        }
      })
    }, 1000)        
</script>

</body>

在这里插入图片描述

以后几乎不会用到，因为以后我们写的这些模板都会被渲染成一些函数的，真正用到的是一个虚拟DOM，这些东西肯定都不会被显示出来。

以上都是和把data里面的变量值放到DOM里面显示相关的

二、动态绑定属性

1、v-bind指令

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

v-bind作用：动态地绑定一些属性值
在这里插入图片描述

<body>
    <div id='app'>
    <!--错误的做法：这里不可以使用mustache语法-->
    <!-- <img src="{{imgURL}}" alt="">-->
    <!--正确的做法：使用v-bind指令-->
       <img v-bind:src="'https://img13.360buyimg.com/babel/s590x470_jfs/t1/135568/24/1147/76723/5ed628ecEde24b483/c2dd09dcd126a363.jpg.webp'" alt="">
      
    </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>

mustach语法只有在内容显示的地方才能动态解析，否则就只是“{{…}}“字符串，标签属性这里就不能解析mustach语法。

正确做法：想对哪个属性进行动态绑定，就在这个属性前面加一个 v-bind：指令。它解析的就会指导把这个属性值当作一个变量来处理，去data里面找变量的值。：指给哪个属性使用这个指令。

（1）动态绑定src、href等属性

<body>
    <div id='app'>
    <!--错误的做法：这里不可以使用mustache语法-->
    <!-- <img src="{{imgURL}}" alt="">-->
    <!--正确的做法：使用v-bind指令-->
       <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>

v-bind经常用到

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

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

动态绑定哪个类以进行指定的对应操作，如style样式的渲染
在这里插入图片描述
如一个列表中有几个表项，选哪个表项哪个的样式就会对应改变样式，而另一个没选中的则恢复原来颜色。如变绿。

以前可能写函数给这个点击的元素赋值class值而且把原来点击的元素赋值的class给删除，现在可以用v-bind更加简单实现。
动态绑定一个类名的字符串用法比较少。
在这里插入图片描述

一般是对象语法或者数组语法

对象语法：（用的多）
class=”{}” 花括号是对象，对象由键值对构成键：值

在对象中枚举出所有要用到的类名（键），然后值选用Boolean类型的变量表示。用v-bind动态绑定Boolean类型的变量的值

<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'>
   <!-- v-bind:calss"{类名1：boolean，类名2；boolean}"-->
    <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>

固定存在的，肯定要有的class用传统class的写法定义即可，v-bind动态绑定的class不会把它覆盖掉，可共存。
在这里插入图片描述
用时觉得对象选择那个太长了，则可以写到methods属性中，写成函数。

<body>
    <div id='app'>
    <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
    <h2 v-bind:class="getClasses()">{{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
            },

            getClasses: function(){
                return {active: this.isActive, line: this.isLine} 
            },
        }
    })        
</script>

</body>

（3）动态绑定class属性（数组语法）

<body>
    <div id='app'>
    <h2 v-bind:class="[active, line]">{{message}}</h2>
    <h2 v-bind:class="getClasses()">{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
        el:'#app',
        data:{
            message:'你好',
            active: AAAA,
            line:BBBB,
        },
        methods:{
            getClasses: function(){
                return [this.active, this.line]
            },
        }
    })        
</script>

</body>