美文网首页
VUE 爬坑笔记 (3)

VUE 爬坑笔记 (3)

作者: 阿尔方斯 | 来源:发表于2018-08-12 19:49 被阅读0次

VUE组件

模块化 和 组件化 区别

  • 模块化:从代码角度分析问题,把可复用的代码抽离为单独的模块
  • 好处:方便程序员之间模块调用,提高了代码的复用率
  • 组件化:从页面UI的角度分析问题
  • 好处:方便UI的重用

组件创建的三种方式

  1. Vue.extend() 返回一个组件的构造器,包含一个对象类型参数,用来配置,Vue.component() 利用Vue.extend()返回的构造器创建一个组件的实例。参数1:组件的名字,参数2:另一个组件的构造器
  2. 直接使用 Vue.component()创建,第一种方式的简写
  3. 通过指定模板创建
  • 注意点:模板内只能有一个根节点,模板名如果用驼峰命名法,使用时应该使用连字符连接

组件中使用指令和事件

  • 在组件中使用数据
    • 写在Vue.extend()构造器配置里面,它必须用一个函数,返回一个对象,主要原因是在多处使用模板时,改变数据时其他位置引用的话数据也会改变

创建子组件

  • 使用 components对象,写在与template同级的位置,内部与创建新组件方法一致

父组件传值给 子组件

  • 在配置子组件中声明props,用来接收父组件传递过来的值,props可以跟一个数组,里面的值是一个个的字符串,可以当属性使用
  • 在使用子组件使用时v-bind指令给子组件的props里的属性传值
  • 实验证明,子组件只能使用字符串拼接的方式,还没找到指定模板创建传值给父组件的方式
  • 属性绑定只能父向子传递普通数据,传递方法的引用必须使用v-on的事件绑定机制

子组件传值给父组件

  1. 在子组件内部使用$emit('eventName', params)自定义事件
  2. 在模板内部调用事件,触发父组件定义的函数
  3. 在父组件内定义函数,定义一个形参接收子组件传输的值

VUE生命周期函数

  • 创建阶段
    • beforeCreate() 创建阶段的第一个生命周期函数,在创建实例之前,并没有什么卵用
    • created()创建阶段的第二个步骤,此时正在初始化data中的数据和methods的方法,这个函数执行完后data和methods都可以使用了,经常在这个函数中使用发送ajax请求
    • beforeMount()创建阶段的第三个步骤,此时内存中已经有编译好的模板字符串了,但是还没有渲染到浏览器,这是浏览器的内容并不是真实的页面
    • mounted()创建阶段的最后一个生命周期函数,表示页面首次被渲染出来。如果项目中需要初始化某些JS插件,需要在mounted中进行初始化,当这个函数运行完后创建阶段已经结束,进入运行阶段中
  • 运行中阶段
    • 运行中的函数会根据data数据的变化有选择性的执行0次或多次,运行中这些操作本指向就是问了保证 model 中数据和 View视图层渲染的数据保持一致
    • beforeUpdate()数据更新之前,此时数据已经是更新过的,页面还是旧数据
    • updated()当执行到updated时,数据已经被渲染到页面
  • 销毁阶段
    • beforeDestory() 此时实例还没有被销毁,实例上所有数据监听都正常可用
    • destroyed() 实例已经被销毁, vm已经不在工作

相关文章

  • VUE 爬坑笔记 (3)

    VUE组件 模块化 和 组件化 区别 模块化:从代码角度分析问题,把可复用的代码抽离为单独的模块 好处:方便程序员...

  • VUE 爬坑笔记 (4)

    兄弟组件之间传值 创建一个空的vue实例,作为事件总线 在数据源位置使用这个vue实例的$emit方法自定义一个事...

  • VUE 爬坑笔记 (1)

    MVVM (Model-View-Viewmodel) MVVM是什么? M 数据模型,主要来自后台数据 V 视图...

  • VUE 爬坑笔记 (2)

    ref 属性 ref属性标示对dom的引用,值是唯一值,定义在dom标签内 获取时使用this.$refs.属性值...

  • vue2升级vue3:Vue3时jsx组件绑定自定义的事件、v-

    踩坑笔记:组合式 API之Setup(props,context)—Vue2.x到Vue3注意[https://w...

  • Vue爬坑

    在这里记录一些vue开发过程中的小tips。 使用ESlint自动修复代码格式:如果使用了 ESlint ,在 p...

  • Vuex + axios

    Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求 Vue 原本有一个官方推荐的 ajax 插件...

  • Vue项目中使用Echarts创建图表

    参考:Echarts官网、Vue项目中使用Echarts展示图表数据、Vue 爬坑之路(八)—— 使用 Echar...

  • Vue爬坑之路一:开发环境

    Vue作为最简单的前端框架三巨头非常适合入坑但是是个坑就需要爬所以我们记录一下爬坑之路 官网:https://cn...

  • vue/cli

    vue3入坑 加速github的访问 vue-cli的坑 vue/cli 官网Vue CLIvue cli 的包名...

网友评论

      本文标题:VUE 爬坑笔记 (3)

      本文链接:https://www.haomeiwen.com/subject/jycebftx.html