Vue.js 入门提纲

模板语法

---

• 插值
  
  • 文本 { { }} (v-once)
  • html v-html (xss攻击)
  • 属性 v-bind
  • javascipt表达式
• 指令
  
  • v-if v-on v-for v-bind
  • 参数 :参数=值
  • 修饰符 .修饰符
• 过滤器
  
  • mustache 插值和 v-bind 表达式
  • { { value | filterA | filterB(‘arg1’,arg2) }}
  • filters
• 缩写
  
  • v-bind:href (:href)
  • v-on:click (@click)

---

计算属性

---

• 
  
• computed 属性

• computed vs methods

计算属性是基于它们的依赖进行缓存的-计算属性只有在它的相关依赖发生改变时才会重新求值

• computed vs watch

  通常更好的想法是使用 computed 属性而不是命令式的 watch 回调.

• 计算 set

• watch
  

  当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的

• ---

  Class 与 Style 绑定

  ---

  Class 绑定

  • 对象绑定

   <div class="static" 
           v-bind:class="{ active: isActive, 'text-danger':hasError }">
   div>
   <div v-bind:class="classObject">div>

  • 数组绑定

       <div v-bind:class="[activeClass, errorClass]">

  • 组件

      <my-component v-bind:class="{ active: isActive }">my-component>

  ---

  style 绑定

  • 对象绑定

      <div v-bind:style="styleObject">div>

  • 数组语法

        <div v-bind:style="[baseStyles, overridingStyles]">

  • 自动添加前缀
  • 多重值

  ---

  条件渲染

  ---

  • v-if
    
    • template 和 v-if 条件组
    • v-else
    • v-else-if
    • key 管理可复用元素
  • v-show
    
    • 会保留在dom中

  • v-if vs v-show

    v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
    如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

  • 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

  ---

  列表渲染

  ---

   <ul id="example-1">
          <li v-for="item in items">
              {
         { item.message }}
          li>
     ul>

  • 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引

  <ul id="example-2">
          <li v-for="(item, index) in items">
              {
         { parentMessage }} - {
         { index }} - {
         { item.message }}
          li>
      ul>

  • 带v-for 的 标签来渲染多个元素块
  • 对象迭代 v-for

    <div v-for="(value, key, index) in object">
          {
         { index }}. {
         { key }} : {
         { value }}
      div>

  • 整数迭代 v-for
    { { n }}
  • 组件和 v-for

     <my-component
              v-for="(item, index) in items"
              v-bind:item="item"
              v-bind:index="index">
          </my-component>

    
  is="todo-item"
       v-for="(todo, index) in todos"
       v-bind:title="todo"
       v-on:remove="todos.splice(index, 1)"
      >

  • v-for 和 v-if
    
    • key (建议尽可能使用 v-for 来提供 key )
  • 数组更新检测
    
    • 变异方法
      
      • push()
      • pop()
      • shift()
      • unshift()
      • splice()
      • sort()
      • reverse()
    • 重塑数组
      -filter(), concat(), slice()
      -注意事项
      
      • example1.items.splice(newLength)
      • example1.items.splice(indexOfItem, 1, newValue)
    • 显示过滤/排序结果 (以创建返回过滤或排序数组的计算属性)

  ---

  事件处理器

  ---

  • 监听事件 v-on
  • 方法事件处理器
  • 内联处理器方法
  • 事件修饰符
    
    • .stop 阻止单击事件冒泡
    • .prevent 提交事件不再重载页面
    • .capture 添加事件侦听器时使用事件捕获模式
    • .self 只当事件在该元素本身（而不是子元素）触发时触发回调
    • .once 点击事件将只会触发一次
  • 案件修饰符
    
    • .enter
    • .tab
    • .delete (捕获 “删除” 和 “退格” 键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
    • .ctrl
    • .alt
    • .shift
    • .meta
    • Vue.config.keyCodes.f1 = 112

  ---

  表单控件绑定

  ---

  基础用法

  • 文本框
  • 多行文本
  • 复选框
  • 单选按钮
  • 单选列表
  • 多选列表

  绑定value

  • 复选框

   <input
      type="checkbox"
      v-model="toggle"
      v-bind:true-value="a"
      v-bind:false-value="b"
    >

  • 单选按钮
  • 选择列表设置

  修饰符

  • .lazy change事件触发更新
  • .number 转为数字
  • .trim 去掉收尾空格

  v-model 和组件

  ---

  组件

  ---

  使用组件

  • 注册 Vue.component(tagName, options)
  • 局部注册 components属性
  • dom模板解析 （特殊的 is 属性）
  • data必须是函数

  prop

  • 使用prop传值
  • 驼峰命名转为短横线命名
  • 动态prop
  • 字面量和动态语法
  • 单向数据流（局部变量和计算属性）
  • prop验证
    
    • String、Number、Boolean、Function、Object、Array

  自定义事件

  • v-on 绑定自定义事件
    
    • 使用 $on(eventName) 监听事件
    • 使用 $emit(eventName) 触发事件
    • 给组件绑定原生事件
  • .sync 修饰符
  • 非父子间的通信

  使用slot分发内容

  • 编译作用域
  • 单个slot
  • 具名slot
  • 作用域插槽

  动态组件

  • keep-alive 保存在内存中

  杂项

  • 编写可复用组件
    
    • props,events,slots
  • 子组件索引
  • 异步组件
  • 高级异步组件
  • 内联模板 inline-template
  • x-templates
  • 静态组件 v-once缓存