vue复习-1---v-bind和v-on

最近开始复习vue，一下是我对vue这个框架的一点总结

vue介绍

vue是一套用于构建用户界面的渐进式框架，单从这句话就会有个问题

• 什么是渐进式
  
  我的理解就是vue有很多强大的功能，我们可以根据我们的需要，需要什么放入什么，vue不会帮我们做多余的事情

vue声明式渲染

我们可以使用{{}}来插入我们的数据，数据驱动视图，来渲染到我们的视图层，例如

<div id="app">
        {{ a }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            a: 10
        }
    })
    })
</script>

v-bind

对于我们标签中的内容我们可以使用{{}}那么能否动态的改变标签的属性呢？答案是肯定的，我们可以使用v-bind绑定我们的属性，他的简写是:,例如

<div id="app">
    <span :title='titltMsg'>鼠标移动上来有惊喜</span>
</div>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                titltMsg: 'a' + new Date().toLocaleString(),
            },
        })
</script>

绑定class和style

我们想要动态的改变class,那么我们可以绑定:class，如果要绑定多个，我们可以使用数组,并且可以在数组中插入对象，通过对象来决定我们是否要插入这样的一个class。

如果我们的:class和class同时存在，会出现什么样的效果呢，首先我们要知道绑定了class后，动态改变的值会添加到原来的属性上，意味着如果class中不存在该className,会做添加，如果已经存在，就会应用动态改变后的值（绑定style的时候可以看出来）

<div id="app">
    <h4 :class='[className,{classWidth:false}]'>{{ msg }}</h4>
    <div :style="[{width:width,border: '1px solid blue'},styleObj]">123456</div>
		
</div>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                className: 'red',
                classWidth: 'width',
                width: '100px',
                styleObj: {
                    border: '1px solid red'
                },
            },
        })
</script>

v-on

我们接下来实现一个点击按钮来循环切换字体颜色的小demo

首先考虑到的就是事件绑定，vue中事件绑定使用的是v-on:click="function..."这样的语法，v-on也有简写@click='function'

另外还有一个知识点就是，我们的方法要统一放在methods选项卡之下，如果我们将函数放在了其他地方（比如data中）this的指向可能会是window

<div id="app">
    <button @click='change'>
        点击
    </button>
    <h4 :class='classNames[classIndex]'>{{msg}}</h4>
</div>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                classNames: ['red', 'green', 'yellow'],
                classIndex: 0,
                classCount: 0
            },
            methods: {
                change() {
                    this.classIndex = ++this.classCount % 3
                }
            }
        })
</script>

小知识

我们在声明式渲染数据之后，我们数据的改变是会直接反应到视图上的，那么我们在js中是否可以实时获取到改变值呢

<div id="app">
        {{ a }}
    </div>
    <script>
        var app = new Vue({
            // el: '#app',
            data: {
                a: 10
            }

        })
        app.$mount('#app')
        app.a = 20
        app.a = 30
        app.a = 50

        console.log(app.a); // 50
        console.log(app.$el.innerHTML); // 10
        app.$nextTick(() => { //数据会在下一个tick更新
            console.log(app.$el.innerHTML);// 50

        })
    </script>

拿到10的原因是因为更新是异步的无法同步获取。以下是官方文档中关于nextTick的解释

Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个观察者被多次触发，只会被推入到队列中一次。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际（已去重的）工作.Vue在内部对尝试异步队列使用原生的Promise.then状语从句：MessageChannel，如果执行环境不支持，采用会setTimeout(fn, 0)代替。

例如，当你设置vm.someData = ‘new value’，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在DOM虽然Vue.js通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触DOM，但是有时我们确实要这么做。为了在数据变化等待Vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在DOM更新完成后就会调用。