Vue

一、什么是指令
指令的本质是自定义属性
指令的格式：以 v 开始
1、v-cloak 指令用法
插值表达式存在的问题： 闪动问题解决方法 v-

提供样式 [v-clock]
{
       display:none;
}

2、在插值表达式所在的标签中添加v-clock指令
原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换之后在显示最终的结果

数据绑定指令

 v-text 填充文本

（1）相比于插值表达式更加简洁

 v-html  填充html片段

（1）、存在安全问题
（2）、本网站内部数据可以使用，来自第三方不可以使用

v-pre 填充原始信息

显示原始信息，跳过编程过程

数据响应式

html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据响应式（数据的变化导致页面内容跟着变化）

数据绑定 ：将数据填充到标签中

v-once 只编译一次

显示编译内容之后不再显示响应式功能

双向数据绑定

1、双向数据绑定分析
v-mode指令用法

MVVM设计思想
1 M (mode)
2 V（view）
2 VM (View-Mode)

事件绑定

1、v-on指令用

<input type='button' v-on:click='num++'/>

2、 v-on简写方式

<input type='button' @:click='num++'/>

事件函数调用方式

3、直接调用

<button v-on:click='say'>你好</button>

4、调用函数

<button v-on:click='say()'>say hi</button>

事件函数参数传递

普通参数和事件对象

<button v-on:click='say("hi",$event)'></button>

事件绑定-参数传递

1. 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2. 如果事件绑定函数调用（函数没有加括号），那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是固定的，即$event

事件修饰符

stop阻止冒泡

<a v-on:click.stop="handle">跳转</a>

.prevent阻止默认行为

<a v-on:click.prevent="handle"></a>

按键修饰符

.enter回车键

<input> v on:keyup.cnter='submit'>

.delete删除键

<input v-on:keyup.delete='handle'>

自定义按键修饰符

• 全局config.keyCodes对象
• Vue.config.keyCodes.f1=112
• f1名字自定义，但是对应的值必须是按键对应event.keyCode的值

Vue 动态处理属性

1、 v bind 指令用法

<a v-bind:href='url'>跳转</a>

缩写形式

<a :href-'url'>跳转</a>

2、v-model的底层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

class样式绑定

1. 对象语法

<div v-bind:class="{active:isActive}"></div>

2、数组语法

<div v-bind:class="[activeClass,errorClass]"></div>

样式绑定相关语法细节

1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class 会保留

style样式处理

• 对象语法

<div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>

数组语法

<div v-bind:style="[baseStyles,overrideStyles]"></div>

分支循环结构

• v-if
• v-else
• v-else-if
• v-show
• v-show 原理 控制元素样式是否显示display:none

v-if 和 v-show的区别

• v-if 控制元素是否渲染到页面
• v-show 控制元素是否显示（已经渲染到了页面）

循环结构

• v-for 遍历数组

<li v for='item in list'>{{item}}</li>

<li v-for='(item,index) in list'>{{item}}+'---'+{{index}}</li>

<li :key='item.id' v-for='(item,index) in list' >{{item}}+'---'{{index}}</li>
key的作用，可以帮助Vue区分不同的元素，提高性能

v-if 和v-for循环使用

<div v-if='value==12' v-for='(value,key,index) in object'></div>

v-for 遍历对象

<div v for='{value,key,index} in object'></div>