1.Vue指令

插值表达式

• 语法：{{ msg }}
• 特点：
  • 只会替换自己本身的占位符
  • 有闪烁问题，可以用 v-cloak 解决，或用 v-text（在网络差情况下，用户在一瞬间可以看到{{msg}}）

v-text

• 语法：v-text="msg"
• 特点：
  • 会覆盖元素中原有的内容
  • 默认没有闪烁问题

v-html

• 语法：v-html="msg"
• 作用：将元素内容解析为 html
• 特点：覆盖元素中的内容

v-cloak

• 语法：直接写在元素标签内
• 作用：解决插值表达式的闪烁问题

v-bind 绑定属性

• 语法：v-bind:title="mytitle
• 简化指令：：
• 可以绑定拼接内容：:title="mytitle + '123'"
• v-bind 中可以写合法的 JS 表达式

v-on 事件绑定机制

• 语法：v-on:click="show"
• 简化指令：@
• 如果引号中只有一行少量代码，可直接写：v-on:click="alert('hello')"
• 可用事件修饰符修饰：@click.stop="btnHandler"

事件修饰符

• .stop：阻止冒泡事件
• .prevent：阻止默认事件
• .capture：捕获触发事件的机制
• .self：只有点击当前元素时候，才会触发事件处理函数
• .once：事件只触发一次

v-model 双向数据绑定

• 语法：v-model="msg"
• 作用：v-bind 只能单向绑定数据，（M-V）
• 注意：v-model 只能用于表单元素

veu 中使用样式（需要 v-bind 做数据绑定）

1. 使用 class 样式

   • 数组：:class="['red', 'thin']"

   • 数组中使用三元表达式：:class="['red', 'thin', isactive?'active':'']"

   • 数组中嵌套对象（代替三元表达式）：

     :class="['red', 'thin', {'active': isactive}]"

   • 直接使用对象：:class="{red:true, italic:true, active:true, thin:true}"

2. 使用内联样式

   • 直接在元素通过 :style 写样式

   <h1 :style="{color: 'red', 'font-size': '40px'}">这
       是一个H1</h1>
   

   • 将样式对象定义到 data 中，引用到 :style 中

   data: {
           h1StyleObj: { color: 'red', 'font-size': '
           40px'},
           h1StyleObj2: { fontStyle: 'italic' }
   }
   

   <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
   

​

v-for 和 key 属性

1. 迭代数组

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：
      {{item.name}} --- 年龄：{{item.age}}</li>
</ul>

2. 迭代对象

<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} 
    --- {{i}}</div>

3. 迭代数字

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

4. key属性

<p v-for="item in list" :key="item.id">
  <input type="checkbox">{{item.id}} --- {{item.name}}
</p>

• 在组件中，使用 v-for 循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
• v-for 循环的时候，key 属性只能使用 number获取string
• key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值

v-if 和 v-show 语法

 <h3 v-if="flag">这是用v-if控制的元素</h3>
 <h3 v-show="flag">这是用v-show控制的元素</h3>

其中 flag 为 data 中的一个对象，存放布尔值（true/false）

作用：值为 true时，元素内容显示，值为 false 时，元素内容不显示

v-if 和 v-show 对比

1. v-if
   • 特点：每次都会重新删除或创建元素，因此切换消耗较高
2. v-show
   • 特点：每次都不会重新进行DOM的删除和创建操作，只是切换了元素的display:none 样式 ，因此初始渲染消耗较高