vue-2 指令：

指令

什么是html属性：就是用来扩展html标签的功能，属性是写在html的开发标签中：属性=“属性值”，

指令就是用来扩展在vue中标签的功能

{ {}} ：模板语法，文本插值

不可解析html标签

{ { 可以写变量，常量，表达式}} ：undefined和null写了不会渲染到页面

就是把表达式（通过计算返回结果的公式）放到页面中进行展示

v-cloak :解决刷新页面时出现{ { }}，一般写在根组件上，id="app"上，必须手动添加css代码

    - 使得 {
   
   {}} 刷新不让用户看见
    - 直到编译完成前，`<div>` 将不可见
    - 必须手工添加css代码
    - 适用于多个元素
    
    <div id="app" v-cloak>{
   
   {msg}}</div>
 
    <script>
         new Vue({
                el: '#app',
                data: {
                    msg: '欢迎Vue!'
                }
            })
    </script>

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

v-text：文本指令

不可解析html标签
<元素 v-text='变量，常量，表达式'></元素>
vue3警告，会覆盖掉标签中的内容

v-html：解析HTML标签或特殊符号

可以解析html标签
<元素 v-html='变量，常量，表达式'></元素>
vue2会覆盖掉标签中的内容
vue3警告，会覆盖

v-model.trim：去除首位空格

这样，用户在输入框中输入的值会自动去除首尾空格，并与 Vue 实例中的 message 数据进行双向绑定。

<input v-model.trim="message">

template标签：

<template v-if="age>18"> 成年人的世界，你懂得~ </template>

v-once：元素内容首次加载时动态显示

<元素 v-once>{ {...}}</元素>

v-pre：不想编译内容：{ {}}

<元素 v-pre>xxx{ {xxx}}xx</元素>

v-bind ：绑定数据和元素属性

v-bind: 属性名=""
简写带冒号：属性名=""

    <div id="app">
        <!-- 基本绑定样式 -->
        <p class="active">白日依山尽</p>
        <p :class="'active'">白日依山尽</p>
        <p :class="x">白日依山尽</p>
        <p :class="flag?x:''">白日依山尽</p>
        <!-- 对象的方式 -->
        <p :class="{active:false,border:true}">黄河入海流</p>
        <!-- 数组的方式 -->
        <p :class="['active','border']">欲穷千里目</p>
        <!-- style绑定 -->
        <p :style="{backgroundColor:'red',fontSize:'28px'}">更上一层楼</p>
        <p :style="{backgroundColor:z}">更上一层楼</p>
    </div>

v-show 标签显示和隐藏

v-show原理：css方式通过控制display: none/block来控制标签的显示和隐藏：适用于频繁切换

v-if、v-else-if、v-else 标签的创建和删除

v-if的原理：通过创建和销毁dom节点来控制元素显示和隐藏。 true 添加 false 移除：耗性能

：使用的使用js中创建(document.createElement())和删除(ele.remove() )

<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
...
<元素n v-else>

紧挨着写，不能插入其他元素

v-if和v-show区别

v-show 作用：css方式通过控制display: none/block来控制标签的显示和隐藏：适用于频繁切换

v-if的原理：通过元素的创建和销毁来控制元素显示和隐藏。 true 添加 false 移除：耗性能

性能：

v-if切换一次就耗费一次性能
v-show，只是初始显示时耗费一次性能

安全性(权限控制会体现)：v-if要高于v-show

支持写在template标签上

v-if支持
v-show不支持

v-for

for in 遍历数组获得的是（值，下标），遍历对象获得的是（键值，健名，下标）
语法 v-for="(遍历的值,遍历的下标) in 你要便利的数据"
- // 语法一：遍历数字： // v-for = "item in 数字" :key='唯一的, 有id用id，没有id使用index'
- // 语法二：遍历数组 // v-for = "(item,index) in data中的数组" :key='唯一的, 有id用id，没有id使用index'
- // 语法三：遍历对象 // v-for = "(value,key,index)in data中的对象" :key='唯一的, 有id用id，没有id使用index'。value是键值，key是键名，index索引
- 带key, 提高for循环的效率

v-if和v-for的优先级

vue2中：v-for的优先级高于v-if

vue3中：v-if的优先级更高v-for

注意：v-if和v-for尽量不要写在一个标签上

v-on：绑定事件监听器

/* 
   绑定事件的语法：
      v-on:事件名= "少量的js代码(要求代码是赋值语法)"
      v-on:事件名= "函数名"
      v-on:事件名= "函数名(参数)"
    简写：
       @事件名 =  "少量的js代码(要求代码是赋值语法)"
       @事件名 =  "函数名"
       @事件名 =  "函数名(参数)"

    事件对象如何获取：
       如何阻止事件的默认行为 e.preventDefault()
       1. 调用时不传参数时，默认就在第一个形参位置就是事件对象
       2. 调用时传递参数时，需要手动的 把事件对象$event 放在最后一个参数位置

    事件修饰符：
       @事件名.prevent = '事件处理函数'
       @事件名.stop = '事件处理函数'
       @事件名.prevent.stop = '事件处理函数'

       特殊的事件如keyup 事件
    按键修改符：
       @keyup.enter = '事件处理函数'   抬起时并按下了回车键，就会指向事件处理函数
        .enter
        .delete (捕获“Delete”和“Backspace”两个按键)
        .space (空格键)
        .up   （上箭头）
        .down  （下箭头）
        .left   （左箭头）
        .right   （右箭头）

       配合功能键：
          .ctrl 键
          .alt 键
          .shift 键
          .meta 键

       需求： 按下enter键的同时按下ctrl键
          @keyup.ctrl.enter = ''
*/

v-model 在表单元素中进行双向绑定：唯一一个双向绑定

文本类型的 <input> 和 <textarea> 元素会绑定 value默认值

<input type="text" v-model.number="text">

默认情况下只要给输入框绑定了v-model 那么修改内容的时候边修改内容会跟这变

但是有些时候我们想修改完成内容再变当change事件的时候才会修改内容

<input type="checkbox"  v-model="checked" />

{
   
   {checked}}   //true或者false根据复选状态

data变量的类型分两大类（input中）
data变量的值的类型是数组， v-model关联的值是以数组形式包含所有选中的value的值
data变量的值的类型是非数组， v-model关联的值是布尔类型的值（true，false）（使用频率高）

<select v-model='data中变量'>
      v-model关联的是选中的选项

在普通表单元素上用v-model 实现对表单元素的双向绑定

在自定义组件上用v-model 实现对子组件内容的双向绑定

指令