单文件组件MVVM

单文件组件&MVVM

所谓组件化开发,就是创建一个个组件。

Vue是一个大类,渲染一切从new Vue开始

指定视图:el template render:jsx语法 $mount[数学公式]

编译App.vue,作为视图入口

单个组件:结构 样式 data computed,理解为一个界面一个视图

每个组件都有自己单独的视图,单独的样式,单独的程序。

template:每个组件的视图。胡子语法指令构建视图

相当于是new Vue的时候各种optionsAPI,那每个单文件自己会去做new Vue

name:组件名称

data(){}

new Vue -> initData

样式:

保证最外层样式名的唯一性

业务组件&通用组件

函数组件&类组件

vue2中的组件划分:

全局&局部

全局:main.js入口处注册,Vue.component

类组件&函数组件

进来一次渲染成什么就是什么样

创建单文件.vue组件 =》局部类组件,每次调用创建Vue类的实例。

指定视图容器

比传统的直接操作dom,简单高效一些

new Vue

$data:私有属性

_self:Vue内部用的,当你研究原理时会涉及到。平常使用可以忽略掉。

  1. el:挂载容器dom
  2. template:视图模板,-> $mount
  3. jsx[数学公式]

构建视图有2步:

  1. 构建一个视图,new Vue包含结构 样式 动态绑定的数据
  2. 指定挂载容器,放在页面中指定容器中渲染

el->template

  1. 有template就按照template来编译渲染,没有就按照el或$mount指定的容器模板来构建视图
  2. el $mount指定了模板的挂载点,指定渲染的位置

最常用的$mount

MVVM

两条线

特点:放弃操作dom元素

文本框中输入内容,用户自己输入内容,视图里的内容变了;

viewModel就是vue内部实现的

有两条线:

如何构建数据:即data computed

如何构建视图:即template

new Vue

@click="change()"

并不是:把change执行然后把返回结果赋给click

vue-template的语法

框架诞生都是为了提高开发效率

更简单

性能会更好

计算属性:依赖某些状态值,计算某些新值

函数执行的结果赋给sub这个属性

各种optionsApi,data computed,如何构建数据,如何修改数据

template:胡子语法&各种各样指令,如何构建视图,视图编译机制和原理

放弃操作dom,直接操作数据

  • 构建视图
  • 构建数据

思想

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vatee万腾的科技探险:vatee数字化力量的前瞻征途

在Vatee万腾的科技探险中,我们领略到了一场数字化力量的前瞻征途,这是一次引领未来的创新之旅。Vatee万腾以其独特的科技理念和数字化力量,开启了一次引领行业的前瞻性征途,为数字化未来描绘出了崭新的篇章。 Vatee万腾的数字化力…

IIC驱动OLED(SSD1306) HAL库+CubeMX

一.IIC传输数据的格式 1.写操作 2.读操作 3.IIC信号 二. IIC底层驱动 1.重新初始化配置延时单元 //软件延时 void I2C_Delay(uint32_t t) {volatile uint32_t tmp t;while(tmp--); }void I2C_GPIO_ReInit(void) {/* 1. 使用结构体定义硬件GPIO对象 */GPIO_InitTypeDef GPIO…

十大排序之堆排序(详解)

文章目录 🐒个人主页🏅算法思维框架📖前言: 🎀堆排序 时间复杂度O(n*logn)🎇1. 算法步骤思想🎇2、动画演示🎇3.代码实现 🐒个人主页 🏅算法思维框架 &#x1…

Openwrt 包管理系统介绍

Openwrt 包管理系统介绍 1. OpenWrt简介1.1 主要特点1.2 开源嵌入式操作系统1.2.1 嵌入式系统概念1.2.2 嵌入式系统分类1.2.3 嵌入式系统——安卓1.2.4 嵌入式系统的对比 2 OpenWrt包管理系统2.1 工作原理2.2 OPKG命令2.2.1 命令用法2.2.2 软件包的管理2.2.3 查询信息2.2.4 选项…

设计测试用例的具体方法总结

📑打牌 : da pai ge的个人主页 🌤️个人专栏 : da pai ge的博客专栏 ☁️白马沉河共歃誓,怒涛没城亦不悔 ☁️基于需求进行测试用例的设计 基…

vue3 for循环创建的多个e-form 添加校验

v-for 创建 ref <el-form :model"item" :rules"state.rules" :ref"el > getRiskSpreadRef(el, index)" ></el-form>// 定义ref list const riskSpreadRefList ref<HTMLElement[]>([]);// ref存到数组 const getRiskSpread…

初始linux:文件操作

目录 提示&#xff1a;以下指令均在Xshell 7 中进行 linux的理念 一、echo echo "字符串" 二、输出重定向 > > [文件] echo "字符串" > [文件] echo "字符串" > > [文件] 制作大文件 三、< 输入重定向与ca…

