Vue学习看这篇就够

  • 时间:2019-09-14 23:54
  • 作者:澳门网投
  • 来源:澳门网投赌场
  • 点击:

  从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普

  C:Controller 控制器(是视图和数据模型沟通的桥梁,用于处理业务逻辑)

  在前端中经常要通过 JS代码 来进行一些逻辑操作,最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM

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

  !-- 指定vue管理内容区域,需要通过vue展示的内容都要放到找个元素中 通常我们也把它叫做边界 数据只在边界内部解析--

  // el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 el:

  // Vue 实例的数据对象,用于给 View 提供数据 data: { msg:

  双向数据绑定:将DOM与Vue实例的data数据绑定到一起,彼此之间相互影响

  如果需要那到更新后dom中的数据 则需要通过Vue.nextTick(callback):在DOM更新后,执行某个操作(属于DOM操作)

  生命周期钩子函数的定义:从组件被创建,到组件挂载到页面上运行,再到页面关闭组件被卸载,这三个阶段总是伴随着组件各种各样的事件,这些事件,统称为组件的生命周期函数!

  说明:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

  注意:这是一个常用的生命周期,可以调用methods中的方法、改变data中的数据

  说明:此时,vue实例已经挂载到页面中,可以获取到el中的DOM元素,进行DOM操作

  说明:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

  注意:此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的

  说明:组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。

  说明:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件会被移除,所有的子实例也会被销毁。

  SPA往往是功能复杂的应用,为了有效管理所有视图内容,前端路由 应运而生!

  简单来说,路由就是一套映射规则(一对一的对应规则),由开发人员制定规则。

  当URL中的哈希值(# hash)发生改变后,路由会根据制定好的规则,展示对应的视图内容

澳门网投
上一篇:Angular入门笔记 下一篇:angularjs速成