Vue基础概述

Vue框架概述

什么是Vue框架

在这里插入图片描述

  • Vue是一种流行的渐进式JavaScript框架,用于构建Web用户界面。它具有易学、轻量级、灵活性强、高效率等特点,并且可以与其他库和项目集成。是目前最流行的前端框架之一.
  • 框架的两种用法:
    • 多页面应用: 在html页面中引入vue.js框架文件
    • 单页面应用:通过脚手架的方式使用VUE框架(下阶段开始接触)

如何引入vue.js

  • 从CDN服务器引入
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  • 把vue.js文件下载到本地后引入
<script src="js/vue.min.js"></script>

Vue框架的HelloWorld
在这里插入图片描述

Vue框架执行原理

代码中new 的VUE对象就相当于是MVVM设计模式中的VM视图模型, 此对象负责将页面中发生改变的元素和data里面的变量在内存中绑定, 并且会不断监听变量值的改变, 当检测到变量值发生改变时, 会自动从内存中找到与之对应的元素,并且让元素的内容跟着发生改变.

基本指令

文本相关指令

  • {{变量}}: 插值, 让当前位置的文本内容和变量进行绑定
  • v-text=“变量” 让元素的文本内容和变量进行绑定
  • v-html=“变量” 让元素的标签内容和变量进行绑定

属性绑定和双向绑定

  • :属性名=“变量” 让元素的某个属性的值和变量进行绑定
  • v-model=“变量” 双向绑定,让控件的值和变量进行双向绑定, 当需要获取控件的值的时候使用
    • 所谓双向绑定,就是当变量的值发生改变时,与其绑定的控件内容会跟着发生改变, 当用户操作控件内容时,对应的变量也会跟着发生改变.

事件绑定

  • @事件名=“方法” 给元素添加事件, 需要将事件触发的方法声明在methods里面

在这里插入图片描述

v-for循环遍历指令

  • v-for=“(变量,下标) in 数组” 循环遍历指令, 遍历的同时会生成元素,当需要让页面的内容和数组进行绑定时使用

显示隐藏相关指令

  • v-if=“变量” 让元素是否显示和变量进行绑定, true显示 false不显示(删除元素)
  • v-else 让元素的显示状态和v-if取反
  • v-show=“变量” 让元素是否显示和变量进行绑定, true显示 false不显示(隐藏元素)

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

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

相关文章

全倒装共阴节能COB超微小间距LED显示屏主导新型显示技术

COB&#xff08;Chip on Board&#xff09;技术最早发源于上世纪60年代&#xff0c;是将LED芯片直接封装在PCB电路板上&#xff0c;并用特种树脂做整体覆盖。COB实现“点” 光源到“面” 光源的转换。点间距有P0.3、P0.4、P0.5、P0.6、P0.7、P0.9、P1.25、P1.538、P1.5625、P1.…

NanoPC-T6安装redriod笔记

这里主要用于自己对安装过程的记录&#xff0c;中间可能记录比较粗糙。 重新编译内核 参考链接&#xff1a;【环境搭建】基于linux的NanoPC-T6_LTS系统固件编译环境搭建 基于docker构建编译环境 docker run -it \ --privilegedtrue --cap-addALL \ --name nanopc_t6_lts_en…

ESP32!Thonny+MicroPython+ESP32开发环境搭建!!

准备工具&#xff1a; ThonnyMicroPythonESP32 一.Thonny安装 下载地址&#xff1a;Thonny, Python IDE for beginnershttps://thonny.org/ 二.下载esp32环境——根据型号下载 下载地址&#xff1a;MicroPython - Python for microcontrollershttps://micropython.org/dow…

Spring Boot 多数据源配置(JPA)

目录 前言 前置环境 pom yml Entity Dao Config Controller 演示 前言 一般一个系统至少有一个数据源&#xff0c;用来持久化业务数据以及查询。单个数据源的系统很常见&#xff0c;在 Spring Boot 框架下配置也很简单。在约定大于配置这个思想下&#xff0c;只需要在…

vue 中计算属性可以接收参数

代码中的value就是接收的参数 计算属性要接收参数要写在返回的时候 computed: {isButtonDisabled() {return (value) > {const num parseInt(value);return isNaN(num) || num < 0}},},//计算属性aaa(){return (value) >{写逻辑return 返回值}} 使用 <el-butto…

Python OpenCV 深入理解(二)

引言 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个用于计算机视觉的开源软件库。它提供了大量的图像处理和机器视觉功能&#xff0c;支持多种编程语言&#xff0c;其中Python接口因其易用性和快速原型设计能力而受到广泛欢迎。本文将详细介绍如何…

基于OMS构建OceanBase容灾双活架构的实践

在实际生产环境中&#xff0c;对于关键业务&#xff0c;往往会有容灾双活的需求。除了OceanBase提供的主备库能力&#xff0c;通过官方工具OMS也可以实现容灾双活架构。目前&#xff0c;通过OMS实现的双活架构仅支持OceanBase数据库之间的数据同步。 要通过OMS实现双活架构&am…

合宙LuatOS开发板Core_Air780EP使用说明

