vue基础

vue基础整理，包括：内容渲染指令、属性绑定指令、事件绑定指令、双向数据绑定指令、循环渲染指令、条件渲染指令、过滤器。

vue 基础

• day1
  • 指令
    • 内容渲染指令
      • v-text
        • 缺点：覆盖元素中的默认内容
      • {{ }}
        • 插值只能用在元素的内容节点，无法用在属性节点
      • v-html
        • 用处：把带有 HTML 标签的字符串，渲染为真正的 DOM 元素
    • 属性绑定指令
      • v-bind:
      • 简写 :
    • 事件绑定指令
      • v-on:
      • 简写 @
      • @click="show" 和 @click="show(传参)"
      • 内置的变量 $event
        • @click="show(3, $event)"
      • 事件修饰符
        • .prevent
        • .stop
      • 按键修饰符
        • .esc
        • .enter
    • 双向数据绑定指令
      • v-model
        • 只能用在表单元素上
      • 修饰符
        • .number
        • .trim
        • .lazy
    • 循环渲染指令
      • v-for="(item, index) in 数组"
      • :key="item.id"
      • 拿索引当 key 没有意义
    • 条件渲染指令
      • v-if
        • 动态创建和移除元素
        • v-else-if
        • v-else
      • v-show
        • 动态添加和移除 display: none 样式
    • 过滤器
      • 全局过滤器
        • Vue.filter('名字', function(过滤器前面的值) { return 结果 })
      • 私有过滤器
        • 定义到组件的 filters 节点之下
      • 调用
        • {{ message | dateFormat }}
• day2