Vue.js-01:【金沙官网线上】新手村的试炼 - 初见

 一、前言

知识点

  • axios数据请求
  • MVVM/MVC
  • Vue和MVVM的暧昧关系
  • 补充内容

  初入Vue.js的新世界,总归是要了解些涉及到的新概念。菜鸟诞生的第一课,开眼看看Vue的新世界~~~

axios数据请求 {:&.flexbox.vleft}

  • 概念
    • 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
    • github地址
  • 基本例子
axios.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=Beijing&appid=7c5219469d1d3aa869d2599559d26fc1&lang=zh_cn')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

  学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html

MVVM/MVC

  仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/Chapter01-Rookie/Concept.md

MVC

  • 概述
    • MVC 即 Model-View-Controller 的缩写,就是 模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成.
  • View 用来把数据以某种方式呈现给用户。Model 其实就是数据。Controller 接收并处理来自用户的请求,并将 Model 返回给用户。
  • 中间的过渡过程
    • MVC 架构模式对于简单的应用来看起是OK 的,也符合软件架构的分层思想。 但实际上,随着H5 的不断发展,人们更希望使用H5 开发的应用能和Native 媲美,或者接近于原生App 的体验效果,于是前端应用的复杂程度已不同往日,今非昔比。这时前端开发就暴露出了三个痛点问题
      • 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ,操作冗余,使得代码难以维护。
      • 大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
      • 当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致 Model 发生变化,开发者同样需要将变化的数据同步到

 二、打怪升级

MVVM

  • MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象
  • ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM,

  1、 Vue.js是什么?

Vue和MVVM的暧昧关系

  • Vue.js 可以说是MVVM 架构的很好实践,专注于 MVVM 中的 ViewMode(只需关注业务逻辑,不需要手动操作DOM)
    [图片上传失败...(image-4149a-1516350102775)]

  Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,只关注于视图层。在Vue的官网中我们可以看见,对于渐进式框架这个词,作者是加粗表示的,按照作者的设计,Vue包含了现代前端框架所必须的内容,但是你并不需要一开始就把所有的东西都用上,这些都是可选的。

补充内容

  • 实例属性 ref
    • ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例
  • $mount()

          // 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
          let vm=new Vue({
              data:{
                  a:101
              }
          }).$mount('#box');
    
  • v-pre

    • v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
  • v-cloak

    • 解决闪烁问题

      • 第一css设置

        <style>
            [v-cloak] {
              display: none;
            }
        </style>
        
      • 第二指令

  • 自定义指令

    • 全局定义
    • 局部定义

  对于Vue的解释,推荐简书上的一篇文章,文章地址:https://www.jianshu.com/p/a4339bad5256  

  2、 使用Vue.js后与传统的前端开发模式有何不同?

  在传统的前端开发中,为了完成某个任务,我们需要使用 JS/Jquery 获取到元素的DOM元素,随后对获取到的DOM元素进行操作。而当我们使用Vue进行前端开发后,对于DOM的所有操作全部交由Vue来处理,我们只需要关注于业务代码的实现就可以了。

  3、 如何使用Vue.js?

  3.1、使用 script 标签引用Vue.js(这里可以在Vue的官网上下载好js文件后使用标签引入,也可以使用cdn的形式引入)

  <script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

本文由金沙官网线上发布于Web前端,转载请注明出处:Vue.js-01:【金沙官网线上】新手村的试炼 - 初见

您可能还会对下面的文章感兴趣: