Solo  当前访客:0 开始使用

Jimmy Luo的个人博客

记录精彩的程序人生

Vue知识地图

2020-06-04 18:55:26 LuoJimmy
0  评论    1  浏览

Vue

  1. 声明式渲染

    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    
  2. 指令

    • 单向数据绑定:v-bind:title或{{}},(title为元素特性),v-bind的缩写::

    • 条件:v-if、v-else、v-else-if

    • 循环:v-for

    • 事件:v-on:click 缩写:@

    • 双向数据绑定:v-model

    • 插槽:v-slot 缩写:#

    • v-html

      更多指令

  3. 组件,模板语言

    Vue.component('todo-item', {
      // todo-item 组件现在接受一个
      // "prop",类似于一个自定义特性。
      // 这个 prop 名为 todo。
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })
    
    <div id="app-7">
      <ol>
        <!--
          现在我们为每个 todo-item 提供 todo 对象
          todo 对象是变量,即其内容可以是动态的。
          我们也需要为每个组件提供一个“key”,稍后再
          作详细解释。
        -->
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>
    
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
      }
    })
    
  4. Vue实例属性与方法

    1. 属性
    2. 方法
  5. 生命周期

    vue生命周期

  6. 事件修饰符**

    // 触发event.preventDefault()
    <form v-on:submit.prevent="onSubmit">...</form>
    

    .stop .prevent .capture .self .once .passive

  7. 计算属性与监听器

    • 计算属性:是基于它们的响应式依赖进行缓存的

      var vm = new Vue({
        el: '#example',
        data: {
          message: 'Hello'
        },
        computed: {
          // 计算属性的 getter
          reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
          }
        }
      })
      
    • 监听器,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

  8. 按键修饰符

    直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

    vue为了兼容,定义了常见的按键码别名:

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  9. 系统修饰键

    • .ctrl
    • .alt
    • .shift
    • .meta
  10. 组件

    一个组件的 data 选项必须是一个函数,每个实例可以维护一份被返回对象的独立的拷贝。

    • 在组件上使用v-model

      Vue.component('custom-input', {
        props: ['value'],
        template: `
          <input
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
          >
        `
      })
      
      <custom-input v-model="searchText"></custom-input>
      
    • 通过插槽分发内容:

      <alert-box>
        Something bad happened.
      </alert-box>
      
      Vue.component('alert-box', {
        template: `
          <div class="demo-alert-box">
            <strong>Error!</strong>
            <slot></slot>
          </div>
        `
      })
      
    • 动态组件:

    <!-- 组件会在 `currentTabComponent` 改变时改变 -->
    <component v-bind:is="currentTabComponent"></component>
    
  11. Prop

    • 大小写
    • prop类型
    • 非Prop的特性
      • 替换/合并已有的特性

      • 禁用特性继承,可以手动决定这些特性会被赋予哪个元素

        Vue.component('base-input', {
          inheritAttrs: false,
          props: ['label', 'value'],
          template: `
            <label>
              {{ label }}
              <input
                v-bind="$attrs"
                v-bind:value="value"
                v-on:input="$emit('input', $event.target.value)"
              >
            </label>
          `
        })
        
        <base-input
          v-model="username"
          required
          placeholder="Enter your username"
        ></base-input>
        
  12. 自定义事件

    • 自定义组件的v-model

      Vue.component('base-checkbox', {
        // 修改默认的value为prop,input为event
        model: {
          prop: 'checked',
          event: 'change'
        },
        props: {
          checked: Boolean
        },
        template: `
          <input
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('change', $event.target.checked)"
          >
        `
      })
      
      <base-checkbox v-model="lovingVue"></base-checkbox>
      
    • 将原生事件绑定到组件

    Vue.component('base-input', {
      inheritAttrs: false,
      props: ['label', 'value'],
      computed: {
        inputListeners: function () {
          var vm = this
          // `Object.assign` 将所有的对象合并为一个新对象
          return Object.assign({},
            // 我们从父级添加所有的监听器
            this.$listeners,
            // 然后我们添加自定义监听器,
            // 或覆写一些监听器的行为
            {
              // 这里确保组件配合 `v-model` 的工作
              input: function (event) {
                vm.$emit('input', event.target.value)
              }
            }
          )
        }
      },
      template: `
        <label>
          {{ label }}
          <input
            v-bind="$attrs"
            v-bind:value="value"
            v-on="inputListeners"
          >
        </label>
      `
    })
    

    现在 <base-input> 组件是一个完全透明的包裹器了,也就是说它可以完全像一个普通的 input 元素一样使用了:所有跟它相同的特性和监听器的都可以工作。




Open Source, Open Mind,
Open Sight, Open Future!

目录

TOP