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
  • 举例:
      
classA, classB
isred
数组对象
size22
styleObjectA, styleObjectB
  • 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
     ....
    
    1. 按键修饰符
      触发像keydown这样的按键事件时,可以使用按键修饰符指定按下特殊的键后才触发事件,可以给和按键相关的事件添加按键修饰符 常用的有 .enter
      在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
     .tab
     .delete  //  (捕获 “删除” 和 “退格” 键)
     .esc
     .space
     .up
     .down
     .left
     .right
    
  • 通过执行函数中添加event参数传递事件对象,注意只能是event,并且不能加引号
  • 事件修饰符可以给事件添加特殊功能 .stop .prevent
控制元素的显示和隐藏
  • v-if : v-if="布尔值" , 通过dom来控制元素显示和隐藏,
    作用:根据表达式的值的真假条件来决定是否渲染元素,如果条件为false不渲染(达到隐藏元素的目的),为true则渲染。在切换时元素及它的数据绑定被销毁并重建.
    

Yes

// 也可以用 v-else 添加一个 “else” 块:

Yes

No

// 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 标签直到实例准备完毕。

你可能感兴趣的:(vue的初识及基本语法、指令)