• 2 HelloVue
  • readme
  • demo1
    @click : 点击事件, 修改绑定的值, 会修改页面的值 (类似观察者)
  • demo2
    v-model : 获得input的值

  • 3 模板语法
  • demo1
    v-html : 直接插入html
  • demo2
    v-model + v-html : 表单输入绑定, 动态修改页面的html
  • demo3
    v-bind : 数据绑定, 数据更新, 页面也会更新
  • demo4
    通过input的type和对应的名字绑定, 动态改变input标签的type属性(前面输入框输入, radio, file,checkbox 等)
  • demo5
    过滤器方法,传入变量, 返回true,false (应该也可以返回其他的东西, 自己返回了一个字符串)
  • demo6
    过滤器 可以传入参数, 获取参数处理后, 返回

  • 4 计算属性
  • demo1
    computed计算属性, 里面可以写方法, 外部调用 (和methods类似, 自己不太清除区别)
  • demo2
    计算属性默认只有getter, 要给方法设置值,可以写setter方法
  • demo3
    v-model一个input, 动态求出和显示input的长度
  • demo4
    v-model一个input, computed的方法,用正则动态计算一些信息
  • demo5
    v-model一个input, watch,用正则动态计算一些信息

  • 5 Class与Style绑定
  • demo1
    动态设置class的css相关style属性
  • demo2
    通过返回值, 动态控制class对应的style属性
  • demo3
    通过动态设置图片url, 实现简单的轮播图切换
  • demo4
    style绑定一个数组, 通过数组去设置属性

  • 6 条件渲染
  • demo1
    暂时没有内容

  • 7 列表渲染
  • demo1
    用v-for="(item, index) in items", for循环设置style
  • demo2
    动态修改数组, 要用 Vue.set() 来设置

  • 8-事件处理器
  • demo1
    只是@input处理, 和前面类似 (readme和demo不一致)