单文件组件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.hqwc.cn/news/216926.html

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

相关文章

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

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

vivado产生报告阅读分析22

“ Advanced ”选项卡 “ Advanced ” ( 高级 ) 选项卡如下图所示。 在“ Advanced ”选项卡中提供了以下字段 : • “ Report ” ( 报告 ): 选中“ Advanced ”选项卡中的“ Cells to Analyze ” &…

GEE:通过将 Landsat 5、7、8、9 的 C02 数据集合并起来,构建 NDVI 长时间序列

作者:CSDN @ _养乐多_ 本文记录了在 Google Earth Engine(GEE)平台上,将 Landsat-5、Landsat-7、Landsat-8 和 Landsat-9 的数据合成为一个影像集合,并生成 NDVI(归一化植被指数)的时间序列的代码。 代码封装成了函数,方便调用,结果如下图所示, 在实际应用中,可能…

【迅搜03】全文检索、文档、倒排索引与分词

全文检索、文档、倒排索引与分词 今天还是概念性的内容,但是这些概念却是整个搜索引擎中最重要的概念。可以说,所有的搜索引擎就是实现了类似的概念才能称之为搜索引擎。而且今天的内容其实都是相关联的,所以不要以为标题上有四个名词就感觉好…

windows运行Pangolin应用填坑心得——如何在window应用轻量级opengl软件Pangolin库显示3D界面及窗口

目录 0、前言1、最有效的安装打开方式准备工作安装git安装vcpkg(1)下载(2)安装(3)集成至vs 安装cmake 安装pangolin 2、应用实例c工程(1)vs创建新工程(2)新工…

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

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

linux开启apache服务

vim /etc/apache2/ports.conf 键盘输入i 进入插入编辑模式,修改apache2默认监听端口号为8080 ,编辑好后,按Esc键“:wq!” 保存退出。(注:端口也可以不修改) 在终端输入“/etc/init.d/apache2 …

vivado产生报告阅读分析21

其他命令选项 • -of_objects <suggestion objects> &#xff1a; 启用特定建议的报告。在此模式下运行时 &#xff0c; report_qor_suggestions 不会生成新建议。此命令可快速执行 &#xff0c; 读取 RQS 文件后 &#xff0c; 此命令可用于查看其中包 含的建议。其…

人工智能Keras图像分类器(CNN卷积神经网络的图片识别篇)

上期文章我们分享了人工智能Keras图像分类器(CNN卷积神经网络的图片识别的训练模型),本期我们使用预训练模型对图片进行识别:Keras CNN卷积神经网络模型训练 导入第三方库 from keras.preprocessing.image import img_to_array from keras.models import load_model impor…

将 Hexo 部署到阿里云轻量服务器(保姆级教程)

将 Hexo 部署到阿里云轻量服务器(保姆级教程) 顺哥轻创 1 前言 作为有梦想的,有追求的程序员,有一个自己的个人博客简直就是必须品。你可以选择 wordpress 这种平台,直接使用,在任何地方只要有网络就能写博客。还可以选择 hexo 这种静态博客,但是发文章就没有那么随心…

抵御网络威胁的虚拟盾牌:威胁建模

威胁建模是一个允许您管理因日益复杂且不断变化的 IT 安全威胁而产生的风险的过程。为了保护敏感系统和数据&#xff0c;主动了解和应对这些威胁至关重要。 威胁建模是识别、评估和减轻这些威胁的关键过程&#xff0c;确保组织准备好面对不断出现的新的复杂挑战。 本文将详细…

苍穹外卖-套餐分类

1. 新增套餐 1.1 需求分析和设计 产品原型&#xff1a; 业务规则&#xff1a; 套餐名称唯一套餐必须属于某个分类套餐必须包含菜品名称、分类、价格、图片为必填项添加菜品窗口需要根据分类类型来展示菜品新增的套餐默认为停售状态 接口设计&#xff08;共涉及到4个接口&…