vue的初识及基本语法、指令

MVVM的基本概念：

• M指的是数据（model），V是视图，VM是视图模型，将数据绑定视图上（双向绑定），viewModel 将数据模型 和视图层连接起来，不会再去操作原生的DOM，只需要关心数据的流向

差值表达式：

使用大括号(Mustache 语法) “{{ }}”是最基本的文本插值方法，它会自动将我们双向绑定的实时数据显示出来，实现数据的双向绑定。

Vue常用系统指令

• v-text : 将一段文本渲染到指定的元素元素中
• v-html : 与差值表达式和 v-text不同，v-html会将数据渲染为html页面
• v-bind : 可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class.
  可以用来绑定元素的属性,(如：title, href , title , 自定义属性，name, class等)，写法： 可以省略v-bind, 直接写为 : 属性名
• 作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和clas
• 举例:

      <div :class="[classA, classB]">classA, classB</div>
      <div v-bind:class="{ red: isRed }">isred</div>
      <div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
      <div v-bind:style="{ fontSize: size + 'px' }">size22</div>
      <img v-bind="{src:imageSrc+'?v=1.0'}" >
      <div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

• v-for： 遍历数组或对象； 用法：

      item in Array   ...... {{ item }}
      (item, index) in Array    ....{{item}}
      value in Object         ..... {{value}}
      (value, key, index) in Object ..............{{index}}.{{key}}.{{value}}

• v-model:

1. 在表单控件或者组件上创建双向绑定
2. v-model仅能在如下元素中使用：

   input
   select
   textarea
   components（Vue中的组件）

• v-on: 绑定事件
  1. 作用：绑定事件监听，表达式可以是一个方法的名字或一个内联语句，
     如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生 DOM 事件。
     用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
     写法：v-on:事件名 , 简写写法： @事件名
  2. 常用事件：

   v-on:keydown
   v-on:keyup
   v-on:mousedown
   v-on:mouseover
   v-on:submit
   ....
  

  3. 按键修饰符
     触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件,可以给和按键相关的事件添加按键修饰符 常用的有 .enter
     在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

   .tab
   .delete  //  (捕获 “删除” 和 “退格” 键)
   .esc
   .space
   .up
   .down
   .left
   .right
  

• 通过执行函数中添加event参数传递事件对象，注意只能是event,并且不能加引号
• 事件修饰符可以给事件添加特殊功能 .stop .prevent

控制元素的显示和隐藏

• v-if ： v-if="布尔值" , 通过dom来控制元素显示和隐藏,
  作用：根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的），为true则渲染。在切换时元素及它的数据绑定被销毁并重建.

    <h1 v-if="isShow">Yes</h1>
   // 也可以用 v-else 添加一个 “else” 块：
    <h1 v-if="isShow">Yes</h1>
    <h1 v-else>No</h1>
   // v-else 元素必须紧跟在 v-if 元素否则它不能被识别。

• v-show ： v-show="布尔值",通过控制样式display:none来控制元素显示和隐藏
• v-if 和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中.
  v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的
• v-cloak : 指令保持在元素上直到关联实例结束编译后自动移除，v-cloak和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。