[JavaScript知识库]vue基础复习

mvvm

? ? ? ? model:?模型

????????view：视图

????????viewmodel ：与视图对应的model

? ? ? ? 模型和视图并没有直接关联，而是通过viewmodel来处理的。model和viewmodel是双向绑定的，viewmodel和view也是双向绑定的，所以当model中数据发生变化时，会同步更新view中，反之view中界面数据发生变化时也会更新model。

vue双向绑定原理

? ? ? ? 核心就是用Object.defineproperty数据劫持?结合? 发布订阅模式?来实现的。当数据发生变化时更新视图，视图变化时改变数据。

什么是vue

? ? ? ? Vue是用于构建用户界面的渐进式框架，Vue的核心库只关注视图层，更易上手。

Vue的指令

? ? ? ? v-text? ?用来将数据填充到标签中

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

? ? ? ? v-html? ?类似v-text，将html填充到标签中

? ? ? ? v-show?显示或者隐藏元素，相当于css的display: none

? ? ? ? v-if? / v-else-if / v-else? ? ? 效果等同于v-show，不同点是v-if条件为真时才会渲染。

? ? ? ? v-for? ? ?循环渲染。当和v-if一起使用时，v-for优先级更高。常常需要绑定key值。

? ? ? ? v-on? ? ?绑定事件监听。缩写@

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

/************************************************/
// 在子组件上绑定事件，当子组件调用my-event时触发
<my-component @my-event="handleThis"></my-component>

? ? ? ? v-bind? 属性绑定

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

? ? ? ? v-model? ?双向绑定，仅限在input / select / textarea / components中使用

? ? ? ? v-pre? ? 跳过这个节点和他的子节点，不需要编译。

? ? ? ? v-solt? ? 提供具名插槽

? ? ? ? v-once? 只渲染一次

自定义指令

? ? ? ? Vue.directive

key的作用

? ? ? ? 给每个项添加一个key，以便跟踪每个节点的变化，让数据更高效的渲染。如果不添加key，那么如果数据顺序发生改变，vue不会移动数据项的顺序，而是就地更新每个元素，确保在每个索引位置正确渲染。

计算属性computed

? ? ? ? 当模板中不再是简单的声明，需要复杂的表达式时可以用计算属性。

? ? ? ? 计算属性是基于它们的响应式依赖进行缓存的，只有相关响应式依赖发生改变时，才会重新求值，所以多次访问计算属性时，如果数据没有改变会立马返回值。

<div id="app">
        <div>{{ reverse }}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: 'zhangsan'
                
            },
            computed: {
                reverse() {
                    return this.name.split('').reverse().join('')
                }
            }
        })

    </script>

watch

? ? ? ? 监听数据变化，有两个参数，第一个是新值，第二个是旧值。一般用于异步操作。

<script>
        new Vue({
            el: '#app',
            data: {
                name: 'zhangsan',
                msg: ''
                
            },
            computed: {
                reverse() {
                    return this.name.split('').reverse().join('')
                }
            },
            watch: {
                msg: function(newmsg, oldmsg) {
                    console.log('新值:'+ newmsg)
                    console.log('旧值:'+ oldmsg)
                }
            }
        })

    </script>