web学习笔记(五十六)

目录

1.绑定类名和style

1.1 绑定类名

1.1.1 绑定单个类名

1.1.2 绑定多个类名

1.2 style相关知识 

2. vue的响应式原理

3. v-once

 4.本地搭建Vue单页应用

4.1 安装Vue脚手架

4.2 安装对应的包文件

4.3 运行项目


1.绑定类名和style

1.1 绑定类名

1.1.1 绑定单个类名

绑定单个类名可以直接通过属性的绑定方法v-bind:来设置class的值。

<style>.red {color: red;}
</style>
<body><div id="app"><!-- 绑定一个类名 --><h1 :class="classname">好好学习天天向上</h1></div><script src="./vue.js"></script><script>new Vue({el: '#app',data: {classname: 'red',}})</script></body>

1.1.2 绑定多个类名

绑定多个类名有两种方式,可以将类名以对象的形式来编写,也可以将类名以数组的方式来编写。

<style>.red {color: red;}.size {font-size: 50px;}
</style>
</head><body>
<div id="app"><!-- 绑定多个类名:以对象的形式来编写 --><h2 :class="{red:true,size:isSize}">学习使我快乐</h2><button @click="changeSize">改变字体的大小</button><!-- 绑定多个类名时,可以将值写成数组的形式 --><h3 :class="[classname,size]">好好学习,天天加油</h3><h4 :class="isRed?classname:size">11111</h4></div>
<script src="./vue.js">
</script>
<script>new Vue({el: '#app',data: {classname: 'red',size: 'size',isSize: false,isRed: true,},methods: {changeSize: function () {this.isSize = !this.isSize;}}})
</script></body>

也可以通过三元表达式来动态添加类名。

  <p @click="clickP(index)" :class="{ active: curIndex == index }">{{ i }}</p>

1.2 style相关知识 

绑定style属性有两种方法:(1)直接使用对象的方式进行样式绑定;(2)通过数组的方式将多个样式对象绑定到一个元素上。


<style>.red {color: red;}.size {font-size: 50px;}
</style>
<body>
<div id="app"><!-- 绑定style属性的两种方法 --><div :style="{width:width,height:width,background:background}"></div><div :style="style"></div>
</div>
<script src="./vue.js">
</script>
<script>new Vue({el: '#app',data: {width: '200px',background: 'blue',style: {width: '100px',background: 'pink',height: '100px',marginTop:'20px'}}})
</script>
</body>

2. vue的响应式原理

 vue2响应式原理:vue是一个典型的基于MVVM设计思想的框架,MVVM中M表示数据层(Model)V表示视图层(View)  VM(viewmodel)表示用来连接视图层和数据层的桥梁,当数据层发生改变时会通过vm通知视图层更新视图,当视图层发生改变时会通过vm通知数据层更新数据,这就是典型的双向数据绑定。

    vue2响应式原理采用Object.defineProperty劫持data对象的各个属性,当属性发生改变时就可以通知视图层更新视图。

3. v-once

v-once表示事件只触发一次,即只允许初始化渲染,后续更新数据视图不再渲染。

<body><div id="app"><!-- v-once只允许初始化渲染 更新数据视图不再渲染 --><h1 v-once>{{msg}}</h1><button @click="changeMsg">改变</button></div><script src="./vue.js"></script><script>let vm= new Vue({el: '#app',data: {msg: '好好学习 天天向上'},methods:{changeMsg(){this.msg='学习使我快乐'}}})console.log(vm);</script></body>

 4.本地搭建Vue单页应用

4.1 安装Vue脚手架

Vue 的脚手架是一个用于快速搭建 Vue.js 项目的工具集合。它提供了一种标准化的项目结构、开发流程和一些常用的工具,使开发者能够更高效地创建和管理 Vue 项目。

(1)安装Vue脚手架的前提是确保我们已经安装了18.3及以上版本的node.js。然后在打算创建项目的目录上输入cmd,以打开cmd框。

