Vue学习笔记一：初识Vue

时间：2020-12-19 14:47:01

什么是Vue？

Vue就是一个渐进式的JavaScript框架。

为什么要学习前端框架？

我们要做前端，不可避免的要写HTML，要写JavaScript，但是自己一个一个打多麻烦啊，于是，前端之路有了以下的发展变化。

  1. 原生JavaScripts：各个浏览器的兼容性无法保证
  2. Jquery
  3. 前端引擎模板：表格1000条数据渲染不行
  4. Vue/Angular之类的框架

接下来详细的介绍一下上面的4部分。

首先，原生JavaScript的缺点是各个浏览器的兼容性无法保证。于是出现了Jquery

Jquery解决了浏览器兼容性的问题，但是操作DOM很麻烦

前端引擎模板解决了操作DOM的问题，但是渲染的时候会重复渲染，我举个例子，列表里面有数据1,3,2,4我要排序，前端引擎肯定会重新排序，但是1和4是不需要动的呀，这还是4条数据，假如1000条，1万条呢？而且，前端模板在处理一些复杂度高的情况下还是很麻烦。框架，就很好的解决了这个问题。

Vue的核心概念就是用户不在操作dom，Vue的数据双向绑定让开发人员只专注于业务。

当然框架也是有缺点的，对项目的入侵性比较大，例如你项目使用的框架是Vue，你做了一半了，突然想换成React，Angular，这当然是很麻烦的，几乎相当于重头构建了

MVC，MVP 和 MVVM

这三种模式需要了解一下，我就不写了，推荐看阮一峰的博客MVC，MVP 和 MVVM

我们的Vue，就是MVVM模式

最简单的入门小案例

下载Vue.js

使用Vue的方式有很多种，比如Vue.js，脚手架等，我先使用Vue.js，后面再讲脚手架的事情。

在官网下载https://cn.vuejs.org/v2/guide/installation.html

Vue学习笔记一：初识Vue

推荐使用这个开发版本。

新建文件结构

我是这样新建文件夹存放文件的

Vue学习笔记一：初识Vue

我新建了一个Vue文件夹，然后内部有两个文件夹，lib放js文件，html放html文件。然后把Vue文件夹拖到VS Code里面，对，我的编辑器使用的VS Code

写一个html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

</head>

<body>

    <div id="app">

        {{ msg }}

    </div>

    <script>

    var vm=new Vue({

        el: '#app',

        data: {

            msg: '许嵩哈哈哈'

        }

    })

    </script>

</body>

</html>

运行

运行这里，讲一个插件view-in-browser，记住，有-的，还有一个同名但是没有-的不好用，认准这个，好用

Vue学习笔记一：初识Vue

然后就可以在html文件上右键，使用浏览器打开了。你可以看到

Vue学习笔记一：初识Vue

可笑的小报错

我在引入js的时候啊，只能自己手打，于是我少打了.我是这样引入Vue.js的

<script type="text/javascript" src="/lib/vue-2.6.10.js"></script>

可以看到，我没有加 .. 因为我的html文件在html文件夹下，所以加.是代表当前，..才是父一级目录，学过Linux的熟悉这个。我忘了加 .. 于是造成了下面这个可笑的报错

Vue学习笔记一：初识Vue

Vue和MVVM

说了，Vue就是MVVM模式的，怎么解释？

我把上面HTML中的Vue部分摘出来，注释里讲解一下

 <!-- 这个div就是MVVM中的V，View -->

    <div id="app">

        {{ msg }}

    </div>

    <script>

        // 这个vm就是MVVM中的VM，ViewModel

        var vm=new Vue({

         el: '#app',

        //  这个data就是MVVM中的M，Model

         data: {

            msg: '许嵩哈哈哈'

            }

        })

    </script>

防盗链接：本博客由蜀云泉发表

相关文章