Vue.js 2.0 实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档 中查看。

可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器

var MyComponent = Vue.extend({
  // 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

尽管可以命令式地创建扩展实例,不过在多数情况下建议将组件构造器注册为一个自定义元素,然后声明式地用在模板中。我们将在后面的“组件系统”中详细说明。现在你只需知道所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。我们将在后面详细讨论响应系统。

除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

注意,不要在实例属性或者回调函数中(如 vm.$watch('a', newVal => this.myMethod()))使用箭头函数。因为箭头函数绑定父上下文,所以 this 不会像预想的一样是 Vue 实例,而是 this.myMethod 未被定义。

实例属性和方法的完整列表中查阅 API 参考。

实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、 updated、destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。

生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。

 

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

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

相关文章

爱智EdgerOS之深入解析在爱智应用中如何使用Socket.IO轻松实现双向通信

一、什么是 Socket.IO? Socket.IO 是一个基于事件通信的实时应用程序框架,它在即时通讯、通知和消息推送,实时分析等场景中有广泛的应用。Socket.IO 包括两个部分: 在 Server 端的模块(JSRE 已提供了 socket.io 模块&…

密码和生物识别技术可以阻止不良行为者

网络安全漏洞是一个持续的威胁,而且只会越来越严重。2021 年,45% 的美国公司遭受了与凭证泄露相关的数据泄露,4200 万人因身份盗用和相关欺诈遭受了超过 500 亿美元的总价值损失,并且在过去五年中,超过5 亿个凭证和密码…

AI绘画王炸功能Control Net安装教程

原文:AI绘画王炸功能Control Net安装教程 - 知乎 AI绘画,最近两大王炸功能出圈了。 一个就是超真实超细节的美女图片,已经快和照片无异了,甚至有人用AI绘画的“女仆照片”开始招募游艇会了,具体教程可以查看Lora这篇…

多元时间序列 | GRU门控循环单元多变量时间序列预测(Matlab完整程序)

多元时间序列 | GRU门控循环单元多变量时间序列预测(Matlab完整程序) 目录 多元时间序列 | GRU门控循环单元多变量时间序列预测(Matlab完整程序)预测结果评价指标基本介绍程序设计参考资料预测结果 评价指标 训练集数据的R2为:0.98197 测试集数据的R2为:0.97913 训练集数…

Nacos配置管理

Nacos配置管理1 Nacos配置管理1.1 统一配置管理1.1.1 在nacos中添加配置文件1.1.2 从微服务拉取配置1.2 配置热更新1.2.1 方式一1.2.2 方式二1.3 配置共享1)添加一个环境共享配置2)在user-service中读取共享配置3)运行两个UserApplication&am…

Minikube安装、运行

1.Minikube是什么 本地的k8s集群,方便开发者学习k8s。 2.安装的前提条件 2个CPU货以上。2G内存或以上。20G磁盘或以上。可以链接互联网。安装docker(官网说或者一个虚拟环境,这个不考虑)。 3.官网地址 minikube start | minik…

进程状态初始

目录 : 1.状态的认识 2.具体状态的学习 3.验证 R S T Z(引出孤儿进程)状态 4.前台、后台运行程序 -------------------------------------------------------------------------------------------------------------- 1.状态的认识 进程…

前列腺癌论文笔记

名词解释 MRF: 磁共振指纹打印技术( MR Fingerprinting)是近几年发展起来的最新磁共振技术,以一种全新的方法对数据进行采集、后处理和实现可视化。 MRF使用一种伪随机采集方法,取代了过去为获得个体感兴趣的参数特征而使用重复系列数据的采集方法&…

python零基础实现基于旋转特征的自监督学习(二)——在resnet18模型下应用自监督学习

系列文章目录 基于旋转特征的自监督学习(一)——算法思路解析以及数据集读取 基于旋转特征的自监督学习(二)——在resnet18模型下应用自监督学习 模型搭建与训练系列文章目录前言resNet18Residualresnet_blockresNet18select_mod…

apache配置与应用

构建虚拟 Web 主机 apache虚拟web主机指在同一台服务器运行多个web站点,其中每一个站点实际上并不独立占用整个服务器,因此被称为web主机,可以充分利用服务器的硬件资源,大大降低网站的构建成本 http服务支持三种虚拟主机类型 …

