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。

相关文章

前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
在React中引入Tailwind CSS的完整指南

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2