39 vue.js

1.1  vue是什么?

vue是当下主流的前端框架,用于构建用户界面的  渐进式    自底向上增量开发的MVVM框架。

渐进式:其实每个框架都有自己的特点,在开发的过程中,可以在原有的系统上,把其中一两个功能用VUE开发,也可以整个系统都用VUE开发,------不会做职责以外的事情。

自底向上增量开发:就是先把页面写好,然后在写好的页面的基础上,再去逐一添加功能和效果,由简单到繁琐的过程。

1.2  vue的特点?

Vue.js 是一款轻量、高效、灵活且易上手的 JavaScript 框架,具有以下特点:

  1. 渐进式框架:Vue.js 是一款渐进式框架,可以将它作为一个库来使用,也可以将它作为一个完整的框架来使用。这使得它非常灵活和可扩展。

  2. 双向数据绑定:Vue.js 支持双向数据绑定,即当数据发生变化时,视图会自动更新,当视图发生变化时,数据也会自动更新。

  3. 组件化开发:Vue.js 采用组件化开发,可以将一个页面拆分成多个独立的组件,每个组件具有自己的状态和行为,可以通过 props 和 events 来进行组件之间的通信。

  4. 模板语法:Vue.js 的模板语法简洁易懂,支持插值、指令、过滤器等,使得编写模板变得更加简单。

  5. 虚拟 DOM:Vue.js 使用虚拟 DOM 技术来优化 DOM 操作,可以避免频繁操作 DOM 导致性能下降的问题。

  6. 生命周期:Vue.js 组件具有生命周期,可以在组件的不同阶段做出相应的操作,例如在 created 钩子函数中初始化数据,在 mounted 钩子函数中进行 DOM 操作等。

  7. 插件机制:Vue.js 提供了插件机制,可以方便地扩展 Vue.js 的功能,例如 Vue Router、Vuex 等。

1.3  什么是MVVM?

是Model-View-ViewModel的简写

M:model   模型 > 数据 > 变量    data数据

V:view      视图 > 页面               模板

VM:viewModel 视图模型>用来关联数据与视图之前的桥梁 vue实例

1.4  可以建多个VUE实例吗?怎么用?

创建多个实例代码

<!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="./node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="demoDiv"><h1>{{text}}</h1></div><div id="demoDivb"><h1>{{text}}</h1></div><script>new Vue({el:"#demoDiv",data:{text:"我是第一个实例",}})new Vue({el:"#demoDivb",data:{text:"我是第二个实例"}})</script></body>
</html>

1.5  {{}}是什么?

{{}}:它是VUE中的一种语法,它有很多名字,模板语法 双花括号赋值法 vue数据插值

作用:在{{}}中间写的表达式,可以直接在页面中解析并展示。

语法:{{表达式}}

下期更新:

vue的延迟挂载是什么?$mount是什么?

data的写法分别是什么?

什么是指令?

v-model 作用

双向绑定是什么与原理

v-show是什么?

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

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

相关文章

【热门前端【vue框架】】——vue框架和node.js的下载和安装保姆式教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;程序员-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

如何修复Django中的“ImproperlyConfigured”错误?

在Django中&#xff0c;通常会遇到“ImproperlyConfigured”错误&#xff0c;这表示配置不正确或缺少必要设置。下面是一些常见的修复方法&#xff1a; 检查settings.py文件&#xff1a;确保设置了正确的数据库配置、应用程序、模板路径、静态文件路径等。确保所有必要的设置都…

使用Nginx和内网穿透实现多个本地Web站点的公网访问

在需要将多个本地Web站点暴露到公网的情况下&#xff0c;可以通过Nginx配置文件的修改结合内网穿透技术来实现。下面是具体的步骤和示例&#xff1a; 1. 安装和配置Nginx 首先&#xff0c;确保已经在服务器上安装了Nginx&#xff0c;并且配置了基本的Nginx服务器块&#xff0…

【ARM 裸机】模仿 STM32 驱动开发

1、修改驱动 对于 STM32 来说&#xff0c;使用了一个结构体将一个外设的所有寄存器都放在一起&#xff0c;在上一节的基础上进行修改&#xff1b; 1.1、添加清除 bss 段代码&#xff0c; 1.2、添加寄存器结构体 新建一个文件&#xff0c;命名imx6u.h&#xff0c;注意地址的连…

前端如何优化工程

文章目录 使用CDN1. 请求定位&#xff1a;2.内容缓存&#xff1a;3.负载均衡&#xff1a;4.边缘计算&#xff1a; 优化Webpack1.合理配置Loader&#xff1a;2.优化代码分割&#xff1a;3.压缩和优化输出文件&#xff1a;4.利用Tree Shaking&#xff1a;5.优化解析速度&#xff…

NLP Step by Step -- How to use pipeline

正如我们在摸鱼有一手&#xff1a;NLP step by step -- 了解Transformer中看到的那样&#xff0c;Transformers模型通常非常大。对于数以百万计到数千万计数十亿的参数&#xff0c;训练和部署这些模型是一项复杂的任务。此外&#xff0c;由于几乎每天都在发布新模型&#xff0c…

Linux系统网络---DNS域名解析服务

目录 一、DNS的简介 DNS系统的分布式数据结构&#x1f447; DNS系统类 两种查询方式 二.正向解析实验 1.先关闭防火墙、selinux 2.安装bind 3.查看配置、修改配置 4.修改区域配置文件 正向解析&#x1f447; 反向解析&#x1f447; 5.修改 正向解析&#x1f…