(2)输入命令行:npm create vue@latest ,然后根据提示输入项目名,及选择自己所需要的配置。

4.2 安装对应的包文件

cd 文件名进入对应的文件夹后输入npm i 命令运行所需包文件。

4.3 运行项目

安装完脚手架后项目内部会自动生成一批文件。

用  VS Code打开文件后在继承终端输入 npm run dev来运行项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/840828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openstack报错:openstack volume service list The server is currently unavailable.

openstack报错&#xff1a; [rootcontroller ~]# openstack volume service list The server is currently unavailable. Please try again at a later time.<br /><br /> The Keystone service is temporarily unavailable.(HTTP 503)操作&#xff1a;做cinder 报…

计算机网络协议

网络协议 基于TCP的应用层协议 POP3&#xff08;Post Office Protocol 3&#xff09;&#xff1a; 用于支持客户端远程管理服务器上的电子邮件。它支持**“离线”邮件处理**&#xff0c;即邮件发送到服务器上后&#xff0c;一旦邮件被POP3客户端下载到本地计算机&#xff0c;…

NL6621 实现获取天气情况

一、主要完成的工作 1、建立TASK INT32 main(VOID) {/* system Init */SystemInit();OSTaskCreate(TestAppMain, NULL, &sAppStartTaskStack[NST_APP_START_TASK_STK_SIZE -1], NST_APP_TASK_START_PRIO); OSStart();return 1; } 2、application test task VOID TestAp…

【vue3】计算属性 computed 与 lazy

在 Vue 3 中&#xff0c;computed 和 lazy 都是与响应式系统和数据计算相关的概念&#xff0c;但它们具有不同的用途和行为。 computed 计算属性 computed 是 Vue 中的一个核心功能&#xff0c;用于声明依赖于其他响应式数据的计算属性。当计算属性的依赖数据发生变化时&…

Python3.10用Pyinstaller打包exe报错: IndexError: tuple index out of range

使用Python3.10时&#xff0c;Pyinstaller出现IndexError: tuple index out of range错误&#xff0c;部分异常信息如下&#xff1a; .......yield from get_instructions(code_object)File "C:\Program Files\Python\lib\dis.py", line 338, in _get_instructions_…

网页上的超链接复制到Excel中+提取出网址+如何保存

定义 超链接网页标题地址栏 使用的工具 2024年的WPS是不行的&#xff0c; 如果把知乎网页上的超链接复制到WPS中的Excel中&#xff0c;就会丢掉地址&#xff0c;只剩下网页标题 具体操作&#xff08;转载,在Excel2013上验证可行&#xff09; [1]启用【开发工具】&#xff…

Golang net/http标准库常用方法(三)

大家好&#xff0c;针对Go语言 net/http 标准库&#xff0c;将梳理的相关知识点分享给大家~~ 围绕 net/http 标准库相关知识点还有许多章节&#xff0c;请大家多多关注。 文章中代码案例只有关键片段&#xff0c;完整代码请查看github仓库&#xff1a;https://github.com/hltfa…

科技前沿:IDEA插件Translation v3.6 带来革命性更新,翻译和发音更智能!

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

python获取安装路径盘符

文章目录 一、前言二、实现方法一、前言 python写的客户端工具需要安装时,可以给用户一个默认的安装路径,如果直接写死个D、E、F盘什么的,那用户可能没有那个盘符,但是如果直接指定系统盘C盘,又不是那么友好,所以默认指定的安装路径应该尽量满足下面的要求: 盘符存在盘…

【MySQL精通之路】系统变量-系统变量权限

系统变量可以具有影响整个服务器操作的全局值&#xff0c;也可以具有仅影响当前会话的会话值&#xff0c;或者两者兼有&#xff1a; 对于动态系统变量&#xff0c;SET语句可用于更改其全局或会话运行时值&#xff08;或同时更改两者&#xff09;&#xff0c;以影响当前服务器实…

spring boot 启动类加载的优化