Spring Cloud之Consul服务治理实战

目录 1、Consul是什么 1.1概念 1.2 Consul下载 1.3 Consul启动 2、Consul使用场景 3、Consul优势 4、Consul架构及原理 4.1 整体架构图 4.2 通讯机制 4.3 健康检测 4.4如何保证数据一致性 5、搭建Consul环境 5.1 本地Consul搭建 5.2 集群Consul搭建 5.2.1 安装C…

VUE使用el-ui的form表单输入框批量搜索<VUE专栏三>

针对form表单的输入框单号批量查询&#xff0c;这里用换行符进行分割&#xff0c;注意v-model不要使用.trim 前端代码&#xff1a; <el-form-item label"SKU编码:" prop"prodNumbers"><el-input type"textarea" :rows"4" pla…

Spring 之依赖注入底层原理

Spring 框架作为 Java 开发中最流行的框架之一&#xff0c;其核心特性之一就是依赖注入&#xff08;Dependency Injection&#xff0c;DI&#xff09;。在Spring中&#xff0c;依赖注入是通过 IOC 容器&#xff08;Inversion of Control&#xff0c;控制反转&#xff09;来实现…

电动牙刷语音芯片,音乐播放ic选型?

牙医认为每天刷牙两次对于口腔健康至关重要。但是有些人会因为不良的刷牙习惯而受害&#xff0c;比如刷牙时间不够长。而刷牙不当会导致牙齿出现问题&#xff0c;例如蛀牙、污渍和口臭。 为了保护牙齿健康&#xff0c;很多家庭开始尝试使用电动牙刷。电动牙刷通过嗡嗡地振动消…

springboot2.7及springboot3中自动配置的变化

大家在面试中问到springboot如何实现的自动配置 诶&#xff0c;不要傻背错八股了&#xff0c;以往 入口类上的SpringBootApplication注解引入EnableAutoConfiguration&#xff0c;再 Import({AutoConfigurationImportSelector.class}) &#xff0c;其中代码实现根据META-INF/sp…

实战案例|聚焦攻击面管理,腾讯安全威胁情报守护头部券商资产安全

金融“活水”润泽千行百业&#xff0c;对金融客户来说&#xff0c;由于业务场景存在特殊性和复杂性&#xff0c;网络安全必然是一场“持久战”。如何在事前做好安全部署&#xff0c;构建威胁情报分析的防护体系至为重要&#xff0c;实现更为精准、高效的动态防御。 客户名片 …

Java实现打印杨辉三角形,向左、右偏的平行四边形这三个图形代码程序

目录 前言 一、打印杨辉三角形 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 二、向左偏的平行四边形 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 三、向右偏的平行四边形 1.1运行流程&#xff08;思想&#xff09; 1.2代…

一个评测模型+10个问题,摸清盘古、通义千问、文心一言、ChatGPT的“家底”!...

‍数据智能产业创新服务媒体——聚焦数智 改变商业毫无疑问&#xff0c;全球已经在进行大模型的军备竞赛了&#xff0c;“有头有脸”的科技巨头都不会缺席。昨天阿里巴巴内测了通义千问&#xff0c;今天华为公布了盘古大模型的最新进展。不久前百度公布了文心一言、360也公布了…

网络系统集成综合实验(六)| 访问控制列表ACL配置

目录 一、前言 二、实验目的 三、实验需求 四、实验步骤与现象 &#xff08;一&#xff09;基本ACL实验 Step1&#xff1a;构建拓扑图如下&#xff1a; Step2&#xff1a;PC的IP地址分别配置如下&#xff1a; Step3&#xff1a;路由器的IP地址配置如下 Step4&#xff…

十、CNN卷积神经网络实战

一、确定输入样本特征和输出特征 输入样本通道数4、期待输出样本通道数2、卷积核大小33 具体卷积层的构建可参考博文&#xff1a;八、卷积层 设定卷积层 torch.nn.Conv2d(in_channelsin_channel,out_channelsout_channel,kernel_sizekernel_size,padding1,stride1) 必要参数&a…