VUE学习第三篇----VUE实例

1、当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

html网页文件如下所示:

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body></body>
<script >
// 我们的数据对象
var data = { a: 1 }// 该对象被加入到一个 Vue 实例中
var vm = new Vue({data: data
})// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true// 设置 property 也会影响到原始数据
vm.a = 2
console.log(data.a) // => 2// ……反之亦然
data.a = 3
console.log(vm.a) // => 3
</script>
</html>

2、这里唯一的例外是使用 Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化。

html网页文件如下所示:

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app"><p>{{ foo }}</p><!-- 这里的 `foo` 不会更新! --><button v-on:click="foo = 'baz'">Change it</button>
</div>
</body>
<script >
var obj = {foo: 'bar'
}Object.freeze(obj)new Vue({el: '#app',data: obj
})
</script>
</html>

vue.js:5129 [Vue warn]: Error in v-on handler: "TypeError: Cannot assign to read only property 'foo' of object '#<Object>'"(found in <Root>)
warn$2 @ vue.js:5129
logError @ vue.js:3746
globalHandleError @ vue.js:3742
handleError @ vue.js:3709
invokeWithErrorHandling @ vue.js:3725
invoker @ vue.js:1540
original_1._wrapper @ vue.js:8038
vue.js:3750 TypeError: Cannot assign to read only property 'foo' of object '#<Object>'at Proxy.proxySetter (vue.js:4341:32)at click (eval at createFunction (vue.js:11655:18), <anonymous>:3:126)at invokeWithErrorHandling (vue.js:3718:32)at HTMLButtonElement.invoker (vue.js:1540:22)at original_1._wrapper (vue.js:8038:37)

3、除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。例如:

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script >
var data = { a: 1 }
var vm = new Vue({el: '#example',data: data
})console.log(vm.$data === data) // => true
console.log(vm.$el === document.getElementById('example')) // => true// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {// 这个回调将在 `vm.a` 改变后调用
})
</script>
</html>