js音频指定扬声器

做音视频开发时候&#xff0c;看到阿里音视频能力&#xff0c;有这个功能&#xff0c;怀着好奇的心去搜索果然发现是有办法做到的&#xff0c;可能比较冷门平时用不到&#xff0c;记录下&#xff1b; const devices await navigator.mediaDevices.enumerateDevices(); const a…

6.Linux常用命令---文件目录管理(3)

6.37 read --读取标准输入命令 read内部命令被用来从标准输入读取单行数据。这个命令可以用来读取键盘输入&#xff0c;当使用重定向时&#xff0c;可以读取文件中的一行数据。 read a < 123.txt #读取文件123.txt中的内容&#xff0c;保存到变量a中参数&#xff1a; -a&a…

python环境安装jupyter

1 前提条件&#xff1a;python环境 系统&#xff1a;win10 python&#xff1a;本地已经有python&#xff0c;可以查看本地的python版本&#xff1a; C:\Users\PC>python --version Python 3.8.10 2 安装jupyter并启动 安装jupyter C:\Users\PC>pip install jupyter …

Qt xml示范

1.数据格式 #ifndef XML_DATA_H #define XML_DATA_H#include<QWidget>struct Student {int s_id;QString s_name;double s_math_score;double s_english_score;}; struct Teacher{int t_id;QString t_name;QVector<Student> t_students_v; };#endif // XML_DATA_H…

笔试题-构建非二叉树,且非递归遍历-利用栈

普通版本 package com.fang.恒天软件;import java.util.*; import java.util.stream.Stream;public class Tree {TreeNode head;public Tree(TreeNode node) {this.head node;}class ForeachNoMethodException extends Exception {public ForeachNoMethodException(String me…

面试:JVM垃圾回收

一、三种垃圾回收算法 1、标记清除&#xff08;已废弃&#xff09; 找到根对象&#xff08;局部变量正在引用的对象、静态变量正在引用的对象&#xff09;&#xff1b;沿着根对象的引用链&#xff0c;查看当前的对象是否被根对象所引用&#xff0c;若被引用&#xff0c;则加上…

区块链 | OpenSea 相关论文:Toward Achieving Anonymous NFT Trading(一)

​ &#x1f951;原文&#xff1a; Toward Achieving Anonymous NFT Trading &#x1f951;写在前面&#xff1a; 本文对实体的介绍基于论文提出的方案&#xff0c;而非基于 OpenSea 实际采用的方案。 其实右图中的 Alice 也是用了代理的&#xff0c;不过作者没有画出来。 正文…

机器视觉检测为什么是工业生产的刚需?

机器视觉检测在工业生产中被视为刚需&#xff0c;主要是因为它具备以下几个关键优势&#xff1a; 提高精度与效率&#xff1a;机器视觉系统可以进行高速、高精度的检测。这对于保证产品质量、减少废品非常关键。例如&#xff0c;在生产线上&#xff0c;机器视觉可以迅速识别产品…

UEFI安全启动模式下安装Ubuntu的NVIDIA显卡驱动

UEFI安全启动模式下安装ubuntu的nvidia显卡驱动 实践设备&#xff1a;华硕FX-PRO&#xff08;NVIDIA GeForce GTX 960M&#xff09; 一、NVIDIA官网下载驱动 1.1在浏览器地址栏输入https://www.nvidia.cn/drivers/lookup/进入网站&#xff0c;接着手动驱动搜索&#xff0c;并…

The Clock and the Pizza [NeurIPS 2023 oral]

本篇文章发表于NeurIPS 2023 (oral)&#xff0c;作者来自于MIT。 文章链接&#xff1a;https://arxiv.org/abs/2306.17844 一、概述 目前&#xff0c;多模态大语言模型的出现为人工智能带来新一轮发展&#xff0c;相关理论也逐渐从纸面走向现实&#xff0c;影响着人们日常生活…

探讨mfc100u.dll丢失的解决方法,修复mfc100u.dll有效方法解析

mfc100u.dll丢失是一个比较常见的情况&#xff0c;由于你电脑的各种操作&#xff0c;是有可能引起dll文件的缺失的&#xff0c;而mfc100u.dll就是其中的一个重要的dll文件&#xff0c;它的确实严重的话是会导致程序打不开&#xff0c;系统错误的。今天我们就来给大家科普一下mf…

太速科技-多路PCIe的阵列计算全国产化服务器

多路PCIe的阵列计算全国产化服务器 多路PCIe的阵列计算全国产化服务器以国产化处理器&#xff08;海光、飞腾ARM、算能RSIC V&#xff09;为主板&#xff0c;扩展6-8路PCIe3.0X4计算卡&#xff1b; 计算卡为全国产化的AI处理卡&#xff08;瑞星微ARM&#xff0c;算能AI&#x…

【stm32】swjtu西南交大嵌入式实验三 外部中断实验:按键中断

实验内容&#xff1a; 1、编写程序&#xff0c;设置主程序&#xff1a;跑马灯以 0.2s 的速度旋转&#xff1b;将 KB1 设置为外部中断&#xff0c;下 降沿触发&#xff0c;按下 KB1 则全彩灯的 R 灯闪烁 5 次。编译、下载程序到开发板&#xff0c;观察实 验现象&#xff1b;按下…