Vue学习笔记一：初识Vue

最新推荐文章于 2022-06-12 23:25:12 发布

「已注销」

最新推荐文章于 2022-06-12 23:25:12 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/qq_27211375/article/details/93935272

版权

什么是Vue？
为什么要学习前端框架？
MVC，MVP 和 MVVM
最简单的入门小案例
Vue和MVVM

什么是Vue？

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

为什么要学习前端框架？

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

原生JavaScripts：各个浏览器的兼容性无法保证
Jquery
前端引擎模板：表格1000条数据渲染不行
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文件夹，然后内部有两个文件夹，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，记住，有-的，还有一个同名但是没有-的不好用，认准这个，好用

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

可笑的小报错

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

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

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

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>

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