前端开发②（vue 和 Axios）

JD强子

已于 2022-04-26 13:21:15 修改

阅读量1.3k

点赞数 3

分类专栏：前端开发文章标签： vue vue.js javascript

于 2021-12-02 03:49:04 首次发布

本文链接：https://blog.csdn.net/m0_53698336/article/details/121623841

版权

Vue.js的基本认识

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式（核心 + 扩展）框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定。

MVVM

MVVM（Model-View-ViewModel）是一种软件架构设计模式。

在这里插入图片描述
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

MVVM 的组成部分

ViewModel如何编写？需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。

MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的 MVVM 框架有 Vue.js，AngularJS 等。

为什么要使用 Vue.js

轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
移动优先。更适合移动端，比如移动端的 Touch 事件
吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高

下载地址

在这里插入图片描述

开发版本
- 包含完整的警告和调试模式：https://vuejs.org/js/vue.js
- 删除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js

CDN
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
数据绑定

Vue.js 的核心是实现了 MVVM 模式，它扮演的角色就是 ViewModel 层
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    
    <div id="app">
      
      {
    { message }}
    </div>

    <script>
      // 创建一个vue对象
      // Vue构造函数的参数是一个配置对象，对象中的key是一些固定的关键字
      var vm = new Vue({
       
        el: '#app', //绑定vue作用的范围，用id选择器选中div
        data: {
       
          //在data中注册变量，用于视图中的数据绑定
          message: 'Hello Vue!',
        },
      })
    </script>
  </body>
</html>
```
MVVM再理解

MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来

安装Vue.js devtools

自行百度，涉及墙

使用VUE插件

MVVM 模式中要求 ViewModel 层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。

ViewModel层：浏览器控制台输入：vm.message=”xxxx” 看看效果。
发现网页内容立即更新，且不刷新页面（双向绑定）

改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了

数据绑定指令

使用数据绑定指令做数据渲染

单向 v-bind:

双向 v-model=

注意：v-model只用于用户交互组件中

绑定事件监听 v-on
```
<body>

  <div id="app">
    <button v-on:click="study">去学习</button>
  </div>
  
  <script src="vue.js"></script>
  <script>
    new Vue({
       
      el: '#app',
      data: {
       
        company: '尚硅谷'
      },

      methods: {
       
        study(){
       
          alert('我要去' + this.company + '学习')
        }
      }
    })
  </script>
</body>
```
使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

v-on 指令的简写形式
```

<button @click="study">去学习</button>
```
计算属性

计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性)；可以想象为缓存！

为什么使用
```
<body>
    <div id="app">
      <p>原始值: {
    { message }}</p>

      
      <p>反转消息: {
    { message.split('').reverse().join('') }}</p>
    </div>
  </body>
  <script>
    new Vue({
       
      el: '#app',
      data: {
       
        message: 'hello',
      },
    })
  </script>
</html>
```
模板表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。

计算属性VS方法
- computed：定义计算属性，不需要带括号；
- methods：定义方法，需要带括号
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

侦听器watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

条件渲染

观看本节视频讲解

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

最低0.47元/天解锁文章

JD强子

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端开发②（vue 和 Axios）

Vue.js的基本认识Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式（核心 + 扩展）框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定。MVVMMVVM（Model-View-ViewModel）是一种软件架构设计模式。把Model和View关联起来的就是ViewModel。Vie
复制链接

扫一扫