vue常用指令

一，vue指令

作用：当表达式的值改变时，相应的将某些行为应用到dom

常用指令

• 1.v-once
  • 特点：只执行一次，只生效一次
  • 作用：当数据改变时，插值位置的数据不会更新

• 2.v-show
  • 作用：显式或隐藏指定元素
  • v-show有两个值：
    • true：显式元素 控制css样式的display:block;
    • false：隐藏元素 控制css样式的display:none;
  • 值有两种格式：布尔值类型和表达式类型
• 3.v-if
  • 作用：条件渲染
  • 值：可以是布尔类型也可以是表达式
  • 特点：可以单独使用也可以跟 v-else v-else-if搭配使用
• 4.v-else
  • 作用：当v-if的值为false时执行v-else的操作
• 5.v-else-if
  • 作用：如果上一级v-if判断条件为false 则执行此操作 如果此条件为false 则继续向下执行 如果为true则执行完此处代码终止执行
• 6.v-for
  • 作用：列表渲染—循环
  • 语法格式：
    • 一个值：v-for = " item in 对象/数组 "
    • 两个值：v-for = "( item , index ) in 对象/数组 "
    • ps： item代表—值 index代表—下标
• 7.v-html
  • 作用：可以解析html元素设置文本 (类似于js中的innerHTML)
• 8.v-text
  • 作用：任何数据都解析为普通文本 (类似于js中的innerText）
• 9.v-bind
  • 作用：强制绑定属性
  • 语法格式：
    • v-bind:属性名 = “data中的属性名”
    • 简写：:属性名 = “data中的属性名”
  • 常用于脚手架中 父组件向子组件传递数据
• 10.v-on
  • 作用：事件监听
  • 语法格式：
    • v-on:事件名=“事件处理函数”
    • 简写：@事件名=“事件处理函数”
• 11.v-model
  • 作用：双向绑定 数据变视图变，视图变数据变
  • 常用于用来获取输入到input框的值

双向绑定的原理

Vue 数据双向绑定是通过数据劫持和观察者模式来实现的， 
	数据劫持，object.defineproperty 它的目的是：当给属性赋值的时候， 程序可以感知到，就可以控制改变属性值 
	观察者模式 当属性发生改变的时候，使用该数据的地方也发生改变

v-if 与 v-show的区别

 v-if是重新渲染 v-show是通过css样式中的display属性控制元素的显示与隐藏
 v-if 不适合重复多次显示或者隐藏数据的操作，因为每一次显示或者隐藏都需要重新执行渲染操作
 v-show 适用于频繁切换显示或者隐藏数据的操作，可以减少渲染数据带来的开销 

v-html，v-text以及{{}}的区别

相同
	v-html v-text {{}} 都是用来设置文本  将数据展示到视图中 
不同点
	v-html 与 v-text {{}}
		  v-html可以解析html元素设置文本
		  v-text {{}} 任何数据都是普通文本
	v-text 与 {{}}
		 v-text 没有闪烁问题 
		 插值存在闪烁问题
		  如何解决插值闪烁问题 后面说明：
		  	方式1：使用v-text 不使用{{}}
		  	方式2：v-cloak 设置style [v-cloak]{display:none}

以上是本节内容想了解更多可点以下链接查看
https://blog.csdn.net/m0_60970928?spm=1011.2415.3001.5343