Vue的单文件、插值语法、指令

Vue的单文件

1. 一个vue文件就是一个组件
2. 组成
   1. template标签=>只有一个跟标签div，用来存放HTML代码
   2. script标签=>用来存放JavaScript代码
   3. style标签=>用来存放样式代码，可以接受css，less，sass，除了css以外的代码都需要做配置才能正常使用

插值表达式

1. 语法：

   {{表达式}}
   

   表达式包括：

   1. 变量-数据声明在data函数的返回对象里
   2. 对象.属性
   3. 三元表达式
   4. 字符串、数字、布尔值
   5. 函数调用-函数需要声明在methods对象里
   6. 变量的加减乘除

2. 作用

   1. 把表达式的结果插入到指定的标签位置

   2. eg：

      <div>秒杀价：{{ price }}</div>
      

vue的指令

1. 概念：指令是标签的属性

   1. vue的指令都以v-开头
   2. 属性名=“属性值”

2. v-bind

   1. 简写语法：:属性名=“表达式”
   2. 作用：绑定标签属性

3. v-on

   1. 简写语法：

      1. @事件名=“少量代码”=>@click = “count++”

      2. @事件名=“函数名”（如果函数没写括号的情况下，第一个参数就是event事件对象）

      3. @事件名=“函数名（参数）”（函数写括号，使用$event获取事件对象）

         @click = "fn(100,$event)"
         

   2. 作用：给标签绑定事件

   3. 修饰符：

      1. 写法：@事件名.修饰符=“…”
      2. .prevent - 阻止默认行为
      3. .stop - 阻止事件冒泡
      4. 常用按键修饰符：
         1. .enter - 回车事件触发
         2. .esc - esc事件触发

4. 条件显示属性

   1. v-show - 通过控制样式display来显示和隐藏

   2. v-if - 通过创建和删除标签来显示和隐藏

      1. 可以多个条件控制

         v-if
         v-else-if
         v-else
         

      2. 多个条件之间，不能插入别的标签

   3. 当要控制的元素比较多时

      1. 需要频繁切换 - 使用v-show
      2. 不需要频繁切换 - 使用v-if