Vue基础(一)

2024-04-08 11:56:39

Vue基础（一）

vue官方文档：https://cn.vuejs.org/v2/guide/

Vue只负责视图层！视图层就只负责给用户看、以及刷新后台给的信息。

Vue遵守Soc原则：关注点分离原则

Vue核心：数据驱动、组件化！

vue也分为三层：MVVM

M：model层。在这里表示JavaScript对象
V：view层。在这里表示DOM元素
VM：ViewModel层。连接视图与数据的中间件，Vue.js就是ViewModel层的实现者

ViewModel的作用是：双向数据绑定。

后端会将数据传到Model层，ViewModel会监听Model。Model中的数据变了，那么View中的数据也会变！

安装Vue

在IDEA中下载安装Vue.js
导入Vue.js
- 使用CDN导入，在线使用
- 下载Vue.js项目后，离线使用
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

第一个Vue页面（伪）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入需要的包-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>
    <body>

        <div id="app">
            <!--
            使用{{}}}获取vm中的数据，这个数据可以引用model层的对象，这样vm就起到了连接
            model和view的作用了
            这样就有了一个模板template，{{message}}它就是模板
            -->
            {{message}}
        </div>

        <div id="app2">
            {{message}}
        </div>

        <script>
            // 创建一个vue对象用来监听DOM元素
            var vm = new Vue({
                // 绑定要监听的DOM元素
                el: "#app",
                // 数据存的是model层的数据
                data: {
                    message: "hello, vue!"
                }
            });

            var vm = new Vue({
                // 绑定要监听的DOM元素
                el: "#app2",
                // data就是一个js对象
                data: {
                    message: "hello, vue!"
                    message2: "xxxxx"
                }
            });
        </script>
    </body>
</html>

从上面代码可以看出View有了，Model也有了。但是从哪里体现出VM呢？

你可以在F12，console中修改以下vm的data试一试。结果是页面不刷新也可以改变数据，这样就体现了一个监听的效果！

改了data就改了dom节点中的信息了，这就是虚拟dom。不用频繁的修改dom中的属性了

以上写的页面并不算完全是一个vue页面，它类似于一个过渡。vue界面使用的标签完全不是他们了。

使用Vue的好处

不卡了。

我之前在做一个课设的时候使用的是操作dom的方式异步更新页面数据，这样每次进入页面都会非常卡，如果页面的dom元素非常非常多的话，就会卡死了。使用Vue你会发现dom元素中数据的修改非常快！
低耦合

视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上（类相同或名称相同），当View变化时Model可以不变（标签改变数据不会变），当Model变化时View也可以不变（数据改变标签不会变）。
可复用

你可以把一些视图逻辑放在一个ViewModel中，让很多View重用这段视图逻辑。
独立开发

开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面的设计
可测试

界面向来是比较难测试的，而现在测试可以针对于View Model来进行。

Vue属性

1.el

【el】表示与哪个【View】（dom元素）进行绑定。其值可以是【选择器】，选择【View】进行绑定

代码与上面相同

2.data

【data】表示与哪个【model】进行绑定。其值是个【model】（model是个对象）

代码与上面相同

3.methods

【methods】表示与【View】相连的监听的事件。其值是一个键值对（对象），键值对的键是函数名，值是一个function

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="addOne">点我加一</button>
            <h1>{{num}}</h1>
        </div>


        <script>
            var vm1 = new Vue({
                el: "#app",
                data: {
                    num: 0
                },
                methods: {
                    addOne: function () {
                        this.num += 1
                        console.log(this.num)
                    }
                }
            })
        </script>
        
    </body>
</html>

码农公寓