Vue初始化的选项

来源:简书 分类: 文章浏览史 发布时间:2020-09-07 09:45:25 最后更新:2020-09-07 浏览:89
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-07 09:45:25
const vm = new Vue(options)

生成Vue实例时给构造函数传入的选项叫做Vue的构造选项
这个选项主要分为五大类,这篇先来看它的入门属性:

数据

data

使用data的时候优先使用函数,避免造成两个组件公用data的问题

data(){
  return{
    a: 2333,
    b: "你好(*´▽`)ノノ"
  }
},
  //其它选项

props

外部属性

props:{
  hi:{
    type: String,
    default:"(*´▽`)ノノ"
  }
}

hi这个数据是要从其它地方传过来的
看这个例子

methods

methods里面放事件处理函数和普通函数(methods是可以代替filter的)
每次重新渲染都会执行,谁变他都执行

data(){
  return{
    n: 1,
    array: [1,2,3,4,5,6,7,8,9]
  }
},
methods:{
  addOne(){
    this.n+=1
  }, 
  filter(){
    return this.arry.filter(i => i%2 !== 0)
  }
//用来展示奇数  
}

DOM

el

挂载节点,该节点内容会被替换,也可以用$mounted方法替换

new Vue({
  el:"#app",
//其它的选项
})
//替换id为app的节点

上面的代码相当于:

new Vue({
  //其它的选项
}).$mount("#app")
  1. 生命周期钩子(这里列举的都有before版本)

    • created
      组件出现在内存中
    • mounted
      组件出现在页面中
    • updated
      组件更新了
    • destroyed
      组件在内存中消失
  2. 资源

    • components
      用import引入一个.vue文件
      然后在component中传入组件对象
      像这样
      也可以直接在component中直接写这个组件的构造选项
      像这样
  3. 组合(先不讲)

php技术微信