vue打怪升级记录-渐进式、声明式渲染、组件、模板-CSDN博客

本文链接：https://blog.csdn.net/weixin_44263363/article/details/115467255

Vue.js

vue.js

vue.js 是一套用于构建用户界面的渐进式框架

渐进式

在这里插入图片描述
渐进式：主张最少（没有多做职责之外的事）
主张可以认为是该框架对开发环境（条件的）要求。

比如Angular就说强主张的一个框架，如果要使用Angular则需要：

使用它的模块机制
使用它的依赖注入
使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果后续集成一些其他框架的功能就十分麻烦。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

Vue 核心

声明式渲染
组件

引入

我们还是先通过 <script> 的方式来引入 vue

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

声明式渲染

声明式渲染：vue使用 “模板语法” 来声明式地将数据渲染进dom系统
声明式: 告诉框架你需要渲染成这样。（结果）
命令式：你应该先怎么做，然后再怎么做，才能渲染成这样。（过程）

组件

vue 的核心功能之一就是组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FsFfG178-1617704310856)(./assets/components.png)]

组件基本分类

根组件
可复用的功能组件

根组件的创建

通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象

let app = new Vue(创建组件所需要的一些配置选项);

可复用的功能组件

通过 Vue 提供的静态方法 component 窗口可复用的功能组件

let component1 = Vue.component(创建组件所需要的一些配置选项)

 Vue.component('组件在使用的时候的名称', {组件的配置})

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="js/vue.js"></script>
<script>
  /**
   * 根组件：
   *  应用最顶层的组件，一般情况下，一个独立的应用有且只有一个根组件（节点）
   * 可复用的功能组件：
   *  组成应用的具有独立功能一个部分：轮播图、选项卡、等
   *  通过 Vue 提供的可复用组件的方式来组织这些组件，以达到可复用、可维护……
   */

  /**
   * 创建可复用的功能组件
   * Vue.component('组件在使用的时候的名称', {组件的配置})
   *
   * 根组件 和 可复用的大致上是相同的，当然也有一些不同点
   */
   Vue.component('comA',{
    template:`<div>组件</div>`
  })
   /**
    * Vue 是组件构建而成的
    *
    * 我们的一个应用 就是 从 Vue 的组件开始的
    *
    * 通过 new Vue(options) 来创建一个跟组件
    *  options：构建组件需要用到的一些配置参数
    *
    * Vue 构建UI => 模板引擎
    *
    *
    * 通过 new Vue(options) 的方式，可以构建一个根组件（应用的顶层组件，类似html标签），后面我们根据实际的应用需求创建各种具有不同功能的可复用的功能组件（非根组件），然后把这些可复用的功能进行组合，放入到根组件中，组成一个完整的应用
    */
  let app = new Vue({
    template:`
    <div>
      <h1>测试</h1>
      <hr />
      <comA />
    </div>
    `
  })
  app.$mount("#app")
</script>
</body>
</html>

组件配置选项：https://cn.vuejs.org/v2/api/

组件内容渲染

渲染一个组件的内容可以通过两种方式来进行

template 选项
render 选项（函数）

template

type : string

组件的模板结构（HTML），模板内容会被 vue 进行渲染，生成最终的 HTML 内容，并替换占位（挂载）元素

el

type : string | Element

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，

该选择只对 new 创建的实例有效
如果提供 el ，但是没有提供 template ，则 el 的内容讲将为 template
如果有el选项，则不需要app.$mount函数,app立刻挂载。

render

type : (createElement: () => VNode) => VNode

发挥 JavaScript 最大的编程能力，直接创建 VNode （虚拟dom对象），优先级高于 el 和 template

有更强大的编程能力
有更高的性能

https://cn.vuejs.org/v2/guide/render-function.html

使用 $mount 方法延迟 `Vue` 实例的挂载

当 Vue 实例没有 el 选项的时候，它会处于一种未挂载的状态，我们可以通过组件 Vue 实例对象的 $mount 方法来手动挂载，通过该方式，我们也可以达到延迟 Vue 实例的挂载的目的

组件中的数据（状态）

data

组件内部使用的数据，data 是一个对象，data 中的值可以中模板中直接访问

Vue 实例组件（根组件）的 data 是一个对象
可复用功能组件的 data 必须是一个函数，且该函数必须返回一个对象（因为复用性，避免多个组件实例引用同一个对象。换句话说，组件中使用的数据必须是一个对象，但是可复用组件的这个数据对象必须通过函数返回

data 的访问

data 数据可以直接通过组件实例对象访问，也可以通过实例对象下的 $data 属性进行访问

组件实例对象下有很多的以 $ 开头的属性，这些都是实例对象内置的一些属性和方法，vue 为了区分数据与内置属性方法，内置的属性和方法默认都是以 $ 开始的，所以我们中数据中应该避免使用 $ 开头的数据

模板语法

vue 使用了基于 html 的模板语法，使用声明式的方式把实例中的数据（data）与 DOM 进行绑定，data 中的数据在模板中可以直接使用

Mustache（双大括号，大胡子）语法

在 vue 中，我们是通过一对双大括号把实例中的数据渲染到模板内容中

插值表达式

在 {{}} 中，我们可以放置表达式值

{{表达式}}

new Vue({
  el: '#app',
  data: {
    title: 'vue 框架'
  },
  template: `<div>{{title}}</div>`
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
      {{title}}
  	</div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
              title: 'vue 框架'
            }
        });
    </script>
</body>
</html>

数据到视图的更新

vue 会把 data 中的数据挂载到实例属性下，同时对它们进行主动的监听拦截，当数据发生变化的时候，重新渲染模板。我们可以通过实例对象对数据进行修改

app.title = '测试';
// or
app.$data.title = '测试';

检测变化的注意事项

在 vue3 之前，数据的监听是通过 Object.defineProperty 方法来实现的，但是该方法只能监听拦截单个数据，对于对象新增属性无法监听拦截。所以，对于数据对象中新增的属性，我们需要调用 vue 提供的方法来进行处理

扩展

通过 Object.defineProperty 监听拦截中存在一些问题

属性新增属性
数组方法：push、pop、shift、unshift、splice、sort、reverse
数组新增值：[]
数组 length 属性

以上的操作中并不会触发监听拦截

vue 对数组中的 push、pop 等方法进行重新包装，所以在 vue 中调用这些方法，可以对数组的修改进行监听拦截

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method

使用 Vue.set 方法添加新数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <p>title: {{title}}</p>
        <p>user.username: {{user.username}}</p>
        <p>user.gender: {{user.gender}}</p>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                title: 'vue 框架',
                user: {
                    username: 'zMouse'
                }
            }
        });
    </script>
</body>
</html>

在模板中，我们使用了一个不存在的数据 user.gender

如果我们通过 app.user.gender = '男'的方式来新增，是不会被 vue 拦截监听处理的，我们需要使用

Vue.set(app.user, 'gender', '男');
// 实例.$set 是 Vue.set 的别名
app.$set(app.user, 'gender', '男');

这样的方式，set 方法给 app.user 添加 gender 属性的同时，对它进行了 defineProperty

虽然现在入职了，可惜并不是自己喜欢的前端，那就现在开始慢慢学习，通过博客记录自己的复习学习过程，鞭策自己慢慢变强！互勉❤~