前端框架入门之Vue _el和data的两种写法 分析MVVM模型

目录

_el与data的两种写法

MVVM模型


_el与data的两种写法

查看vue的实例对象

我们在这边注释掉了el属性

这样的话div容器就绑定不了vue实例

当我们可以在这里写一个定时任务

然后再回头指定

这个mount有挂载的意思

就是把容器对象交给vue实例后

去给他挂载指定的对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><h1>你好 {{name}}</h1></div><script type="text/javascript">//阻止 Vue 在启动时生成生产提示Vue.config.productionTip=false;//创建 Vue 实例 const v= new Vue({// el:'#root',data:{name:'尚硅谷'}}) console.log(v);setTimeout(() =>{v.$mount('#root')},5000)</script></body></html>

data的写法

对象式

函数式

  //创建 Vue 实例 new Vue({el:'#root',// 对象式data:{name:'尚硅谷'},// 函数式data:function(){return {name :'尚硅谷'}}})

箭头函数不使用this的标准绑定规则,而是根据外层作用域来决定this

比如说window

我们选择的是标准的函数function

总结

一般上

我们data用函数式书写

MVVM模型

架构模型

Vue的开发在一定程度上参考的是MVVM模型

分析

我们通过Dom监听

返回给js模型

数据是存在模型里的

Vue把找到数据 通过数据绑定来返回到View视图层上

把数据放到指定位置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入 vue --><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root"><h1>学校名称 {{name}}</h1><h1>学校地址 {{address}}</h1></div><script type="text/javascript">//阻止 Vue 在启动时生成生产提示Vue.config.productionTip=false;//创建 Vue 实例 new Vue({el:'#root',data:function(){return {name :'北华大学',address:'吉林省吉林市'}}})</script></body></html>

分析

就是把一堆乱七八糟的数据

和dom操作做了一个桥梁

连接

就是在前端操作的时候 先写出数据

再写出模版代码

用框架的插值语法把数据写到代码里面去

我们发现vue实例

里面有全部的数据

所有vue实例里面的属性 我们全部能看见

我们尝试拿一下数据

小结

个人号推广

博客主页

朱道阳-CSDN博客

Web后端开发

https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482

Web前端开发

https://blog.csdn.net/qq_30500575/category_12642989.html?spm=1001.2014.3001.5482

数据库开发

https://blog.csdn.net/qq_30500575/category_12651993.html?spm=1001.2014.3001.5482

项目实战

https://blog.csdn.net/qq_30500575/category_12699801.html?spm=1001.2014.3001.5482

算法与数据结构

https://blog.csdn.net/qq_30500575/category_12630954.html?spm=1001.2014.3001.5482

计算机基础

https://blog.csdn.net/qq_30500575/category_12701605.html?spm=1001.2014.3001.5482

回忆录

https://blog.csdn.net/qq_30500575/category_12620276.html?spm=1001.2014.3001.5482

 

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

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

相关文章

Web前端-Web开发HTML基础2-list

一. 基础 1. 写一个列表标签&#xff0c;生成一个有三条记录的无序列表&#xff1b; 2. 写一个列表标签&#xff0c;生成一个有四条记录的无序列表&#xff1b; 3. 写一个列表标签&#xff0c;生成一个有五条记录的无序列表&#xff1b; 4. 写一个列表标签&#xff0c;生成一个…

深入解析HTTPS与HTTP

在当今数字化时代&#xff0c;网络安全已成为社会各界关注的焦点。随着互联网技术的飞速发展&#xff0c;个人和企业的数据安全问题日益凸显。在此背景下&#xff0c;HTTPS作为一种更加安全的通信协议&#xff0c;逐渐取代了传统的HTTP协议&#xff0c;成为保护网络安全的重要屏…

【概率论三】参数估计

文章目录 一. 点估计1. 矩估计法2. 极大似然法1. 似然函数2. 极大似然估计 3. 评价估计量的标准2.1. 无偏性2.2. 有效性2.3. 一致性 三. 区间估计1. 区间估计的概念2. 正态总体参数的区间估计 参数估计讲什么 由样本来确定未知参数参数估计分为点估计与区间估计 一. 点估计 所…

十四、(正点原子)Linux MISC驱动

misc 的意思是混合、杂项的&#xff0c;因此 MISC 驱动也叫做杂项驱动&#xff0c;也就是当我们板子上的某些外设无法进行分类的时候就可以使用 MISC 驱动。 MISC 驱动其实就是最简单的字符设备驱动&#xff0c;通常嵌套在 platform 总线驱动中&#xff0c;实现复杂的驱动。 一…

IDEA启动Web项目总是提示端口占用

文章目录 IDEA启动Web项目总是提示端口占用一、前言1.场景2.环境 二、正文1.场景一:真端口占用2. 场景二:假端口占用 IDEA启动Web项目总是提示端口占用 一、前言 1.场景 IDEA启动Web项目总是提示端口占用&#xff1a; 确实是端口被占用&#xff0c;比如&#xff1a;没有正常…

clion中建立c文件工程,读取或创建sqlite3数据库文件

1.首先前往SQLite官网下载sqlite3所需文件 SQLite Download Page 2.解压文件&#xff0c;将其中的sqlite3.c和sqlite3.h拷贝到你对应的文件工程中 3.修改CMakeLists.txt文件&#xff0c;添加编译选项及连接文件 4.运行代码及查询数据库文件

