一、初识vue，vue是什么，语言介绍与编写环境搭建

人亦已歌 · 发表于 2022-10-16 17:39:04

首先还是说下VUE是什么。
VUE是一个javascript框架，该框架是中国人编写的为数不多能拿的出手的框架，VUE与jquery不同的是：jquery只是对JS功能的封装。例jquery它写好了一些常用的一些文本处理、数组处理之类的方法，我们用的时候拿过来用就是，而不用我们自己再用原生JS一句句代码的实现它。

而VUE则则不同。我们知道，原生JS是通过操作DOM对象的方式实现对HTML标签的控制，而VUE虽然也有DOM操作，但它的核心功能是数据驱动模式。即：当我们要操作某个标签时，不需要使用一些选择器方法去选中该元素，而是通过数据绑定的方式实现的。即：将一个变量与一个标签绑定，这样只要控制这个变量就可以实现对标签的控制，类似于给标签添加了一个自定义属性，只是VUE对这个自定义属性赋予了更多的语法，最终实现了更为强大的功能。

需要注意的是：在Web开发过程中，过去很长一段时间内，程序员都是通过DOM对象来控制页面标签的。VUE的诞生突破了这种模式，这是一个革命性的变化，后来新生的一些框架也逐渐转向了数据驱动模式。

为什么采用数据驱动？原因只有一个：高效便捷。

关于VUE就先介绍到这里，更多说明网上一搜到处都是，这里就不说了。

下面我们就开始搭建VUE的代码编写环境。

vue代码的编写环境的搭建有以下两种方式：

1、如同使用jquery一样，直接引入vue的库文件。
2、通过安装VUE官方提供的脚手架，创建一个VUE项目，然后再VUE中编写代码。

由于目前我们只是学习VUE的语法，所以就先用第一种方式，直接引入VUE文件来实现。后面做项目的时候，我们再使用第二种方式。

本专题我们讲解的VUE2，框架文档和源代码下载地址如下：

https://v2.cn.vuejs.org/v2/guide/installation.html

复制代码

在任意目录中创建一个编写VUE代码的文件夹，我这里创建的目录是Y:\Code Archives\Vue\vuestudy，大家随意，但建议尽量把所有源代码都保存到一个固定的位置，不要到处乱放。

然后打开VScode，打开该文件夹，左侧文件管理器中右击新建一个js文件。
然后打开以上网址，下载Vue2.0的开发版本并复制到该文件中，然后在页面中如同引入普通JS文件一样将其引入即可。

如下：
一、初识vue，vue是什么，语言介绍与编写环境搭建

然后我们编写第一段VUE代码试试看，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./Vue-v2.7.14.js"></script>
    <title>vue初体验</title>
</head>
<body>
    <div id="app">
        {{das}}{{xyz}}
    </div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            das: 'hello',
            xyz: 'world'
        }
    });
</script>
</html>

解释一下：

在以上代码中，我们并未在标签中写任何数据，而是将数据写到了script标签中。
我们先在HTML中创建了一个id为app的div标签，然后在script标签中开始用JS代码操作这个标签。
如果不使用VUE，如果我们想给div添加内容怎么做？是不是需要先使用DOM选择器方法来选中该元素呢？是的！例如：

document.getElementById('app').innerHTML="helloworld";

或者用jquery选择器方法$('$app')去选择元素。

如果我们用vue操作就不需要这样选择元素了，它的语法是：
先new Vue这个构造函数，得到一个实例对象，我们使用变量app接收这个实例对象。
在new构造函数时需要传入一个对象作为实参，该对象中包含很多成员，这些成员都是Vue语法规定的，后续我们都会一一讲解。
以上例程中，我们在给构造函数传入的实参对象中写了两个成员，一个是el:'#app'，这句话的意思是，选中id为app的元素。另外一个是data成员，data的数据是一个对象，对象中定义了两个成员，这两个成员就是页面中显示的数据。

此时，如果要在页面中现显示data中的数据，只要使用胡子语法(即：{{}})调用这两个变量即可。

所以运行结果如下：

一、初识vue，vue是什么，语言介绍与编写环境搭建