Vue-基础(三)

v-cloak：用于解决插值表达式的”闪动“问题，原理是先隐藏内容，在内存中进行值的替换，替换好值后再显示最终效果；

　　用法：

/*1.提供CSS样式*/
[c-cloak]{
  display:nonel    
}
/*2.在插值表达式所在标签添加指令*/
<div v-cloak>{{msg}}</div>

v-text：填充纯文本，对比插值表达式来说无”闪动“问题

<div v-text="msg"></div>  //msg:Hello Vue  //显示：Hello Vue

v-html：填充HTML片段，但存在安全问题、本网站内部数据可以使用，来自第三方的数据不可以

<div v-html="msg"><div> //msg:<h1>Hello Vue</h1>  //显示：Hello Vue(h1样式)

v-pre：填充原始信息，显示原始信息，跳过编译过程

<div v-pre>{{msg}}</div>  //显示：msg

数据响应式：当数据发生变化时，页面内容也会发生变化；

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

v-once：该数据只编译一次，即显示内容之后不再具有响应式功能；

　　　　使用环境：用于不需要再做修改的信息，这样可以提高性能

<div v-once>{{msg}}</div>  //msg:Hello  //显示：Hello 
//修改msg值为Vue，显示依旧为Hello

双向数据绑定：让其数据层和视图层的数据同步，视图层数据能够进行实时更新；

v-model：可以实现双向数据绑定

<div >{{msg}}</div>
<input type="text" v-model="msg">

MVVM设计思想：Model-View-ViewModel，由MVC模式衍生而来，到View视图层变化时，会自动更新到ViewModel(视图模式)。View和ViewModel之间通过双向绑定(data-binding)建立联系。

• M(model)
• V(view)
• VM(view-model)

v-on：可用于处理事件绑定，可用@来表示简写

<input type="button" v-on:click="num++" />
<!--简写形式-->
<input type="button" @click="num++" />

<!--直接绑定行数名称-->
<input type="button" @click="say">
<!--调用函数-->
<iniput type="button" @click="say()">

<!--事件函数参数传递-->
<input type="button" @click="say("msg,$event")">

其中事件绑定函数调用，则事件对象须作为最后一个参数；事件直接绑定函数名称，则默认会传递事件对象作为事件函数的第一个参数；事件对象必须为$event

事件修饰符：事件修饰符可以串联，并且有先后顺序；可查询文档查看更多修饰符

<!--.stop 阻止冒泡-->
<a @click.stop="handle">跳转</a>
<!--.prevent 阻止默认行为-->
<a @click.prevent="handle">跳转</a>

 按键修饰符：可以给按键添加执行事件函数，可查询文档查看更多修饰符 

<!--.enter 回车键-->
<input @keyup.enter="submit">
<!--.delete 删除键-->
<input @keyup.delete="handle">

/*自定义按键修饰符*/
//使用全局config.keyCodes对象，Vue.config.keyCodes.名=按键编号
Vue.config.keyCodes.f1 = 112

v-bind：通过v-bind绑定数据，从而实现动态处理属性，缩写可用：表示；

<a v-bind:href="url">跳转</a> //url值可在vue实例中设置
<!--缩写-->
<a :href="url">跳转</a>

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

<input :value="msg" @input="msg=$event.targt.value">

样式绑定：

• class样式处理：

<!--对象语法-->
<div :class="{active:isActive,error:isError}"></div>
<!--数组语法：类名需要添加到实例data中-->
<div :class="[activeClass,errorClass]"></div>
//对象绑定和数组绑定可以结合使用："[activeClass,errorClass,{test:isTest}]"
//class绑定的值可以简化操作：可将数组或对象集合放在data中，后将data的数据和标签的数据关联
//data中：数组：arrClass:['active','error']    对象：objClass={active:true,error:true}
//当有默认class时，默认class不会被覆盖

• style样式处理

<!--对象语法：将值添加到实例data中-->
<div :style="{color:activeColor,fontSize:fontSize}"></div>
<!--数组语法：将样式集合添加到实例data中-->
<div :style="[baseStyles,overridingStyles]"></div>

分支循环结构：v-if、v-else、v-else-if、v-show，可进行简单的判断(包括三元表达式)

v-if：根据表达式中的值的真假来插入/移除元素

v-else：使用该指令来表示v-if的else块，须写在v-if块或v-else-if块后面，否则无法识别

v-else-if：使用该指令来表示else-if块，须写在v-if块或v-else-if块后面，否则无法识别

v-show：根据表达式的真假值，切换元素的display CSS操作

<div v-if="score>=90">a</div>
<div v-else-if="score<90&&score>=80">b</div>
<div v-else-if="score<80&&score>60">c</div>
<div v-else>d</div>

<div v-show="flag">0<div>
<iniput type="button" @click="handle">
//handle:function(){
    this.flag=!this.flag;
}

v-show与v-if的区别：v-if控制元素是否渲染到页面，而v-show控制元素是否显示(已经渲染到页面)

循环结构：

v-for：

<!--遍历数组-->
<!--in：关键字、item：值、index：索引(从0开始)、list：数组-->
<li v-for="item in list">{{item}}</li>
<li v-for="(item,index) in list">{{item+ '----' +index}}</li>
<!--key可以帮助Vue区分不同的元素，从而提高性能-->
<li :key="item.id" v-for="(item,index) in list">{{item+ '----' +index}}</li>

<!--遍历对象-->
<!--in：关键字、value：对象的值、key：键、index：索引、Obj：对象-->
<div v-for="(value,key,index) in Obj"></div>
<!--v-if和v-for结合使用-->
<div v-if="value==12" v-for="(value,key,index) in Obj"></div>

v-slot：提供具名插槽或需要接收prop的插槽(在插槽的笔记中再写)