什么是Vue

最新推荐文章于 2022-09-28 17:29:26 发布

chen__cheng

最新推荐文章于 2022-09-28 17:29:26 发布

阅读量1.9k

点赞数 3

分类专栏： # VUE 文章标签： Vue

本文链接：https://blog.csdn.net/chen__cheng/article/details/117325206

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是Vue

1.什么是VUE

Vue是一个渐进式javascript框架。

渐进式的含义：从声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建。整个流程，可以根据项目需求只使用其中一个模块进行开发。由浅入深的方式去使用Vue。
如果需要路由：可以使用vue-router

如果需要状态管理：可以使用vuex

关于项目构建：可以使用vue-cli

而vuejs则是vue的基础语法规则。
vue则是对以上的简称。

2.vue优点：

体积小

压缩后33k
更高的运行效率

基于虚拟DOM，一种可以预先通过javascript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
双向数据绑定

开发者不需要操作DOM对象，而是直接投入到业务逻辑上。
生态丰富

市场上拥有大量成熟、稳定的基于Vuejs的UI框架、组件。

3.使用场景

web端、移动端、跨平台应用开发

4.兼容性

VUE不支持IE8以下的版本，VUE使用了IE8无法模拟的es5的特性。

5.VUE官网

Vue官网：https://cn.vuejs.org/

Vue现有的版本有：2.x/3.x

接下来先了解2.x版本的Vue的使用

6.安装

<script>标签引入

直接下载vuejs文件，并用script标签引入，此时该文件会暴露一个全局变量Vue

下载地址：https://cn.vuejs.org/v2/guide/installation.html

此处有两个版本
- 开发版本包含完整的警告调试模式
- 生产版本删除了警告，且大小只有33.3KB min+gzip
建议在开发期间使用开发版本

引用：
```
<script src="/test/vue/vue.js" type="text/javascript"></script>
```

CDN引入

开发环境：

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

生产环境

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

npm包下载
CLI脚手架安装

后两种方式适用于建立大型的页面，对于学习VUEJS不友好，这里先使用前两种方式进行学习vuejs2.x

7.简单使用VUE输出`helloworld`

引入vuejs文件

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

创建需要填充数据的标签

<div id="app">
        <div>{{ msg }}</div>
        <div>{{ 1 + 2 }}</div>
</div>

创建Vue实例

<script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            }
        });
</script>

总体：

<script src="/vue/vue.js" type="text/javascript"></script>
<div id="app">
    <div>{{ msg }}</div>
    <div>{{ 1 + 2 }}</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        }
    });
</script>

结果：

vuejs简介_01.png

解释：

el: 元素挂载的位置，值可以是CSS选择器或者是DOM元素

data:模型数据，值是一个对象

{{ msg }} 插值表达式，类似于es6中的模板字符串一样，data中的变量值用于填充插值表达式中的变量，同时插值表达式支持基本的计算操作，因此第二个插值中编译之后显示的结果为：3

而常规情况是，如果单单只写div标签，浏览器并不能解析，只会显示：

而能够显示出第一张图，原因是Vue会先进行编译成浏览器能够识别的html语言

所以我们可以看出，new Vue语法的含义是：通过el指定的元素挂载的位置，将一个Vue实例与DOM元素进行建立联系（告诉DOM，你被我承包了，我来管你里面的数据）。然后Vue会对所关联的DOM进行解析，如果需要{{ }}，就查看里面的变量名是否有与Vue实例中data模型数据中定义的变量名一致，如果一致，则将数据值渲染到{{ }}中，并去除{{ }}的显示，如果需要运算，则进行运算，并显示运算的结果。

注意： 对于没有与Vue实例建立联系的DOM元素，是不会被Vue解析的，毕竟你没有让他来管你。

比如：
```
 <script src="/vue/vue.js" type="text/javascript"></script>
<div id="app">
        <div>{{ msg }}</div>
        <div>{{ 1 + 2 }}</div>
</div>

<div id="app_2">
        <div>{{ msg }}</div>
</div>

<script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            }
        });
</script>
```
结果：