vue学习笔记day1

共计 2130 个字符，预计需要花费 6 分钟才能阅读完成。

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

首先我们解释一下什么的是 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 中展示信息有三种方式，包括：

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

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

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 指令是用来绑定事件机制的，前提是需要在实例的 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! 的对话框。

实现效果是，点击开始按钮，文字会进行滚动，点击结束，文字停止滚动（主要是对之前的内容进行综合运用，并添加了一个 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 指向。

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

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

vue 中的代码与 MVVM 的关系

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

v-bind 指令的作用

v-on 指令的作用

vue 实现走马灯的效果

vue 中的事件修饰符

Just My Socks（注册教程内含优惠码）