【NLP自然语言处理】基于BERT实现文本情感分类

Bert概述 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是一种深度学习模型&#xff0c;用于自然语言处理&#xff08;NLP&#xff09;任务。BERT的核心是由一种强大的神经网络架构——Transformer驱动的。这种架构包含了一种称为自注…

【Mamba】Mamba的部署

ubuntu系统安装11.6版本的cuda 可以参考这两篇博客 ubuntu22.04多版本安装cuda及快速切换&#xff08;cuda11.1和11.8&#xff09;_ubuntu调整cuda版本 【Linux】在一台机器上同时安装多个版本的CUDA&#xff08;切换CUDA版本&#xff09;_linux安装多个cuda 安装CUDA https…

js原生ajax请求

以下是使用 JavaScript 原生的 XMLHttpRequest 对象进行 ajax 请求的示例代码&#xff1a; function ajaxRequest(method, url, data, callback) {var xhr new XMLHttpRequest();xhr.open(method, url, true);if (method POST) {xhr.setRequestHeader(Content-Type, applica…

安全与认证:在Symfony中实现用户登录和权限管理

安全与认证&#xff1a;在Symfony中实现用户登录和权限管理 目录 简介Symfony 安全组件概述用户登录实现 配置安全系统创建用户实体配置用户提供者创建登录表单 权限管理实现 角色与权限配置控制器中的权限检查安全注解的使用 示例项目 项目结构示例代码 总结 1. 简介 在现…

【React打卡学习第一天】

React入门 一、简介二、基本使用1.引入相关js库2.babel.js的作用 二、创建虚拟DOM三、JSX&#xff08;JavaScript XML&#xff09;1.本质2.作用3.基本语法规则定义虚拟DOM时&#xff0c;不要写引号。标签中混入JS表达式时要用{}。样式的类名指定不要用class,要用className.内联…

掌握未来:深度解析Xcode Cloud服务的高效使用

掌握未来&#xff1a;深度解析Xcode Cloud服务的高效使用 随着软件开发的不断进步&#xff0c;开发者们越来越需要一个能够提升效率、降低成本的工具。苹果公司推出的Xcode Cloud服务正是为了满足这一需求。本文将详细解析如何使用Xcode Cloud服务&#xff0c;并通过实际代码示…

大语言模型系列:Transformer

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Transformer模型自2017年由Vaswani等人在论文《Attention Is All You Need》中提出以来&#xff0c;已成为最具影响力的技术之一。这种模型设计的核心是自注意力机制&#xff0c;它允许模型在处理序列数据时&#xf…

solidity基础语法(以太坊solidity合约)

solidity基础语法&#xff08;以太坊solidity合约&#xff09; 1-值类型和取值范围2-引用类型3-引用类型高阶4-固定数组和动态数组 1-值类型和取值范围 https://learnblockchain.cn/docs/solidity/introduction-to-smart-contracts.html#subcurrency https://learnblockchain…

Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库

什么是 Prisma? Prisma 是一个开源的下一代 ORM。它包含了以下部分&#xff1a; Prisma Client: 自动生成、类型安全的查询构建器&#xff0c;用于 Node.js 和 TypeScriptPrisma Migrate: 数据迁移系统Prisma Studio: 查询和编辑数据库中数据的图形化界面 Prisma 客户端可以…

JAVA23种设计模式简介

设计模式 设计模式的类型 创建型模式 隐藏了创建对象的过程&#xff0c;通过逻辑方法进行创建对象&#xff0c;而不是通过new关键字创建对象。 工厂方法模式 定义接口或一个抽象的工厂类&#xff0c;让它实现类&#xff08;工厂&#xff09;来决定创建哪一个实例对象。根据每…

Unity3D中ProtoBuf的编译与使用详解

引言 Unity3D作为当今最流行的游戏开发引擎之一&#xff0c;支持多种编程语言&#xff0c;特别是C#&#xff0c;并提供了丰富的工具集来创建高质量的2D和3D游戏。在游戏开发中&#xff0c;数据的序列化和反序列化是至关重要的一环&#xff0c;它们影响着游戏的性能、网络通信的…

idea 运行异常 gradle 项目

运行异常日志如&#xff1a; > Process command C:/Program Files/Java/jdk-1.8/bin/java.exe finished with non-zero exit value 1* Try: Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Exception is: org.gradle.…

React、Vue的password输入框组件,如何关闭自动填充?

有时候我们的表单使用了一个password组件&#xff0c;这时候每次打开新建&#xff0c;都会自动获取浏览器缓存的密码&#xff0c;但是它的上一个input输入框并不是用户名&#xff0c;这时候我们希望我们的表单&#xff0c;每次点开的时候密码是空的&#xff0c;让用户自动输入&…

Llama - 量化

本文翻译整理自&#xff1a; https://llama.meta.com/docs/how-to-guides/quantization/ 文章目录 PyTorch中支持的量化模式使用 TorchAO 进行 Pytorch量化HF支持的量化QuantoAQLMAWQAutoGPTQBitsAndBytes 量化是机器学习中使用的一种技术&#xff0c;用于减少模型的计算和内存…