【Vue学习之从入门到神经】

news2025/4/4 20:44:28

14天学习训练营导师课程: 郑为中《Vue和SpringBoot打造假日旅社管理系统》

目录

1. VUE介绍

2. Vue导入

3. VUE相关指令

4. 显示隐藏相关

5. Vue周边库


1. VUE介绍

  • VUE是目前最流行的前端框架, 基于MVVM设计模式
  • VUE框架两种用法:
    • 多页面应用, 在html页面中引入vue.js框架文件
    • 单页面应用, 通过脚手架的方式使用VUE框架

MVVM设计模式

  • Model:模型, 对应的是数据模型
  • View:视图, 对应的是页面标签相关代码
  • VM:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,并且会对变量进行监听, 当变量的值发生改变时,VM视图模型会自动从内存中找到对应的元素,这样就避免了每次通过DOM操作遍历查找元素了, 从而提高了执行效率

2. Vue导入

引入外部vue.js文件的方式:

  • 直接引入一个CDN服务器VUE框架的网址
  • 把VUE框架文件下载到本地,然后再引入

 

  • CDN服务器地址:以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
    • Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
    • unpkg:https://unpkg.com/vue@2.6.14/dist/vue.min.js
    • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

<!--从CDN服务器引入vue框架文件-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<!--引入本地的vue.js框架文件-->
<script src="js/vue.min.js"></script>

Vue框架工作原理:

  • Vue对象相当于MVVM设计模式中的VM视图模型, 会将页面中可能发生改变的元素和data里面的某个变量进行绑定, 并且会不断监听变量值的改变, 当变量的值发生改变时,会自动从内存中找到对应的元素,并且将元素的显示内容修改掉。

3. VUE相关指令

  • {{变量}} : 插值, 让此处的文本内容和变量进行绑定
  • v-text="变量", 让元素的文本内容和变量进行绑定
  • v-html="变量", 让元素的标签内容和变量进行绑定
  • v-bind:属性名="变量", 让元素的某个属性的值和变量进行绑定
    • :属性名="变量" , 简写
  • v-model="变量", 让控件的值和某个变量进行双向绑定, 变量值改变回影响控件显示的内容,控件的内容发生改变也会影响变量的值
  • v-on:事件名="方法", 给元素添加事件
    • @事件名="方法" , 简写
  • v-for:"变量 in 数组" 循环遍历指令, 遍历的同时生成当前元素

4. 显示隐藏相关

  • v-if="变量"; 让元素是否显示和变量进行绑定,true显示,false不显示(删除元素)
  • v-else 让元素是否显示和上面的v-if状态取反
  • v-show="变量";让元素是否显示和变量进行绑定,true显示,false不显示(隐藏元素) ,需要频繁切换显示状态的时候使用

<!--v-if让元素是否显示和变量进行绑定 true显示 false不显示(删除元素)-->
<h1 v-if="isVisible">刘德华</h1>
<!--v-else是和v-if状态取反-->
<h1 v-else>张学友</h1>
<!--v-show让元素是否显示和变量进行绑定 true显示 false不显示(隐藏元素)-->
<h1 v-show="isVisible">郭富城</h1>

5. Vue周边库

  • vue-cli:vue脚手架
  • vue-resource
  • axios
  • vue-router:路由
  • vuex:状态管理
  • element-ui:基于vue的UI组件库(PC端)官网地址: element.eleme.cn

 

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

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

相关文章

【HMS Core】游戏初始化

前提条件 实现游戏初始化前&#xff0c;必须已经完成AppGallery Connect的配置准备&#xff0c;参见AGC控制台准备。已完成集成SDK和配置混淆脚本。 注意事项 本场景中涉及的功能必须在应用启动时完成&#xff0c;而不是用户在进行登录、支付等操作时才完成&#xff0c;否则可…

无线传感器网络:物理层设计

文章目录Physical Layer TechnologiesRadio FrequenciesNarrow-Band CommunicationSpread SpectrumDSSSFHSSUltra Wide Band (UWB)Optical CommunicationAcoustic CommunicationMagnetic Induction CommunicationRF Wireless CommunicationWireless Channel EffectsAttenuation…

项目工作中,管理者如何合理安排任务优先级?

面对各种工作的时候&#xff0c;你是否总是会手忙脚乱&#xff1f; 在项目工作中&#xff0c;管理者每天面对各种工作&#xff1a;需求、沟通还有其他五花八门任务。 管理者应该如何合理安排自己任务的优先级呢&#xff1f; 在安排任务优先级的时候&#xff0c;我最常用方法…

后台部署运维零碎总结

一、场景 为了实现项目部署简化&#xff0c;尽量都由脚本来完成&#xff0c;需要将许多手动处理过程进行脚本化处理。 二、环境 1、VMware 虚拟机 Download VMware Workstation Pro 2、获取CentOs 镜像 3、使用镜像在虚拟机中安装 4、配置网卡信息&#xff0c;重启网络 三…

【算法基础复习1】差分

目录 一、差分简介 一维差分结论 Acwing.797 差分 P4552 [Poetize6] IncDec Sequence - 差分思维玄学题 一、差分简介 规定a数组下标从1开始 a[0]0b数组下标从1开始定义一个数组b&#xff0c;使 对于a数组 其差分数组b为 a是b的前缀和数组 比如 a[2]…

Python实战 | 如何抓取tx短片弹幕并作词云图分析

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 本次目的&#xff1a;采集tx短片弹幕,并且做词云图可视化分析 这个不少漫迷应该都看过吧~ 哪里都好&#xff0c;就是更新太慢了一点&#xff0c;剧情磨蹭了一点&#xff0c;哎 那今天我们就来采集一下它的弹幕吧&#xff…

