Vue基本指令

1.v-cloak

解决插值表达式闪烁问题

<style>
    [v-cloak] {
      display: none;
    }
</style>

v-text，v-html和{{}}的区别：
{{}}渲染界面会有闪烁问题，但是v-text，v-html不存在

2 v-text

1.v-text指令的作用：设置标签的内容

2.默认写法会替换全部内容，使用**插值表达式{{}}**可以替换指定内容

3.内部支持写表达式（字符串拼接）

3 v-html

1.v-html指令的作用是：设置元素的innerHTML

2.内容中有html解构会被解析为标签

3.v-text指令无论内容是什么，只会解析为文本

4.解析文本使用v-text，需要解析html解构使用v-html

4 v-bind

1.v-bind指令的作用：为元素绑定属性

2.写法：v-bind:属性名=‘表达式’
简写：:属性名=‘表达式’

v-bind:class='表达式'
:class='表达式'

5 v-on

1.v-on指令的作用是：为元素绑定事件

2.事件名不需要写on

3.指令可以简写**@**

<!-- 全写 -->
<input type='button' v-on:click='method'>
<!-- 简写 -->
<input type='button' @click='method'>

4.绑定的方法定义在methods属性中

5.方法通过this关键字可以访问定义在data中的数据

事件修饰符：https://cn.vuejs.org/v2/api/#v-on

1.事件绑定的方法写成函数调用的形式，可以传入自定义参数

2.定义方法时需要定义形参来接收传入的实参

3.事件的后面跟上**.修饰符**可以对事件进行限制

4..enter可以限制触发的按钮为回车

常用指令

1 .stop 阻止事件冒泡

2 .prevent 阻止默认事件

3 .capture 添加事件监听器时使用事件捕获模式

4 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调函数

5 .once 事件只触发一次

stop和self的区别：stop阻止所有冒泡行为，self只阻止自己向父级的冒泡

原生事件执行参数：window.event
触发的当前目标元素：event.target，event.srcElement，event.toElement
当前事件执行函数没有参数传递时默认的第一个参数就是event
传参传入$event就是event

6 v-model

获取和设置msg元素的值（双向数据绑定）

1.v-model指令作用：便捷的设置和获取表单元素的值

2.绑定的数据会和表单元素值相关联

3.绑定数据**——**表单元素的值

原理：

我们实例化的vue对象app在浏览器中

通过对app.msg的修改可以实现对页面渲染内容的修改

v-model就是这样的原理进行双向绑定

7 v-for

根据数据生成列表结构

1.v-for指令的作用：根据数据生成列表结构

2.数组经常和v-for结合使用

3.语法是**（item，index）in 数据**

<li v-for='itme in arr'></li>
<li v-for='(itme,index) in arr'></li>

4.item和index可以结合其他指令一起使用

5.数组长度的更新会同步到页面上，是响应式的

<!-- 1.遍历元素item -->
<li v-for='item in arr'>
        {{item}}
</li>
<!-- 2.遍历元素item和索引index -->
<li v-for='(item,index) in arr'>
        {{item}}{{index}}
</li>
<!-- 3.从一开始遍历 -->
<li v-for='i in 10'>
        {{i}}
</li>

v-for常会遇到一个问题

我们没有添加数据前,选中三号数据

用unshift在数据前加入新的数据，就会出现下图情况，页面只会记录选择的元素的索引

这时候我们应该用

:key='item'

来进行属性绑定，确保选择后添加依旧正常

8 v-show

根据表达式的真假，切换元素的显示和隐藏（true显示，false隐藏）

1.v-show指令的作用是：根据Boolean切换元素的显示状态

2.原理是修改元素的display，实现显示隐藏

3.指令后面的内容，最终都会解析为布尔值

4.值为true元素显示，值为false元素隐藏

5.数据改变之后，对应元素的显示状态会同步更新

9 v-if

根据表达式的真假，切换元素的显示和样式（操作dom元素）

1.v-if指定的作用：根据表达式的真假切换元素的显示状态

2.本质是通过操纵dom元素来切换显示状态

3.原理是操作dom树

4.v-show消耗小，v-if消耗大

10 v-slot

具名插槽使用

//子组件
<template>
  <div id='slot2'>
    插槽2
    <!-- 绑定name属性 -->
    <slot name='comp1'>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'slot2',
}
</script>

<style>
</style>

//父组件 
<template>
  <div id='app'>
    <h1>插槽使用</h1>
    <slot2>
      <!-- v-slot:comp1(缩写#comp1) -->
      <template #comp1>
        <h3>这里是具名插槽</h3>
      </template>
    </slot2>
  </div>
</template>

<script>
import slot2 from './components/comp4/slot2'
export default {
  name: 'App',
  components: {
    slot2,
  },
}
</script>

<style>
</style>