vue常用指令

vue的常用指令

1、 在HTML里插入值：

• 插入纯文本 ；

• 插入纯HTML: v-html 防止xss 会覆盖之前的内容，能解析标签；

2、表达式
指令：是带有 v- 前缀的

• v-if 显示隐藏

• v-on:click 事件

• v-bind 单项绑定； model里的值改变，页面上的也随着改变；

• v-cloak {{}} 能够解决 插值表达式闪烁的问题； 不会覆盖之前的值，"{{}}"只会替换占位符；

• v-text=“值（属性名）” 没有闪烁的问题； 会覆盖之前的值；

• v-model 双向绑定； 只能用于表单元素中 (无论页面改变还是model改变它都会改变)

• v-for="(item, index) in arr" 可以遍历 数组 数组对象 字符串 第一个都是 元素 第二个都是 索引值；

• v-for="(val, key, index) in obj" 可以遍历 对象 第一个是 属性值 第二个都是 属性名 第三个都是 索引值；

• v-for=“count in number” 可以遍历数字 从1 开始到 number

   v-for="item in obj" :key="item.id"   ，如果在添加数据的时候有索引值，并且每次添加的数据都在第一个，那么就会出现索引值和添加的值冲突，用key的绑定，就能解决这个问题 （当和 复选框一起使用 添加新元素时）。
  

打印结果：

• v-if 特点 每次都会创建或删除元素； 有较高的切换性能消耗；
• v-if v-else 这是一组 它们两个只能执行一个；
• v-show 特点 每次不会重新进行 DOM的删除和创建操作；有较高的初始渲染消耗； 如果元素涉及到频繁的切换，最好不要用 v-if

3、绑定，缩写：

• v-bind:src => :src

• v-on:click => @click

4、 事件修饰符：

• .stop 阻止冒泡;

• .prevent 阻止默认事件；

• .captrue 添加事件侦听器时，使用事件捕获模式； (和冒泡相反，先父后子)

• .self 只当事件在该元素本身(比如不是子元素)触发时触发回调; (点击本身才会触发，其它不会触发)

• .once 事件只触发一次；

   **@click.stop = ""** 
  

  5、 ref属性获取DOM节点

       如： <div ref = "boxName">ref用法</div>
      	 'this.$refs.boxName'  获取DOM节点          
        	  vue 有 $refs 这个属性可以打印出来  看看；
  

1、在HTML里调用属性和方法 {{属性名/方法名}}；如：

<p> {{ 属性名/方法名 }} </p>

自定义键盘码(全局按键修饰符)；

给字符串补内容(插入值);

• padStart(index,‘0’); 第一个参数 是 添加的位置 第二个是添加的内容；

• padeEnd(index,‘0’);

• string.prototype.padStart();