vue指令

1、插值表达式

 <h1> {{ 表达式 }} </h1>

变量要在data里声明

2、v-bind 动态属性赋值

语法： v-bind：属性名 = " vue变量 "

简写： ：属性名 = " vue变量 "

3、v-on            

        1. 给标签绑定事件   

语法： v-on：事件名 = " 要执行的代码 "

            v-on：事件名 = " methods 中的函数 "

            v-on：事件名 = " methods 中的函数（实参） " 

简写：@事件名 = " methods 中的函数 "  

        2. v-on 事件对象

语法： 无传参，就通过形参直接接收

            有传参，就通过 $event 指代事件对象传给 methods 里的事件处理函数

        3. v-on 修饰符

语法： @事件名.修饰符 = " methods 中的函数 "

修饰符：  .stop - 阻止事件冒泡

                .prevent - 阻止默认行为

                .once - 程序运行期间, 只触发一次事件处理函数

        4. 按键修饰符

语法： @keyup.enter - 监测回车按键

            @keyup.esc - 监测返回按键

 

 

 

4、 v-model  （数据和视图双向绑定，暂时只能用于表单标签）

        1. 用于表单标签

语法：v-model = " vue数据变量 " 

        文本框：v-model 绑定 value

                 

        密码框：v-model 绑定 value

                 

        下拉菜单： v-model 要绑定在 select 上

                

        复选框：

                变量为数组，则绑定的是 value 属性里的值 ---------- 常用于：收集勾选了那些值

                变量为非数组，则绑定的是 checked 的属性（true / false）------- 常用于：单个绑定使用

                 

         单选框：v-model 绑定 value

                 

         文本域：v-model 绑定 value

                 

        都要在 data 里声明

                

 

        2.  v-model 修饰符

语法： v-model.修饰符 = " vue数据变量 "

修饰符：  .number 以 parseFloat 转成数字类型

                .trim 去除首尾空白字符

                .lazy 在 change 时触发而非 input 时

        

 

5、 v-text 和 v-html

语法： v-text = " vue数据变量 "  -------------  把值当成普通字符串显示

            v-html = " vue数据变量 " -------------  把值当做html解析

6、 v-show 和 v-if

语法： v-show = " vue变量 "  -------------  display:none隐藏 (频繁切换使用)

            v-if = " vue变量 " --------------  直接从DOM树上移除

            v-else ---------- 必须与 v-if 配合使用，当v-if 的值是 false 时，就会显示 v-else 的内容

7、 v-for 循环

语法： v-for = "（值，索引）in 目标结构 "  -----------  想要谁循环，v-for 就写在谁身上

                可遍历数组、对象、数字、字符串

        ​​​​​​​