Vue基础入门2

目录

七、事件

7.1、事件的参数

7.2、事件修饰符

.stop

.prevent

.once

7.3、按键修饰符

keydown

keyup

7.4、系统修饰符

.ctrl

.alt

.shift

.meta

7.5、鼠标修饰符

.left

.right

.middle

八、表单

8.1、表单修饰符

.lazy

.number

九、computed 计算

十、watch 监听

十一、class 类的绑定

十二、style 样式

---

前面的在上一篇http://t.csdn.cn/WLjhf

七、事件

v-on:click="num++"
事件绑定

@click="num++"
事件绑定简写

7.1、事件的参数

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

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

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

7.2、事件修饰符

.stop

阻止事件冒泡

.prevent

阻止默认事件

.once

只响应一次

7.3、按键修饰符

keydown

键盘按下

keyup

键盘松开

常用：

.enter 回车  .esc 取消  .delete 删除  .space 空格

7.4、系统修饰符

.ctrl

.alt

.shift

.meta

7.5、鼠标修饰符

.left

.right

.middle

八、表单

v-model=”num“
把num的数据和表单的值绑定在一起

<input v-model="msg">
// 表单绑定

 v-model=“mum”简写

<input :value="num">

<input @input="num=$event.target.value"
>

8.1、表单修饰符

.lazy

change事件触发数据更新

.number

强制转换为数字

九、computed 计算

从现有数据计算出新的数据（只读）

computed:{ 
    "total":function(){
     return xxx
    }
​}

十、watch 监听

监听数据的变化执行回调函数

watch:{
    "obj":{
    handler(nval){
        //执行回调函数
    },
    deep:true
    }
}

十一、class 类的绑定

文本  <div :class = "active"></div>
没有加单引号的active是一个变量不是字符串

对象  <div :class = {'active':flag}></div>

数组  <div :class = "list"></div>

十二、style 样式

<div :style = "{color:'red',fontSize:'24px'}"></div>

css属性驼峰式写法