初学者入门Vue第2篇

属性绑定指令

        v-bind:title="msg"

        :title="msg" 属性绑定简写形式

        :class :id :disabled

事件

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

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

事件的参数

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

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

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

事件的修饰符

        .stop 阻止事件冒泡

        .prevent阻止默认事件

        .once 只向应一次

按键修饰符（keydown，keyup）

        enetr：回车

        up：上

        down：下

        space：空格

        esc：取消

        del：删除

系统修饰符

        .ctrl

        .shift

鼠标修饰符

        .middle

        .left

        .right

表单

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

        单行，多行

        多选 ：1个默认值  选中为true  未选择为false  多个值，绑定的数组动态添加/移除当前元素的value值

        单选

        下拉select

        表单修饰符：.lazy change 事件触发数据更新    .number 强制转换为数字

        v-model="num" 简写  :value="num"   @input="num="$event.target.value"

vue操作：让指令链接数据与dom   业务操作数据，实现自动更新dom

computed计算

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

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

class 

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

        对象 :class="{'active':flag}"

        数组 :class="list"

style

        :style="{color:'red',fontSize:'24px'}"

        css属性驼峰式写法

回顾

        数组 ：indexOf（）查找对应下标

        删除：shift 前删除

                   pop 后删除

                   splice 中间删除

        添加

                 unshift 前加

                 push 后加

                 splice 也可以添加

        翻转 reverse

        转字符串 join（）

        连接数组 concat（）

        高阶

                 filter过滤

                 forEach遍历

                 map映射

                 reduce累计

                 some有一个

                 every每一个

                 find查找符合条件元素

                 findIndex查找符合条件的元素下标

                 sort排序

字符串

        indexOf

        lastIndexOf 查询字符串下标，找不到返回-1

        split（""）分割为数组

        slice （start，end）切割字符串

        subString（start，end）截取字符串（按下标end）

        subStr（start，len）截取字符串（按长度len）

JSON

        eval（）字符串当js执行

        JSON.parse(str) json字符串转换为js对象

        JSON.stringify(obj)把js对象转换为json字符串

本地存储localStorage

        getItem（key）获取值

        setItem（key，value）存储值

        removeltem（key）删除存储

        clear（）清空