vue2基础知识

vue指令

属性绑定：

v-bind :可以动态的为属性绑定值，加了属性绑定指令后，属性的值可以是动态的，如果不加则就是普通的字符串或值

写法：

v-bind:title = "msg"       v-bind:属性 = "值'

简写形式：

:title = "msg"        :属性 = 值

      v-bind指令        :title指令的参数       str指令的值

事件绑定指令：

v-on  事件类型=事件函数      可以为某个元素绑定事件

事件指令 写法

v-on:click = "num++"           

简写

@click = "num++"

事件参数：

第一种：没有参数，在结构中直接写函数名，在定义事件函数时，默认第一个参数就是事件对象

@click="sayNum"       //默认传入事件对象

第二种：有参数，在结构中写函数加小括号

@click="sayNum(3)"     //传入实参3

第三种：有参数，但还想使用事件对象，在结构中写函数名加小括号，小括号里写对应的参数，然后再加上$event,$event代表的就是事件对象

@click="sayNum($event,3)" //传入事件对象，和参数3

• 事件修饰符：
  • .stop阻止事件冒泡
  • .prevent阻止默认事件的行为
  • .once只响应一次
• 按键修饰符：
  • keydown,keyup
    • .enter回车
    • .up上
    • .down下
    • .space空格
    • .esc取消
    • .del删除
• 系统修饰符：
  • .ctrl
  • .shift
• 鼠标修饰符：
  • .left
  • .right
  • .middle
• 表单:
  • v-model="num"
    • 把num的数据和表单的值绑定在一起。
  • 单行，多行
  • 单选
  • 多选
    • 一个默认值选中为true;未选中为false
    • 多个值，绑定的数组动态添加/移除当前元素的value值
  • 下拉select
  • 表单修饰符：
    • .lazy //change事件触发数据更新
    • .number //强制转换为数字
  • v-mmodel="num"简写
    • ：value="num"
    • @input = "num=$event.target.value"
• vue操作
  • 让指令链接数据与dom
  • 业务操作数据，实现自动更新dom
• computed计算
  • 从现有数据计算出新的数据（只读）
• watch监听
  • 监听数据的变化执行回调函数