VUE

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

需要了解

渐进式框架

渐进式框架： 意思就是可以只用到需要的一部分，而不是需要其中一点就必须用所有部分。

MVVM

MVVM：Model-View-ViewMode MVVM是一种软件架构模式并非一种框架，是一种思想。

开始

引入JS文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

声明式渲染

简单的Html结构

<div id="app">
    {{message}}
</div>

声明Vue对象

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

• el:Vue需要操作的元素节点
• data属性:每个 Vue实例都会代理其 data对象里所有的属性。需要注意的是只有这些被代理的属性是响应的。

引入了vue.js，Vue会被注册为一个全局变量。在实例化 Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

vue指令

v-text

更新元素的文本内容

<span v-text="msg"></span>

v-html

更新元素的 innerHTML

<div v-html="html"></div>

v-show

根据表达式之真假值，切换元素的 display

<h1 v-show="boolean">Yes</h1>

• 如果boolean为false，则h1的display为none
• v-show 不支持 <template> 元素，也不支持 v-else。

v-if

根据表达式的值的真假条件渲染元素

<h1 v-if="boolean">Yes</h1>

• 如果boolean为false，则h1不会被渲染出来

v-else

<div v-if="Math.random() > 0.5">
    Now you see me
</div>
<div v-else>
    Now you don't
</div>

如果boolean为false，则h1不会被渲染出来

v-else-if

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else>
    Not A/B
</div>

v-for

多次渲染元素或模板块。必须使用特定语法 alias in expression，为当前遍历的元素提供别名。

<div v-for="item in items"> 
    {{ item.text }} 
</div>

同时还可以这样：

<div v-for="(item, index) in items"></div> 
<div v-for="(val, key) in object"></div> 
<div v-for="(val, name, index) in object"></div>

v-on

绑定事件监听器

• 有缩写 @
• 事件类型由参数指定，例如：click、submit等等。
• 表达式可以是一个方法的名字或一个内联语句。

事件修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - 只当点击鼠标左键时触发。
• .right - 只当点击鼠标右键时触发。
• .middle - 只当点击鼠标中键时触发。
• .passive - 以 { passive: true } 模式添加侦听器

<button v-on:click="doThis"></button>

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

<!-- 缩写 -->
<button @click="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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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

v-bind

• 有缩写 :
• 在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
• 当 v-bind:style 使用需要特定前缀的CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

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

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

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

.v-model

在表单控件或者组件上创建双向绑定

• 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
• v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

事件修饰符

• .lazy - 取代 input监听 change事件，例如文本输入框就不会在输入 -时就改变视图，需要失去焦点时才会改变视图。
• .number - 输入字符串转为数字，如果原值的转换结果为 NaN 则返回原值。
• .trim - 输入首尾空格过滤

v-pre

跳过不编译，跳过这个元素和它的子元素的编译过程

• 不需要表达式
• 跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>
//会连同花括号一直展示出来：{{ this will not be compiled }}

v-cloak

• 不需要表达式
• 这个指令保持在元素上直到关联实例结束编译。
  结合 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css

[v-cloak] {
    display: none;
}

HTML

<div v-cloak>
    {{ message }}
</div>

v-once

• 只渲染元素和组件一次。
• 随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。可以用于优化更新性能。

其他

v-if vs v-show

• v-if 是“真正”的条件渲染。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
• 非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。