Vue概念及配置

一、Vue 概念

概念：

Vue 是一个用于构建用户界面的渐进式的 javascript 框架。它基于标准 HTML、css 和 javascript 构建，可以帮助高效开发用界面，可以配合其他的工具进行开发，如 Vue-router、Vuex、axios、Pinia。

作用：

vue 适合开发前后端分离的项目(SPA 类型)，单页面应用程序---在一个页面中实现所有的功能，没有真正的路径跳转。

核心：

• 数据驱动视图

只需要修改页面绑定的数据就可以更新其对应的视图，优化 DOM 操作，提高开发效率。

• MVVM（双向数据绑定） 让数据实现双向绑定，实心数据自动双向同步

  • M---Model(数据模型) 在 data 中定义，M 修改数据->V 视图自动同步

  • V---View(视图页面) 在 html 中，V 修改视图->M 数据自动同步

  • VM---ViewModel（视图模型）

• 组件化开发

将页面按照功能拆分成单独的组件，每一个组件有独立的功能，提高代码的可复用性和维护。

二、Vue 配置

通过 script 引入

• 本地下载

  • https://cn.vuejs.org/js/vue.js 下载地址

  • 放在本地项目，script 引入即可

• cdn 的方式

  • <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

通过 npm 安装

• 下载 npm i vue

• 导入 const Vue = require('vue') import Vue from 'vue'

• 注意 前端开发，在浏览器运行不行。

• 需要借助一些工具才能支持 以上写法。