vue学习笔记--day1

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

内容简介：最近开始慢慢接触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:只会被触发一次

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

查看所有标签

猜你喜欢:

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

码农书籍

Python Algorithms

Magnus Lie Hetland / Apress / 2010-11-24 / USD 49.99

Python Algorithms explains the Python approach to algorithm analysis and design. Written by Magnus Lie Hetland, author of Beginning Python, this book is sharply focused on classical algorithms, but it......一起来看看《Python Algorithms》这本书的介绍吧!

码农工具