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。

相关文章

前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2