【Vue入门】1、初识Vue

世人万千丶

已于 2023-09-03 11:57:52 修改

阅读量77

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-09-03 11:53:48 首次发布

本文链接：https://blog.csdn.net/qq_39088168/article/details/132646994

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基本概念，包括其在前端框架中的地位、学习原因、与原生JS的对比、发展历程以及特点。重点讲解了如何引入Vue并实现第一个HelloWorld程序，包括View、Model和ViewModel的定义，以及Vue的工作原理和实例参数分析。

摘要由CSDN通过智能技术生成

3.创建一个Vue实例或ViewModel，它用于连接View和Model

4、Hello World细节分析

总结：

1、Vue基本概念

1.1 Web前端框架介绍

近几年，互联网前端行业发展得依旧迅猛，涌现出了很多优秀的JavaScript框架，同时这些JavaScript框架也正在逐渐改变统的前端开发方式。在这些新出现的JavaScript框架中，最具代表性的框架有Vue.js、React.js和Angular.js，称为前端框架的三驾马车。angular 谷歌公司,react Facebook,Vue 尤雨溪。

1.2 为什么要学Vue

更少的时间，干更多的活，开发网站速度快

1.3 原生js和Vue展示数据对比

原生js需要频繁进行DOM操作，降低性能

<ul id="myUl"></ul>
<script>
    let arr = ["春天", "夏天", "秋天", "冬天"]
    let myUl = document.getElementById('myUl')
    for (let i = 0; i < arr.length; i++) {
        let li = document.createElement("li")
        li.innerHTML = arr[i]
        myUl.appendChild(li)
    }
</script>

Vue利用数据双向绑定来更新页面，不需要频繁进行DOM操作，有更多时间去思考业务逻辑

<ul id="myUl">
    <li v-for="item in arr">
        {{item}}
    </li>
</ul>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#myUl',
        data: {
            arr: ["春天", "夏天", "秋天", "冬天"]
        }
    })
</script>

1.4 Vue诞生

2014年2月，Vue.js正式发布
2015年10月27日，正式发布1.0.0
2016年5 月，Vue2发布
2019年12月，Vue3发布
。。。

尤雨溪：Vue.js的创建者

1.5 Vue是什么

Vue是一套构建用户界面的渐进式JavaScript框架，可以自低向上逐层的应用（逐渐进步，想用什么就用什么），可以通过简洁的API来提供高效的数据绑定和灵活的组件系统。它提供了现代Web开发中常用的高级功能，比如：

- 解耦视图和数据。
- 可复用的组件。
- 数据绑定。
- 功能插件化。
- 虚拟DOM（Virtual DOM）

1.6 库和框架

库（Library）：封装的属性或方法（jQuery）

框架（Framework）：拥有自己的规则和元素，比库强大的多

1.7 Vue基于MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

View：代表的是视图、模版，负责将数据模型转化为UI展现出来。

Model：代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。

ViewModel：连接Model和View，通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。

1.8 Vue的特点

1.采用组件化模式，提高代码复用率，让代码更好的维护

2.声明式编码，让编码人员无需操作DOM，提高开发效率

3.使用虚拟DOM+diff算法：尽量复用DOM节点

2、引入Vue

从官方网站中下载Vue文件 https://v2.cn.vuejs.org/v2/guide/

选择版本，下载即可

1.离线方式（需要下载好vue.js文件）

在html页面文档首部使用<script></script>标记添加（建议使用相对路径）

<script src="./js/vue.js"></script>

2.在线方式（需要有网络）

在html页面文档首部使用<script></script>标记添加

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

3、第一个Vue程序

学习了Vue的基本概念和引入方法，接下来写我们的第一个Vue程序吧。众所周知，每一个程序员都是从Hello World开始的。

适用Vue的过程就是定义MVVM各个组成部分的过程，步骤如下：

1.定义View

<!--这是View-->
<div id="app">
    {{ msg}}
</div>

2.定义Model

其实就是数据项

data: { msg: 'Hello World' //这就相当于Model }

3.创建一个Vue实例或ViewModel，它用于连接View和Model

// 创建一个Vue实例或ViewModel，它连接View与 Model
var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World'  //这就相当于Model
    }
});

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--这是View-->
    <div id="app">
        {{ msg }}
    </div>

    <!-- 引入Vue -->
    <script src="../vue.js"></script>
    <script>
        // 创建一个Vue实例或ViewModel，它连接View与 Model
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World'  //这就相当于Model
            }
        });
    </script>
</body>

</html>

运行效果如下：

4、Hello World细节分析

1.实例参数分析

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）

data：模型数据（值通常是一个对象）

2.差值表达式用法 {{}}

将数据填充到HTML标签中，例如程序中的{{msg}}

差值表达式支持基本的计算操作

3.Vue代码运行原理分析

概述编译过程的概念（Vue语法→原生语法)