Vue基础(一)

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层的实现者
    Vue基础(一)

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

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

安装Vue

  1. 在IDEA中下载安装Vue.js
    Vue基础(一)

  2. 导入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界面使用的标签完全不是他们了。

使用Vue的好处

  1. 不卡了。

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

  2. 低耦合

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

  3. 可复用

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

  4. 独立开发

    开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面的设计

  5. 可测试

    界面向来是比较难测试的,而现在测试可以针对于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>
上一篇:给后辈的一点建议,含泪整理面经


下一篇:Javascript-是否有可能淘汰赛更新’initialdata’对象?