1减少依赖&#xff0c;不用的依赖去掉&#xff0c; 2、使用自定义配置bean进行加载&#xff0c;减少更多的不必要加载的组件 3、启动spring boot的配置懒加载模式&#xff0c; 4、将需要启动的bean写入到项目中的文件&#xff0c;去加载该目录下的bean文件 5、使用编译时优化&a…

利用天气API接口自己DIY一个预报小管家

天气预报查询API 是一种实用的日常工具&#xff0c;它通过编程方式为开发者提供实时的天气数据。开发者可以通过简单的代码调用&#xff0c;与天气预报服务提供商进行交互&#xff0c;获取特定地区的天气信息&#xff0c;如温度、湿度、风速、风向、降水量等&#xff0c;以及未…

【车载以太网测试从入门到精通】——SOME/IP协议测试

系列文章目录 【车载以太网测试从入门到精通】系列文章目录汇总 文章目录 系列文章目录前言一、SOME/IP时间参数1.INITIAL_DELAY时间2.REPETITIONS_MAX次数3.REPETITIONS_BASE_DELAY时间4.CYCLIC_OFFER_DELAY时间5.TIME_TO_LIVE时间6.SUBSCRIBE_RETRY_DELAY时间二、SOME/IP服务…

【文末附gpt升级方案】TikTok Symphony AI套件:智能视频制作的新篇章

TikTok Symphony AI套件&#xff1a;智能视频制作的新篇章 摘要 随着短视频平台的兴起&#xff0c;视频内容的创作与制作已成为品牌方吸引用户、传递信息的重要手段。TikTok作为全球领先的短视频平台&#xff0c;近日宣布推出Symphony AI套件&#xff0c;旨在通过人工智能技术…

OWASP top10--SQL注入(一)

SQL注入式攻击技术&#xff0c;一般针对基于Web平台的应用程序.造成SQL注入攻击漏洞的原因&#xff0c;是由于程序员在编写Web程序时&#xff0c;没有对浏览器端提交的参数进行严格的过滤和判断。用户可以修改构造参数&#xff0c;提交SQL查询语句&#xff0c;并传递至服务器端…

XILINX FPGA DDR 学习笔记(一)

DDR 内存的本质是数据的存储器&#xff0c;首先回到数据的存储上&#xff0c;数据在最底层的表现是地址。为了给每个数据进行存放并且在需要的时候读取这个数据&#xff0c;需要对数据在哪这个抽象的概念进行表述&#xff0c;我们科技树发展过程中把数据在哪用地址表示。一个数…

【AI】DeepStream(06):deepstream-test4-示例演示

【AI】AI学习目录汇总 1、简介 deepstream-test1:演示各种 DeepStream 插件构建 GStreamer 管道。从文件中获取视频、解码、批处理,然后进行对象检测,最后在屏幕上渲染框。 deepstream-test2:和deepstream-test1相比,多了目标跟踪和分类,对目标跟踪并使用数字做编号,并…

K8S认证|CKA题库+答案| 11. 创建PVC

11、创建PVC 您必须在以下Cluster/Node上完成此考题&#xff1a; Cluster Master node Worker node ok8s master …

失落的方舟台服预下载教程 一键下载+账号注册教程

失落的方舟台服预下载教程 一键下载&#xff0b;账号注册教程 是一款今年备受瞩目的游戏&#xff0c;将于5月30日正式上线&#xff0c;这款游戏搭建在虚幻引擎的基础上&#xff0c;为玩家们带来了极佳的视觉体验。这款游戏秉承着MMO类型游戏一贯的玩法&#xff0c;但是制作组在…

海康威视硬盘录像机NVR连接公网视频监控平台,注册失败,抓包发现有403 forbidden的问题解决

目录 一、问题描述 二、问题定位 1、查看DVR的配置 2、查看需要使用的端口是否开放 3、查看日志 4、抓包 &#xff08;1&#xff09;找出错误 &#xff08;2&#xff09;查看数据包内容 三、问题分析 1、国标28181中的域的概念 2、域应该如何定义 &#xff08;1&am…