【开源】基于JAVA的森林火灾预警系统

项目编号&#xff1a; S 019 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S019&#xff0c;文末获取源码。} 项目编号&#xff1a;S019&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 系统基础模块2.3 烟…

QT已有项目导入工程时注意事项

文章目录 从qt其他版本上开发的工程导入另一qt版本时 从qt其他版本上开发的工程导入另一qt版本时 这里以之前在qt5.12.2上开发的项目为例&#xff0c;现在到在qt6.5.3上运行。 不能直接导入IDE上&#xff0c;否则会报各种莫名奇妙的错误。 首先要把扩展名位.pro.user文件 删掉…

面试题:说说什么是本地缓存、分布式缓存以及多级缓存,它们各自的优缺点?

文章目录 前言一、缓存的概念&#xff08;什么是缓存&#xff09;二、为什么要用缓存&#xff08;为什么要用redis作为缓存&#xff09;三、缓存的分类有哪些1、本地缓存2、分布式缓存3、多级缓存 总结 前言 像MySql等传统的关系型数据库已经不能适用于所有的业务场景&#xf…

kubernetes使用nfs创建pvc部署mysql stateful的方法

kubernetes创建的pod默认都是无状态的&#xff0c;换句话说删除以后不会保留任何数据。 所以对于mysql这种有状态的应用&#xff0c;必须使用持久化存储作为支撑&#xff0c;才能部署成有状态的stateful. 最简单的方法就是使用nfs作为网络存储&#xff0c;因为nfs存储很容易被…

Leetcode—58.最后一个单词的长度【简单】

2023每日刷题&#xff08;四十&#xff09; Leetcode—58.最后一个单词的长度 实现代码 int lengthOfLastWord(char* s) {int len strlen(s);int left 0, right 0;if(len 1) {return 1;}while(right < len) {if(right 1 < len) {if(s[right] && s[righ…

激活函数与非线性化:探索神经网络中的关键元素

随着人工智能领域的迅猛发展&#xff0c;神经网络成为实现各种复杂任务的有力工具。其中&#xff0c;激活函数及其非线性化特性扮演着至关重要的角色。本文将深入探讨激活函数的基本概念、作用原理以及常见的几种激活函数&#xff0c;并介绍它们在神经网络中发挥的重要作用。 …

Odoo:行业领先的免费开源生产制造管理系统

产品生命周期管理 用 Odoo 产品数据管理解决方案加速产品开发 研究、开发和设计新产品或者重新设计现有产品是所有制造企业的活力之源&#xff0c;但很多企业的设计部门和工程部门却完全脱离 ERP 系统。这导致工程师需要耗费大量时间来回答企业中其他部门就产品状态、修改级别…

【小技巧】复制一个模块到你的工程(学习阶段很实用)

问题描述&#xff1a; 当我们学习Springboot时&#xff0c;需要创建大量的模块&#xff0c;而这些模块的许多代码都是重复的&#xff0c;只有模块名等相关的信息不一样&#xff0c;现在就教你如何快速创建一个模块。 应用场景&#xff1a; ①进入项目文件夹&#xff1a; ②复…

Java实现—数据结构 1.初识集合框架

一、什么是集合框架 Java集合框架&#xff0c;又被称为容器&#xff0c;是定义在java.util包下的一组接口interfaces和其实现类classes 其主要表现为将多个元素element置于一个单元中&#xff0c; 集合框架是由若干个类组成的&#xff0c;每个类的背后就是一种数据结构&…

webpack 打包优化

在vue.config.js中配置 下载 uglifyjs-webpack-plugin 包 const { defineConfig } require("vue/cli-service"); var path require("path");module.exports defineConfig({transpileDependencies: true,filenameHashing: false, // 去除Vue打包后.cs…

window获取密码工具

工具getpass.exe 运行输出密码到5.txt 工具gethashes.exe 运行之后输入到6.txt,会得到一个$local 再运行gethashes.exe $local 可以看到加密的账户密码&#xff0c;用工具进行解密就可以得到密码 工具pwdump7 还有其他的mimikatz&#xff0c;msf工具都可以获取。

canvas扩展001:利用fabric绘制图形,可以平移,旋转,放缩

canvas实例应用100 专栏提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。 canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重要的帮助。 文章目录 示例…

frp V0.52.3 搭建

下载 https://github.com/fatedier/frp/releases/ 此版本暂时没有windows的&#xff0c;想在windows使用请下载v0.52.2 简易搭建 frps.toml的配置文件&#xff0c;以下12000、8500需要在云服务器中的防火墙中开放tcp # bindPort为frps和frpc通信的端口&#xff0c;需要在防…
最新文章