Vue基础知识汇总

2020年初的时候突击将Vue学习了一下，因为有不错的HTML、CSS、JS 基础，以及微信小程序的编程知识，Vue学起来是真的快·，三下五除二，将Vue官网的教程文章搞完了，并完成了既定的目标后，就放下了。

没想到的是，这一放就是一年。

做过很多事，最后，还是发现应该写博客，也应该将自己学的记录一下，一方面是方便自己以后查找，另一方面加强记忆，最后的一个好处是，笔记在网上，长时间来看的话会带来不错的流量（这是在太香了，想想·，如果当初从14年就开始写Java及Android学习相关的文章··，现在...... 咳咳，是不会是‘现在’了）

以上纯属胡扯，并且放错了地方！

1、创建一个Vue实例

Vue实例的创建方式是：

var vm = new Vue({
 
   //选项

})

Vue 实例中的 选项 ,在刚一看的时候是不是有点'晕'?

'选项'是什么呢?

 

1\选项:数据

• data: 
  • 类型：Object | Function
  • 限制：组件的定义只接受 function。
  • 详细:
    • Vue 实例的数据对象。对象必须是纯粹的对象 (含有零个或多个的 key/value 对).
    • 实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a
• props
• propsData
• computed:
  • 类型:{ [key: string]: Function | { get: Function, set: Function } }
  • 详细:
    • 计算属性将被混入到Vue实例中.所有getter和setter的this上下文自动地绑定为Vue实例.
    • 如果你为一个计算属性使用箭头函数,则this不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问.
    • 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。
      • 示例

      • var vm = new Vue({
          data: { a: 1 },
          computed: {
            // 仅读取
            aDouble: function () {
              return this.a * 2
            },
            // 读取和设置
            aPlus: {
              get: function () {
                return this.a + 1
              },
              set: function (v) {
                this.a = v - 1
              }
            }
          }
        })
        vm.aPlus   // => 2
        vm.aPlus = 3
        vm.a       // => 2
        vm.aDouble // => 4

• methods
  • 类型：{ [key: string]: Function }　
  • 详细:
    • methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
    • 示例

    • var vm = new Vue({
      data:{
         a:1 
      },
      methods:{
      plus:functhon(){
      this.a++
      }
      }
      })
      
      vm.plus()
      vm.a //2

• watch

2 选项\DOM

• el:
  • 类型：string | Element
  • 限制：只在用 new 创建实例时生效。
  • 详细
    • 提供一个在页面上已经存在的DOM元素作为Vue实例的挂在目标.可以是CSS选择器,也可以是一个HTMLElement实例.
    • 在实例挂在之后,元素可以用vm.$el访问.
    • 如果在实例化时存在这个选项,实例将立即进入编译过程,否则需要显式调用vm.$mount()手动开启编译.
• template
• render
• renderError

3 选项 / 生命周期钩子

　　所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。

• beforeCreate
• created:
  • 类型：Function
  • 详细:
    • 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。　　
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed
• errorCaptured

3 选项 /资源

• directives
• filters
• components

4 选项 / 组合

• parent
• mixins
• extends
• provide / inject

5 选项 /其他

• name
• delimiters
• functional
• model
• inheritAttrs
• comments

 

以上就是'选项'的内容