4、实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码:

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script >
new Vue({data: {a: 1},created: function () {// `this` 指向 vm 实例console.log('a is: ' + this.a)}
})
// => "a is: 1"
</script>
</html>

也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项 property 或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script >
new Vue({data: {a: 1},created: ()=> {// `this` 指向 vm 实例console.log('a is: ' + this.a)}
})
// => "a is: 1"
</script>
</html>

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

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

相关文章

CSS note

文章目录 CSS docCSS 盒子模型微信小程序 WXSSrpx: responsive pixel. 规定屏幕宽度为 750 rpx样式导入引用外部样式 内联样式选择器CSS 语法列举排版 CSS doc https://www.w3schools.com/cssref/pr_class_position.php https://www.w3schools.com/css/tryit.asp?filenametry…

JavaSE——面向对象高级一(3/4)-面向对象三大特征之二:继承(初步认识继承、了解继承的好处)

目录 认识继承 继承的好处 认识继承 什么是继承&#xff1f; Java中提供了一个关键字extends&#xff0c;用这个关键字&#xff0c;可以让一个类和另一个类建立起父子关系。 例如&#xff1a; public class B extends A{} 此时A类就称为父类&#xff08;基类或超类&…

MySQL Connector连接失败之SSL connection error: protocol version mismatch

调用 mysql_real_connect&#xff08;&#xff09; 连接失败&#xff0c;报错为ERROR 2026 (HY000): SSL connection error: protocol version mismatch 调用mysql_error&#xff08;&#xff09;查看失败原因&#xff0c;结果为 SSL connection error: protocol version …

人口性别年龄分布数据、不同年龄结构、性别结构人口分布数据、乡镇街道人口分布数据

人口分布是指人口在一定时间内的空间存在形式、分布状况&#xff0c;包括各类地区总人口的分布&#xff0c;以及某些特定人口&#xff08;如城市人口、、特定的人口过程和构成&#xff08;如迁移、性别等&#xff09;的分布等。 人口分布的最大特征是不平衡性。就全世界而言&am…

mysql 替换空值

函数 IFNULL() 用于判断一个表达式时否为NULL,如果为 NULL 则返回指定的代替值&#xff0c;否则返回原表达式的值。 函数&#xff1a; IFNULL(expression,alternavicate_value) expression 要判断的表达式alternavicate_value 当表达式为 NULL时要返回的代替值

Kafka整理-Consumer(消费者)

在Apache Kafka中,消费者(Consumer)是负责从Kafka的主题(Topics)读取数据的客户端应用程序。Kafka消费者的主要特点和工作原理如下: 主要特点 1、订阅主题: 消费者可以订阅一个或多个Kafka主题,并从中读取数据。2、消费者群组(Consumer Groups): 消费者可以组成消费…

Edu12 Beautiful Subarrays --- 题解

Beautiful Subarrays&#xff1a; 题目大意: 思路解析&#xff1a; 要找到一个区间并且区间的l--r里面所有的元素异或值大于等于k&#xff0c;称这样的数组是优美子数组&#xff0c;问优美子数组有多少个。 [L,R] 的数组异或和等价于 (a1,a2,a3,....aL-1) ^ (a1,a2,a3,a4,..…

CompletionService 处理异步任务

案例: public static void main(String[] args) throws Exception {ExecutorService executorService Executors.newCachedThreadPool();ArrayList<Future<Integer>> list new ArrayList<>();Future<Integer> future_15 executorService.submit(()…

【2024金三银四】

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

不锈钢电阻器-栅极电阻器 - 为什么要使用它们呢?

常规 如果你看一个典型的吉他放大器的原理图&#xff0c;你会注意到有一个电阻器与第一个电子管的栅极串联&#xff0c;通常在68K左右&#xff0c;还有一个电阻器与功率管的栅极串联&#xff0c;通常为1.5K或5.6K&#xff0c;你可能会偶尔看到非常大的电阻&#xff0c; 例如 4…

ssm+vue的高校课程评价系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的高校课程评价系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

Java各种规则引擎

一. Drools规则引擎 1.简介&#xff1a; Drools就是为了解决业务代码和业务规则分离的引擎。 Drools 规则是在 Java 应用程序上运行的&#xff0c;其要执行的步骤顺序由代码确定 &#xff0c;为了实现这一点&#xff0c;Drools 规则引擎将业务规则转换成执行树。 2.特性&…

伪分布HBase的安装与部署

1.实训目标 &#xff08;1&#xff09;熟悉掌握使用在Linux下安装伪分布式HBase。 &#xff08;2&#xff09;熟悉掌握使用在HBase伪分布式下使用自带Zookeeper。 2.实训环境 环境 版本 说明 Windows 10系统 64位 操作电脑配置 VMware 15 用于搭建所需虚拟机Linux系统 …

动态规划(算法竞赛、蓝桥杯)--概率DP求期望

1、B站视频链接&#xff1a;E40 概率DP 求期望_哔哩哔哩_bilibili

VUE 入门及应用 ( VueX )

8.状态管理 vuex vuex 是一个专门为vue.js应用程序开发的状态管理模式。用于解决大规模单页应用&#xff08;SPA&#xff09;中复杂状态管理和组件间通信的问题。 Vuex 采用了集中式存储管理应用的所有组件的状态&#xff0c;并通过一系列严格的规则来确保状态变更的可预测性…

python-0003-pycharm开发虚拟环境中的项目

前言 在虚拟环境中创建好了python项目&#xff0c;使用pycharm进行开发 打开项目 使用pycharm打开项目 设置虚拟环境的解释器 File–>Settings–>Project(项目名)–>Python Interpreter–>添加解释器–>添加已经存在的解释器–>选择虚拟环境的解释器 …

C语言⽂件操作

1. 为什么使⽤⽂件 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久化的保存&…

C语言如何引⽤⼀维数组元素?

一、问题 数组是⼀组数的集合&#xff0c;数组元素是这组数中的⼀个个体。怎样引⽤数组集合中的每⼀个个体呢&#xff1f; 二、解答 数组定义完成后就要使⽤该数组&#xff0c;可以通过引⽤数组元素的⽅式&#xff0c;使⽤该数组中的元素。在引⽤数组的时候&#xff0c;应该注…

Matlab自学笔记二十八:总结|字符型与数值型的转换函数(汇总最全)

1.依据Unicode码转换 字符转数值使用函数uintN %依据Unicode码转换 数值转字符使用函数char %依据Unicode码转换&#xff0c;ASCII码与Unicode码并非相同概念&#xff0c;ASCII较基础&#xff0c;应用范围小&#xff0c;主要表示键盘上字母符号等&#xff0c;Unicode码包含…

安装 WPS 国际版并汉化

安装 WPS 国际版并汉化 奈何很多东西和其他同事使用的 Office 不通用&#xff0c;比如设置的数字精确以显示值为准、背景色不打印、还有本身一些操作方式上的不适应。 WPS 国际版地址&#xff1a;wps.com 刚开始的时候不知道国际版国内不能下载&#xff0c;点开下载地址速度…