Core-Air780EP 开发板是合宙通信推出的基于 Air780EP 模组所开发的&#xff0c; 包含电源&#xff0c;SIM卡&#xff0c;USB&#xff0c;天线&#xff0c;音频等必要功能的最小硬件系统。 以方便用户在设计前期对 Air780EP模块进行性能评估&#xff0c;功能调试&#xff0c;软…

快速学习GO语言总结

干货分享&#xff0c;感谢您的阅读&#xff01;备注&#xff1a;本博客将自己初步学习GO的总结进行分享&#xff0c;希望大家通过本博客可以在短时间内快速掌握GO的基本程序编码能力&#xff0c;如有错误请留言指正&#xff0c;谢谢&#xff01; 一、初步了解Go语言 &#xf…

基于约束大于规范的想法,封装缓存组件

架构&#xff1f;何谓架构&#xff1f;好像并没有一个准确的概念。以前我觉得架构就是搭出一套完美的框架&#xff0c;可以让其他开发人员减少不必要的代码开发量&#xff1b;可以完美地实现高内聚低耦合的准则;可以尽可能地实现用最少的硬件资源&#xff0c;实现最高的程序效率…

职业院校如何建设人工智能实训室

随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;越来越多的职业院校开始意识到培养具备AI技能的人才的重要性。为了让学生能够在实践中学习&#xff0c;职业院校需要建立能够支持实际操作的人工智能实训室。本文将探讨职业院校应该如何规划和建设一个高效且…

大模型产品经理学习路线,2024最新,从零基础入门到精通,非常详细收藏我这一篇

随着人工智能技术的发展&#xff0c;尤其是大模型&#xff08;Large Model&#xff09;的兴起&#xff0c;越来越多的企业开始重视这一领域的投入。作为大模型产品经理&#xff0c;你需要具备一系列跨学科的知识和技能&#xff0c;以便有效地推动产品的开发、优化和市场化。以下…

《Cloud Native Data Center Networking》(云原生数据中心网络设计)读书笔记 -- 09部署OSPF

本章的目的是帮助网络工程师确定网络的理想 OSPF 配置。本章将回答以下问题 应何时在数据中使用OSPF ?配置 OSPF 的关键设计原则是什么?OSPFv2 和 OSPFv3 之间有什么区别&#xff0c;应如何使用?如何在路由协议栈中配置 OSPF ?如何在服务器上配置 OSPF&#xff0c;例如为容…

Electron 项目实战 03: 实现一个截图功能

实现效果 实现思路 创建两个window&#xff0c;一个叫mainWindow&#xff0c;一个叫cutWindowmainWindow&#xff1a;主界面用来展示截图结果cutWindow&#xff1a;截图窗口&#xff0c;加载截图页面和截图交互逻辑mainWindow 页面点击截图&#xff0c;让cutWIndow 来实现具体…

‌智慧公厕:城市文明的智慧新篇章‌@卓振思众

在日新月异的城市化进程中&#xff0c;公共设施的智能化升级已成为不可逆转的趋势。其中&#xff0c;智慧公厕作为城市智慧化建设的重要组成部分&#xff0c;正悄然改变着我们的生活。智慧公厕&#xff0c;这一融合了物联网、大数据、云计算等现代信息技术的创新产物&#xff0…

Django Admin管理后台导入CSV

修改管理模型&#xff0c;代码如下&#xff1a; class CsvImportForm(forms.Form):csv_file forms.FileField() admin.register(Hero) class HeroAdmin(admin.ModelAdmin, ExportCsvMixin):...change_list_template "entities/heroes_changelist.html"def get_url…

Opencv中的直方图(2)计算图像的直方图函数calcHist()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一组数组的直方图。 函数 cv::calcHist 计算一个或多个数组的直方图。用于递增直方图bin的元组的元素是从相同位置的相应输入数组中获取的。…

MATLAB中cond函数用法

目录 语法 说明 示例 矩阵的条件数 1-范数条件数 cond函数的功能是返回逆运算的条件数。 语法 C cond(A) C cond(A,p) 说明 C cond(A) 返回 2-范数逆运算的条件数&#xff0c;等于 A 的最大奇异值与最小奇异值之比。 C cond(A,p) 返回 p-范数条件数&#xff0c;其中…

虚幻地形高度图生成及测试

虚幻地形高度图生成及测试 虚幻引擎地形系统将高度数据存储在高度图中&#xff0c;这是一个灰阶图像&#xff0c;使用黑白色值来存储地貌高程。在高度图中&#xff0c;纯黑色值表示最低点&#xff0c;纯白色值表示最高点。支持16位灰阶PNG、8位灰阶r8及16位灰阶r16格式。 本文…

C++设计模式——Template Method模板方法模式

一&#xff0c;模板方法模式的定义 模板方法模式是一种行为型设计模式&#xff0c;它先定义了一个算法的大致框架&#xff0c;然后将算法的具体实现步骤分解到多个子类中。 模板方法模式为算法设计了一个抽象的模板&#xff0c;算法的具体代码细节由子类来实现&#xff0c;从…