Vue学习笔记(1)--引入、小实例、mvvm、生命周期

Vue 是一套用于构建用户界面的渐进式框架。编程范式：声明式编程。

一、引入

二、小实例

建一个简单Vue应用：

{{ message }}

• 在es6里面定义const(常量)/let(变量)。
• 在创建Vue对象时，传入一些option:{}
  • el属性：
    • 类型：string｜HTMLElement
    • 该属性决定了这个Vue对象挂载到哪一个元素上面。
  • data属性：
    • 类型：Object｜Function(组件中data必须是一个函数)
    • Vue实例对应的数据对象。通常存储一些数据：可以是自己定义的，也可以是来自网络服务器加载的。

写个列表：

	

    
{{item}}
  

• v-for指令
• 指令带有前缀v-,以表示它们是 Vue 提供的特殊特性。

实现计数器：

	

    当前记数：{{count}}
  
  
    +
  
  
    -
  

• Methods 属性：
  • 类型：{[key:string]:Function}
  • 用于Vue对象中定义方法。可在其他地方调用，也可以
• @click指令：用于监听偶一个元素的点击事件，并且需要指定当发生点击时，执行的方法（通常是methods中定义的方法）。（语法糖，是v-on:的简写）
• 方法：method
• 函数：function

处理用户输入

  
{{ message }}
  反转消息

• 用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

双向绑定

  
{{ message }}
  

• v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

三、vue中的mvvm

虽然没有完全遵循 [MVVM 模型]，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

https://zh.wikipedia.org/wiki/MVVM

• View层
  • 视图层
  • 在前端开发中通常是DOM层
  • 主要用于给用户展示各种东西
• Model层
  • 数据层
  • 数据可能是我们定的，也可以是请求来自从服务器里的
• VueModel层
  • 视图模型层
  • 视图模型层是View和Model沟通的桥梁
  • 一方面实现了Data Binding（数据绑定），讲Model的改变反应到View里，另一方面实现Data Listener（Dom监听），当Dom发生一些事件（点击、滚动、touch）时，可以监听并在需要的时候改变对应的Data。

四、Vue的生命周期

Vue源码中的一部分

// src/instance/init.js

//expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm,'beforeCreate');//回调函数
initLnjections(vm);
initState(vm);
initProvide(vm);
callHook(vm,'created');//回调函数

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1