Vue的基础语法

1.属性绑定

        v-bind：title="msg" ,简写形式为：title = “msg”

        :class  :id  :disabled

• 数据的双向绑定（表单绑定）
  • v-model：注意只能应用于表单类元素，具有value属性（输入类元素）
• 数据的单项绑定
  • v-bind：数据只能从data流向页面，不能从页面流向data

2.事件

• 事件

  

         特殊的事件参数function(e) e是默认传入的，如果要在标签中渲染出来用$event

• 事件修饰符    

  stop（阻止冒泡;由内到外，不会影响父级元素绑定事件的触发），prevent（阻止事件），once（只执行一次）

• 

 表单修饰符

• .number 强制字符串转化为数字
• v-model="num" 是 :value="num" @input ="num"=$event.target.value"
• .lazy :更新视图触发事件由input变为change事件

  

 computed计算

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

  

• .watch监听

  • 监听数据的变化执行回调函数handler，
    • handler(参数1，参数2){ } 参数1：数据变化后的 参数2：数据变化前的

      

  • 引用数据类型的监听
    • 引用数据监听需要加上deep选项，oval和nval都是最新的值

      

• .class

  • :class="active" 没有加单引号的active是一个变量不是字符串
  • 对象 :class="{'active':flag}"
  • 数组 :class="list"

• style

  • :style="{color:'red',fontSize:'24px'}"
  • css属性的驼峰式写法

3.vue中常用到js中的数组，字符串，和json方法

 

• json 方法
  • JSON.parse(str) :把字符产转化为json对象
  • JSON.stringify(json数据) :把json转化为字符串
• 数组的方法
  • indexOf( ) 查找对应的下表
  • 删除----- shift 前删除 pop 后删除 splice 中间删除
  • 添加-------unshift 前添加 push 后添加 splice 也可以实现添加
  • 翻转 reverse
  • 转字符串 arr.json()
  • 连接数组 concat( )
  • filter 过滤
  • map 映射
  • reduce 累计
  • some 有一个
  • every 每一个
  • find 查找符合条件元素
  • findIndex 查找符合条件的元素下标
  • sort 排序
• 字符串的方法
  • indexOf lastIndexOf 查询字符串下标，找不到返回-1
  • split( 参数)，用某种符号分割字符串
  • slice（start，end）切割字符串
  • subString（start，end）截取字符串 （按下标）
  • subStr( start,len) 截取字符串，（按长度）
• 本地存储
  • localStorage.getItem（key）获取值
  • localStorage.setItem（key，value）存储值
  • localStorage.removeItem(key) 删除存储
  • localStorage.clear（） 清除存储