【vue-01】快速入门
阅读原文时间:2023年07月10日阅读:2

什么是vue

vue是渐进式JavaScript框架

什么是渐进式?

​ 你可以在原有大系统的上面,把一两个组件改用vue实现,;也可以整个项目用vue全家桶开发。

vue是一个轻量级的MVVM框架。

前端框架发展

DOM:原生JS->ExtJSJQuery->easyuilayui等等(简化DOM操作)

官网 vue-element-admin

MVVM:AngularvueReact。能够帮助我们减少不必要的DOM操作,提高渲染效率。数据绑定(单向、双向),通过框架提供的一些指令,我们只需要关注数据的业务逻辑,不需要关注DOM是如何渲染的。在vue中,一个最核心的思想就是不让用户去操作DOM元素。

  • Model:【数据模型与持久化抽象模型】数据模型很好理解,就是从服务器拉回来的JSON数据。而持久化抽象模型暂时放在Model层。
  • View:【视图层】不做数据处理,只是将VM的数据进行展示。
  • ViewModel:链接View和Model的作用,完成了DOM的监听和数据绑定

当你成功完成【快速开始】后,可以通过一个例子来分析MVVM。

快速开始

直接使用script引入

对于制作原型或学习,你可以这样使用最新版本:

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

NPM

# 最新稳定版
$ npm install vue

vscode版本

在vscode上安装一个插件open in browser,然后就可以运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{msg}}
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        // Model 数据
        data:{
            msg :"hello vue"
        }
    });
</script>
</html>

idea版本(可忽略)

https://www.cnblogs.com/10134dz/p/14394506.html

现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?

打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 vm.msg 的值,你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。