Vue基础

最新推荐文章于 2022-08-24 17:48:12 发布

原创最新推荐文章于 2022-08-24 17:48:12 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

1.MVVM

什么是MVVM

MVVM本质上描述的是一种视图和逻辑之间的数据双向关联关系，专业术语中称为数据双向绑定模式。

核心：结构分离（视图和数据分离）、双向同步（数据可以自动渲染，页面数据可以自动更新）MVVM和MVC

MVVM是一种数据双向绑定模式，核心解决了数据和结构分离、数据双向同步的问题

MVC是一种编程模式，核心解决了根据用户请求处理不同业务的逻辑问题，主要描述了请求分发

MVVM和MVC都是程序开发中的一种编程的设计方式，是一种设计思想

MVVM主要体现在前端应用中，将页面结构和数据模型进行分离，同时通过中间模块vm实现数据的双向绑定，提高数据的加载和渲染效率，同时让开发人员的精力主要集中在业务处理上而不是技术同步数据上，提高开发的效率

MVC主要体现在后端应用中，将客户端请求和对应的业务模块进行规则映射，根据不同的请求分发到不同的业务模块完成数据处理，可以在固定的模式下完成复杂的业务功能处理的软件结构，提高后端应用开发效率

底层工作原理

Vue中的一个重要特性就是数据的双向绑定，底层主要是通过数据劫持的方式实现的

2.组件基础

什么是组件？

描述了一个包含页面结构，基础样式，逻辑数据的完整视图！组件化开发就是将多个页面中公共的视图部分抽取成独立存在的组件，在多个页面中实现复用，提高项目开发效率！

组件的声明

Vue提供了组件的声明方式，声明全局组件和局部组件

基本语法

1、全局组件
Vue.component('组件名称', {
    template: '组件的页面结构',
    data() { // 组件中的data选项，必须是一个返回数据对象的函数；不能直接是一个对象
        return {
            title: '首页'
        }
    },
    methods: {},
    filters: {},
    ...
})
    
2、局部组件
new Vue({
    el: "#app",
    data: {},
    components: {
       MyHeader: {
              template: '<div></div>',
              data() {
                    return {
                        title: '页头'
                    }
              }
       },
       MyFooter: {...}
    }
})

组件：本质上就是一个Vue实例，组件内的选项和实例的选项一致
组件的名称：不要和html内建标签的名称冲突，会导致组件失效
组件的名称：标准名称帕斯卡命名法（见名知意，多个单词组成，每个单词首字母大写）页面中使用组件第一个字符大小写无所谓，后面每个大写的单词必须修改成小写字母，字母前添加中划线，组件才能正常访问

组件的嵌套

实际项目中多个组件之间一般会呈现一种嵌套关系，就会出现包含组件的父组件以及被包含的子组件，这部分内容我们了解组件是如何实现嵌套的！

<!DOCTYPE html>
<html lang='zh'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <style>
    *{margin: 0; padding: 0; box-sizing: border-box;}
    .header{height: 50px; border-bottom: solid 2px #ddd; text-align:center; line-height: 50px;font-size: 18px;}
    .nav{list-style:none; display: flex; position: fixed; left: 0; bottom: 0; width: 100%; border-top: solid #ddd 2px; background: white;}
    .nav li{flex: 1; height: 50px; text-align: center; line-height: 50px; font-size: 18px;}
    .nav li:hover{background: orangered; color:white;}
  </style>
</head>
<body>
  <div id='app'>
    <!-- 被包含的子组件 ： 嵌套关系-->
    <my-header></my-header>

    <!-- 被包含的子组件：导航-->
    <my-aside></my-aside>
  </div>

  <script src='./vue.js'></script>
  <script>
    // 声明页头组件
    let MyHeader = {
      template: '<div class="header">页头</div>'
    }

    // 声明导航组件
    let MyAside = {
      template: `<ul class="nav">
          <li>首页</li>
          <li>列表</li>
          <li>用户中心</li>
          <li>关于我们</li>
        </ul>`
    }

    const app = new Vue({
      el: '#app',
      data: {},
      watch: {},
      computed: {},
      methods: {},
      components: { // 组件的嵌套，一些组件出现在另一些组件的components选项中
        MyHeader, 
        MyAside
      }
    })
  </script>
  
</body>
</html>

动态组件

Vue应用中出现多个组件时，组件的使用方式除了直接通过组件名称的标签使用方式

// let MyHeader = {...}
<my-header></my-header>

Vue提供了另一种组件的操作方式：动态组件，通过动态属性名称，控制展示的组件

<!-- 页面中展示 Home组件 -->
<component :is="page"></component>
<script>
	...
    data() {
        return {
            page: 'Home'
        }
    }
</script>

所谓动态组件，就是Vue提供了一种组件的使用方式，可以通过component标签的is属性动态控制展示组件的语法

生命周期

描述了一个组件从创建实例，加载DOM，渲染更新数据，销毁的整个流程！

组件的生命周期，主要区分四个阶段：创建、加载、运行、销毁

创建：beforeCreate()、created()
加载：beforeMount()、mounted()
运行：beforeUpdate()、updated()
销毁：beforeDestroy()、destroyed()
缓存的组件：activated()显示、deactivated()隐藏

Vue组件的生命周期，正常情况下包含了4类8组：

创建实例
- beforeCreate()：实例创建之前，项目中几乎不用
- created()：实例创建之后，一般用于初始化data数据：常用
  - 前后端分离项目中，展示某个页面时请求后端数据，created()生命周期函数中发送异步请求，将接口返回的数据存储data中
加载DOM
- beforeMount()：虚拟DOM节点加载之前执行，项目中几乎不用
- mounted()：虚拟DOM节点加载之后执行：常用
  - 网页展示出来之后，需要将data中的数据渲染到界面中
数据更新
- beforeUpdate()：任意数据更新之前执行：项目中几乎不用
- updated()：任意数据更新之后执行：项目中几乎不用
组件销毁
- beforeDestroy()：组件销毁前执行，项目中使用较少
- destroyed()组件销毁后执行：常用
  - 首页发送了两个异步请求；数据还没有返回的情况下用户点击跳转到了用户中心页面；取消首页发送的请求