vue基础二
2024-10-07 18:05:01
1.vue实例
每个 Vue.js 应用都是通过构造函数 Vue
创建一个 Vue 的根实例 启动的。在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
可以扩展 Vue
构造器,从而用预定义选项创建可复用的组件构造器,所有的 Vue.js 组件其实都是被扩展的 Vue 实例。
2.属性和方法
每个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` 改变后调用
})
3.实例生命周期
每个 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 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。最新文章
- 7.4 MVC vs MVP
- 【C语言学习】《C Primer Plus》第7章 C控制语句:分支与跳转
- C#编程总结(十一)数字证书
- C# winform应用程序仅能打开一个进程运行
- java并发库 Lock 公平锁和非公平锁
- hbase0.95.2部署
- SQL 将一列多行数据合并为一行 FOR XML PATH
- 水晶报表(web)表格信息展示
- Linux 命令 - echo: 显示一行文本
- Nginx - Additional Modules, Content and Encoding
- Microsoft JScript 运行时错误: Automation 服务器不能创建对象
- Android-Launcher开发之ShortCut(1)
- java在string和int相互转化
- 网络服务器系统wamp的安装
- MySQL 8 新特性之降序索引
- Hibernate根据实体类自动创建表
- 微信小程序wx.uploadFile 上传文件 的两个坑
- windows下如何获取系统已存在的盘符 【c++】
- Redis 为什么使用单进程单线程方式也这么快
- GraphX实现N度关系