Vue基础入门知识（重要！！！）

最新推荐文章于 2023-05-13 21:52:33 发布

SymbolLLj

最新推荐文章于 2023-05-13 21:52:33 发布

阅读量235

点赞数

文章标签： vue.js html5 前端 javascript

本文链接：https://blog.csdn.net/SymbolLLj/article/details/104593339

版权

Vue基础入门知识（重要！！！）

一、Vue的特点

1.渐进式JS（JavaScript）框架

2.组件化：扩展HTML元素，封装可重用的代码

3.响应式（MVVM），不再操作DOM元素，操作数据

二、神奇的Vue

1. 官方介绍（https://cn.vuejs.org/v2/guide/）

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. 渐进式

渐进式框架做分层设计，每层都可选，不同层可以灵活接入其他方案。而当你都想用官方的实现时，会发现也早已准备好，各层之间包括配套工具都能比接入其他方案更便捷地协同工作。
一个个放入,放多少就做多少。
在这里插入图片描述

3.MV*模式（MVC/MVP/MVVM）

“MVC”: model view controller

用户对View操作以后，View捕获到这个操作，会把处理的权利交移给
Controller（Pass calls）；Controller会对来自View数据进行预处理、决定调用哪个Model的接口；然后由Model执行相关的业务逻辑（数据请求）；当Model变更了以后，会通过观察者模式（Observer Pattern）通知View；View通过观察者模式收到Model变更的消息以后，会向Model请求最新的数据，然后重新更新界面。
把业务逻辑和展示逻辑分离，模块化程度高。但由于View是强依赖特定的Model的，所以View无法组件化，无法复用。

“MVP”: model view presenter

和MVC模式一样，用户对View的操作都会从View交移给Presenter。
Presenter会执行相应的应用程序逻辑，并且对Model进行相应的操作；而这时候Model执行完业务逻辑以后，也是通过观察者模式把自己变更的消息传递出去，但是是传给Presenter而不是View。Presenter获取到Model变更的消息以后，通过View提供的接口更新界面。
View不依赖Model，View可以进行组件化。但Model->View的手动同步逻辑麻烦，维护困难
在这里插入图片描述

“MVVM”: model view viewmodel

MVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫
Binder，或者是Data-binding engine的东西。你只需要在View的模版语法
当中，指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。当ViewModel对进行Model更新的时候，Binder会自动把数据更新到View上去，当用户对View进行操作（例如表单输入），Binder也会自动把数据更新到Model上去。这种方式称为：Two-way data-binding，双向数据绑定。可以简单而不恰当地理解为一个模版引擎，但是会根据数据变更实时渲染。
解决了MVP大量的手动View和Model同步的问题，提供双向绑定机制。提高了代码的可维护性。对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高。
在这里插入图片描述

三、如何引入Vue

四、数据绑定原理

在这里插入图片描述
https://cn.vuejs.org/v2/guide/reactivity.html
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知watcher，从而使它关联的组件重新渲染。

五、响应式渲染

1.模板语法

插值语法

在这里插入图片描述

指令

在这里插入图片描述

缩写

在这里插入图片描述

2.class与style

<style>
   .red {
    background-color: red;
   }
   .yellow{
    background-color: yellow;
   }
</style>
</head>
<body>
    <div id="box">
      <div :class="classobj">动态class -对象写法</div>
      <div :class="classarr">动态class -数组写法</div>

      <div :style="styleobj">动态style- 对象写法</div>
      <div :style="stylearr">动态style- 数组写法</div>
    </div>

    <script type="text/javascript">

     var vm =  new Vue({
        el:"#box",
        data: {
          classobj:{
            a:true,
            b:true,
            c:false
          },
          classarr:[],
          styleobj:{
            backgroundColor:"red"
          },
          stylearr:[]
        }
      })
      Vue.set(vm.classobj,"d",true)
     
    </script>

3.条件渲染

在这里插入图片描述

4.列表渲染

在这里插入图片描述

小编这次的知识点分享就先写到这啦,大家看完点个赞再走呀!_{逆战班基础篇（1）}

SymbolLLj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础入门知识（重要！！！）

Vue基础入门知识（重要！！！）一、Vue的特点1.渐进式JS（JavaScript）框架2.组件化：扩展HTML元素，封装可重用的代码3.响应式（MVVM），不再操作DOM元素，操作数据二、神奇的Vue1. 官方介绍（https://cn.vuejs.org/v2/guide/）Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不...
复制链接

扫一扫