单文件组件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.mzph.cn/news/168967.shtml

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

相关文章

php高级工程师范文模板

以下简历内容以php高级工程师招聘需求为背景,我们制作了1份全面、专业且具有参考价值的简历案例,大家可以灵活借鉴,希望能帮助大家在众多候选人中脱颖而出。 php高级工程师简历在线制作下载:百度幻主简历 求职意向 求职类型&…

个人财务管理软件CheckBook Pro mac中文版特点介绍

CheckBook Pro mac是一款Mac平台的个人财务管理软件,主要用于跟踪个人收入、支出和账户余额等信息。 CheckBook Pro mac 软件特点 简单易用:该软件的用户界面非常简洁明了,即使您是初学者也可以轻松上手。 多账户管理:该软件支持…

webrtc AEC 线性滤波 PBFDAF(均匀分块频域自适应滤波)介绍

计算一个脉冲响应和输入信号的卷积,除了使用原始的时域卷积以外,还有如下方法: FFT卷积的方法:对输入信号(长度M)和脉冲响应(长度N)分别补零到K(K>MN-1),…

【UGUI】实现跑酷游戏分数血量显示在UI中

//1.实现让玩家的金币分数显示在UI文本中 2.让血量和滑动条关联起来 这一节课主要学会获取组件并改变属性,举一反三! using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using TMPro;//1.实现让玩…

ES6之class类

ES6提供了更接近传统语言的写法,引入了Class类这个概念,作为对象的模板。通过Class关键字,可以定义类,基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新…

电子学会C/C++编程等级考试2021年06月(二级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:数字放大 给定一个整数序列以及放大倍数x,将序列中每个整数放大x倍后输出。 时间限制:1000 内存限制:65536输入 包含三行: 第一行为N,表示整数序列的长度(N ≤ 100); 第二行为N个整数(不超过整型范围),整数之间以一个空格…

Leetcode—1457.二叉树中的伪回文路径【中等】

2023每日刷题(四十) Leetcode—1457.二叉树中的伪回文路径 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ int record[10] {0};int accumula…

在mathtype输入花体,如L,I, K等

在mathtype输入“\mathcal{L}"就OK了 \mathcal{K} \mathcal{I}

idea git将某个分支内的commit合并到其他分支

idea git将某个分支内的commit合并到其他分支 1.打开旧分支的代码提交记录 在IDEA中切换到新分支的代码,点击Git打开代码管理面板,在顶部点击Log:标签页(这个标签页内将来可以选择不同分支的个人/所有人的代码commit记录)&#x…

2023年亚太杯数学建模A题解题思路(*基于OpenCV的复杂背景下苹果目标的识别定位方法研究)

摘要 由于要求较高的时效性和劳力投入,果实采摘环节成为苹果生产作业中十分重要的一部分。而对于自然环境下生长的苹果,光照影响、枝叶遮挡和果实重叠等情况普遍存在,这严重影响了果实的准确识别以及采摘点的精确定位。针对在复杂背景下苹果的…

如何在GO中写出准确的基准测试

一般来说,我们不应该对性能进行猜测。在编写优化时,会有许多因素可能起作用,即使我们对结果有很强的看法,测试它们很少是一个坏主意。然而,编写基准测试并不简单。很容易编写不准确的基准测试,并且基于这些…

系列九、声明式事务(xml方式)

一、概述 声明式事务(declarative transaction management)是Spring提供的对程序事务管理的一种方式,Spring的声明式事务顾名思义就是采用声明的方式来处理事务。这里所说的声明,是指在配置文件中声明,用在Spring配置文件中声明式的处理事务来…

roseha for windows 11+oracle 11g部署过程

文章目录 一、环境准备关闭防火墙配置hosts共享存储准备 二、部署步骤1.主机A、B安装数据库软件2.主机A进行数据库实例创建3.主机B创建数据库4.安装配置roseha软件 一、环境准备 windows server 2019 oracle 11.2.0.3 EE roseha for windows 11 5个IP地址:2心跳、3…

嵌入式FPGA IP正在发现更广阔的用武之地

作者:郭道正, Achronix Semiconductor中国区总经理 在日前落幕的“中国集成电路设计业2023年会暨广州集成电路产业创新发展高峰论坛(ICCAD 2023)”上,Achronix的Speedcore™嵌入式FPGA硅知识产权(eFPGA IP&#xff09…

【Ambari】HDFS基于Ambari的常规运维

🦄 个人主页——🎐开着拖拉机回家_大数据运维-CSDN博客 🎐✨🍁 🪁🍁🪁🍁🪁🍁🪁🍁 🪁🍁🪁&#x1f…

运动蓝牙耳机什么牌子好?百元蓝牙运动耳机排行榜

​跑步、骑车、健身等运动时,大家都需要一款专业的运动耳机来陪伴,它不仅可以提供高品质的音乐和佩戴舒适度,还可以帮助你掌握运动状态,让你更加专注和投入。今天我为大家推荐几款备受好评的运动耳机,它们都拥有不错的…

C#,《小白学程序》第六课:队列(Queue)其二,队列的应用,编写《实时叫号系统》

医院里面常见的《叫号系统》怎么实现的&#xff1f; 1 文本格式 /// <summary> /// 下面定义一个新的队列&#xff0c;用于演示《实时叫号系统》 /// </summary> Queue<Classmate> q2 new Queue<Classmate>(); /// <summary> /// 《小白学程序…

数据结构与算法编程题22

交换二叉树每个结点的左孩子和右孩子 #define _CRT_SECURE_NO_WARNINGS#include <iostream> using namespace std;typedef char ElemType; #define ERROR 0 #define OK 1 #define STR_SIZE 1024 typedef struct BiTNode {ElemType data;BiTNode* lchild, * rchild; }BiTN…

Centos 7、Debian、Ubuntu中tree指令的检查与下载

目录 前言 Centos 7中检查tree指令是否安装的两种办法 which指令检查 查看当前版本指令 不同版本下安装tree指令 Centos 7的发行版本 重点 Debian的发行版本 重点 Ubuntu的发行版本 重点 前言 在大多数Linux发行版中&#xff0c;tree命令通常不是默认安装的指令。…

双向链表超详解——连我奶奶都能学会的复杂链表(带头双向循环)

文章目录 前言一、双向链表的概念二、双向链的结构设计三、双链表的基本功能接口四、双向链表接口的实现4.1、创建结点4.2、初始化链表4.3、打印链表4.4、尾插结点4.5、尾删结点4.6、头插结点4.7、头删结点4.8、在pos结点前面插入4.9、删除pos位置的结点4.10、查找链表中的某个…