Vue基础教程:el与data的使用解析
"Vue.js学习笔记,探讨Vue的基础部分,包括el和data的两种写法以及MVVM模型的理解。" 在Vue.js中,`el` 和 `data` 是两个非常基础且重要的选项,它们用于定义Vue实例的作用域和数据。在创建Vue实例时,我们通常会指定一个元素(通过`el`)作为Vue应用的挂载点,并提供一个数据对象(通过`data`)来存储组件的状态。 1. **el** 的两种写法: - **对象式**:`el: '#root'`,这是直接指定一个CSS选择器,Vue会找到匹配这个选择器的第一个元素,并将其作为Vue实例的挂载点。在本例中,`#root`是ID为`root`的`div`元素。 - **函数式**:`vm.$mount('#root')`,这是一种后期挂载的方式,先创建Vue实例,然后通过`$mount`方法手动指定挂载点。这在某些场景下更灵活,例如动态创建或销毁组件。 2. **data** 的两种写法: - **对象式**:`data: { name: "SHENG" }`,这是最常见的写法,直接定义一个包含初始状态的对象。Vue会将这个对象的所有属性响应化,即当这些属性的值发生变化时,视图会自动更新。 - **函数式**:`data: function() { return { name: "SHENG" }; }`,虽然效果相同,但这种方式可以确保每个实例的数据都是独立的。在组件复用的情况下,这种方法可以避免数据共享问题。 3. **MVVM模型**: MVVM(Model-View-ViewModel)是Vue的核心架构模式。在Vue中,ViewModel层负责监听并处理View与Model之间的交互。当`data`中的属性变化时,Vue会自动更新对应的视图;反之,当用户在视图中进行操作时,Vue也会同步更新Model。`data`中的所有属性最终都会出现在Vue实例(也就是ViewModel)上,使得这些属性可以直接在模板中被引用。 4. **this指向问题**: 在JavaScript中,箭头函数不会创建自己的`this`上下文,它会继承父作用域的`this`。因此,如果在Vue实例的方法中使用箭头函数,`this`将不会指向Vue实例,而是指向上层作用域。为了避免这个问题,一般推荐使用传统函数声明,确保`this`指向Vue实例。 5. **Vue实例的属性与模板的关联**: Vue实例(`vm`)及其原型链上的所有属性都可以在模板中直接使用,因为Vue提供了数据绑定机制。这意味着,例如`vm.name`或Vue原型上的任何方法,如`vm.$refs`,都可以在模板中通过`{{ }}`插值表达式或者事件处理器直接访问。 Vue的基础部分包括对`el`和`data`的正确理解和使用,以及对MVVM模型的深入认识。在实际开发中,掌握这些基本概念对于编写高效且可维护的Vue应用至关重要。
![](https://csdnimg.cn/release/download_crawler_static/43636070/bga.jpg)
![](https://csdnimg.cn/release/download_crawler_static/43636070/bgb.jpg)
![](https://csdnimg.cn/release/download_crawler_static/43636070/bgc.jpg)
剩余55页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/d36a92246b2f4351afd9b6ad79bbc42c_naxienianwomenyiq.jpg!1)
- 粉丝: 20
- 资源: 5
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)