Vue基础2

接上

Vue的属性绑定

        v-bind：title=‘msg’          简写形式：：title=‘msg’        常用的有  ：class 、：id、：disabled

Vue的事件

        事件的绑定

                        v-on:click='num++'    事件指令

                        @click=‘num++’   简写形式

        事件的参数

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

                        @click=‘sayNum(3)’   传入参数3

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

        事件修饰符

                .stop   组织冒泡行为

                .prevent   组织默认行为

                .once   只进行一次

        按键修饰符（keydown、keyup）

                常用键：.enter回车   .up上   .down下        .space空格        .esc ESC        .del删除

        系统修饰符（.ctrl   .shift）

        鼠标修饰符（.left   .right   .middle）

表单

        v-model=‘num’     把num数据和表单的值绑定在一起  ，与下列式实现相同效果

        ：value=‘num ’  @input=‘num=$event.target.value’

        表单修饰符

                .lazy     change事件触发数据更新

                .number    强制转换数字

Vue的操作

        让指令连接数据与dom

        业务操作数据，实现自动更新dom

computer计算操作

        定义：从现有数据计算出新的数据（只读状态）

                格式如下：computer：{ ‘total’：function（）{ return xxx ​} ​}

watch   监听

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

                格式如下：watch:{ 'obj':{ handler(navl){ 执行回调函数 ​}， deep：true ​} ​}

类的绑定

        共有三种方式操作：

                1.文本         ：class=‘active’     没加单引号的active是一个变量不是字符串

                2.对象         ：class=“{‘active’：flag}”

                3.数组         ：class=‘list’

属性的绑定

        ：style=“{color：‘red’，fontSize：‘24px’}”   css属性使用驼峰式写法