我把提高开发效率的VSCode插件分享出来了

前言 最近在家办公&#xff0c;写代码发现没有那么流畅&#xff0c;一看是某些插件没有安装&#xff0c;搞得写代码的效率降低&#xff0c;所以这里有些比较实用的插件推荐给大家 开发实用插件 Settings Sync 利用 Settings Sync &#x1f48e;将 VS Code 的设置保存在gith…

MCE | HPV 疫苗要不要打?

HPV 感染很大概率会患宫颈癌&#xff1f;HPV 感染 ≠ 患宫颈癌超过 90&#xff05; 的 HPV 感染者无症状&#xff0c;并无需干预能在 2 年内清除感染。虽然大部分 HPV 感染会自行消退&#xff0c;但所有感染女性都面临 HPV 感染转为慢性&#xff0c;以及癌前病变发展为浸润性宫…

ViewPager2+TabLayout

效果图&#xff1a; MainActivity public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;private ViewPager2 viewPager2;private int activeColor Color.parseColor("#ff678f");private int normalColor Color.parseColor("#…

C++入门教程||C++中的输入输出||C++ 注释

1. cout输出流的使用&#xff1a; cout输出流需要搭配<<输出操作符来使用&#xff0c;如输出语句&#xff1a; 1 cout<<"Hello"; 即会在屏幕上显示字符串Hello。 本质上&#xff0c;是将字符串"Hello"插入到cout对象里&#xff0c;并以cout…

一些RCE的汇总

RCE自增RCE参考[CTFshow-RCE极限大挑战官方wp]RCE-1[过滤.(]RCE-2p[自增-Array]RCE-3[自增-NAN-<105字符]RCE-4[自增-NAN-<84字符]RCE-5[自增-gettext扩展]72位字符68位字符无参数RCE参考[RCE篇之无参数rce]介绍例题一些能用上的函数前两天刚好ctfshow有个RCE极限大挑战&…

网络基础知识总结+网络设备介绍(运维必备网络知识)

什么是网络 网络是由多台计算机&#xff08;或手机等&#xff09;通过网络设备&#xff08;交换机以及路由器&#xff09;及网线&#xff08;或无线&#xff09;连接起来&#xff0c;按照一定的规范规则则彼此进行通信的系统总称。 为什么要有网络 网络出现的最核心需求就是…

[足式机器人]Part3机构运动微分几何学分析与综合Ch01-3 平面运动微分几何学——【读书笔记】

本文仅供学习使用 本文参考&#xff1a; 《机构运动微分几何学分析与综合》-王德伦、汪伟 《微分几何》吴大任 Ch01-3 平面运动微分几何学1.2.2 瞬心线-21.2.3 点轨迹的Euler-Savary公式1.2.2 瞬心线-2 &#xff08;3&#xff09;平面连杆机构&#xff08;二自由度开链串联机构…

【LeetCode-中等】238. 除自身以外数组的乘积(详解)

题目 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请不要使用除法&#xff0c;且在 O(n) 时…

vue 动态组件 render/jsx

需求 根据用户需求设定的动态呈现表单内容 刚开始 打算使用v-html使用,但是v-html 无法渲染组件&#xff0c;只能显示原生的dom,操作起来实在是不方便。查阅了之后&#xff0c;发现可以用render或者jsx实现【为了能作为Vue模板解析】。于是乎开启了我render之旅~ 使用 <tem…

基于JAVA的图书借阅管理平台【数据库设计、源码、开题报告】

数据库脚本下载地址&#xff1a; https://download.csdn.net/download/itrjxxs_com/86427643 高校图书馆提倡“以人为本”的管理理念&#xff0c;从读者的角度出发&#xff0c;最大程度满足读者群体的文献资源需要。高校图书馆的管理理念和服务模式之间有着紧密的联系&#xff…

一键开启云原生网络安全新视界

本文作者&#xff1a;陈桐乐 李卓嘉 随着云原生的兴起&#xff0c;微服务、容器、kubernetes容器编排正在快速改变着企业软件架构的形态&#xff0c;单体架构、分布式架构、微服务架构&#xff0c;软件架构在持续演进的过程中&#xff0c;变得越来越复杂&#xff0c;管理和维护…

Qt QLabel文本框的使用

文章目录QLabel文本框的使用QLabel文本框的信号和槽实例演示QLabel文本框的用法已剪辑自: http://c.biancheng.net/view/vip_9653.html QLabel 是 Qt 帮我们写好的一个控件类&#xff0c;间接继承自 QWidget 类&#xff0c;它的继承关系如下&#xff1a; QLabel -> QFrame…

消防宣传科普|消防安全知识网上答题挑战赛活动方案

活动背景 为普及消防法律法规和消防安全知识&#xff0c;营造消防宣传月浓厚氛围。集团公司防火办通过“防火安全知识专项学习与竞答”小程序&#xff0c;开展“消防知识网上答题挑战赛”&#xff0c;提升全员消防安全意识&#xff0c;提高抗御火灾、自防自救和组织疏散能力。…

配置FTP站点操作步骤—图解

前提条件(已安装FTP服务器可忽略)&#xff1a; 点击WinR后在运行窗口中输入control&#xff0c;将打开控制面板&#xff0c;选择【程序】—【启动或关闭Windows功能】—点击【Internet Information Services】勾选【FTP服务器】—点击【确定】按钮按照即可。 1.点击WinR后在运…