Vue备课

2023-10-30 00:40
文章标签 javascript vue frontend 备课

本文主要是介绍Vue备课，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue备课笔记

  • 模板语法P12-P16
    • 内容概述
    • 一、插值操作
      • 1、Mustache语法
      • 2、v-once指令的使用
      • 3、v-for循环遍历指令
      • 4、v-html
      • 5、 v-text指令
      • 6、v-pre指令
      • 7、v-cloak指令
    • 二、动态绑定属性
      • 1、v-bind指令
        • （1）动态绑定src、href等属性
        • （2）动态绑定class属性（对象语法）
        • （3）动态绑定class属性（数组语法）

模板语法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-cloaksetTimeout(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>

这篇关于Vue备课的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/304473。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2