vue学习笔记--day1

栏目: JavaScript · 发布时间: 5年前

内容简介：最近开始慢慢接触vue的学习，希望每天能记录一下学习的内容，好记性不如烂笔头。首先我们解释一下什么的是MVVM，MVVM是针对前端而言的一种模式，目前流行的框架都是这种模式，分为三层，即M层（数据层），V层（显示层）以及VM层（将数据同步到页面显示，并将页面上的修改同步到数据层）。上面的代码很好地解释了在vue中怎样实现MVVM模式的，使用vue就不需要再像以前使用jQuery那样去操作DOM来显示数据，相对来说会方便很多。

最近开始慢慢接触vue的学习，希望每天能记录一下学习的内容，好记性不如烂笔头。

vue中的代码与MVVM的关系

首先我们解释一下什么的是MVVM，MVVM是针对前端而言的一种模式，目前流行的框架都是这种模式，分为三层，即M层（数据层），V层（显示层）以及VM层（将数据同步到页面显示，并将页面上的修改同步到数据层）。

<body>
<!--需要进行渲染的部分，即MVVM中的V层-->
<div id="app">{{message}}</div>

<script>
    //创建一个vue实例，用来控制页面中id为app的元素
    //整个的vm实例就想相当于是VM层，用来控制将数据传输到V层
    var vm = new Vue({
        el: '#app',
        //这里的data就相当于是M层，用来控制数据
        data: {
            message: '欢迎使用vue！'
        }
    })
</script>
</body>

上面的代码很好地解释了在vue中怎样实现MVVM模式的，使用vue就不需要再像以前使用jQuery那样去操作DOM来显示数据，相对来说会方便很多。

vue中展示信息的3种方式之间的区别

vue中展示信息有三种方式，包括：

使用插值表达式的形式（也叫双括号）--{{}}
使用v-text='变量'的形式
使用v-html='变量'的形式

这三种方式都可以进行数据展示，区别在于当网速比较慢的时候，使用{{}}会有闪烁的问题，这时需要使用v-cloak命令去解决这个问题，而v-text就不会出现这个问题，但是v-text不能在该变量的前后添加文本，即在标签中的内容是不会显示的，这个时候采用{{}}会更加合适；v-html更适合于变量中有标签需要进行编译的情况。

v-bind指令的作用

v-bind指令是用来绑定属性的，如果在标签中的某个属性前面使用了v-bind，说明该属性等号后面是一个变量，并且等号后面可以直接写js表达式，有时也会将v-bind:简写成:

//下面两行代码的实现效果相同
    <input type="button" v-bind:title="msg3+'按钮'" value="测试按钮">
    <input type="button" :title="msg3+'按钮'" value="测试按钮">
    
    //如果不使用v-bind，那么提示信息就是title属性后面的字符串
    <input type="button" title="msg3" value="测试按钮">

v-on指令的作用

v-on指令是用来绑定事件机制的，前提是需要在实例的methods对象中进行定义，v-on：后面接的是事件类型，例如click等，等号后就是绑定的事件，如下面代码所示：

<!--在vue中使用v-on来提供事件绑定机制，在等号后面放的是绑定的方法名，需要在实例的methods对象中进行定义-->
    <p v-on:click="show">这是可以点击的p字段</p>
    
    methods:{
            show: function () {
                alert('Hello vue!')
            }
        }

上面代码的意思就是在p标签中绑定一个click事件，当点击该p标签时，就会弹出显示Hello vue!的对话框。

vue实现走马灯的效果

实现效果是，点击开始按钮，文字会进行滚动，点击结束，文字停止滚动（主要是对之前的内容进行综合运用，并添加了一个this的用法）

<div id="test">
        <input type="button" value="开始" @click = 'active'>
        <input type="button" value="结束" @click = 'stop'>
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#test',
            data: {
                msg: '快跑吧，天要下雨了！！！',
                intervalId: null
            },
            methods: {
                active(){
                    if(this.intervalId !== null) return;

                    this.intervalId = setInterval(() => {
                        console.log(this.msg)
                        start = this.msg.substring(0,1)
                        end = this.msg.substring(1)
                        this.msg = end + start
                    },400)
                },
                stop(){
                    clearInterval(this.intervalId)
                    this.intervalId = null;
                }
            }
        })
        
    </script>

该例子说明，在实例中，this指向的就是该实例，可以通过this去获取data中的任何属性值，在methods中不同的方法之间变量是不可以共享的，解决方法就是将该变量添加到this上，然后通过this去获取该值。还有一个问题就是在定时器中，this的指向会发生改变，有两种解决方案，第一种是在定时器外面将this的值用变量保存起来，第二种是使用箭头函数，利用箭头函数中的this是指向上下文的这一点调整this指向。

vue中的事件修饰符

事件修饰符是针对v-on命令的，主要包括以下几个：

.stop:阻止冒泡事件
.prevent:阻止默认事件
.capture:换成捕获事件
.self:自身不被触发
.once:只会被触发一次

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

数据结构与算法分析

维斯 / 冯舜玺 / 机械工业出版社 / 2004-1-1 / 35.00元

本书是《Data Structures and Algorithm Analysis in C》一书第2版的简体中译本。原书曾被评为20世纪顶尖的30部计算机著作之一，作者Mark Allen Weiss在数据结构和算法分析方面卓有建树，他的数据结构和算法分析的著作尤其畅销，并受到广泛好评．已被世界500余所大学用作教材。在本书中，作者更加精炼并强化了他对算法和数据结构方面创新的处理方法。......一起来看看《数据结构与算法分析》这本书的介绍吧!

码农工具

JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析

在线 JSON 格式化工具