美文网首页
Vue生命周期方法

Vue生命周期方法

作者: hai_phon | 来源:发表于2019-07-09 11:08 被阅读0次

3.vue生命周期方法

components :{
  // 声明子组件,这个子组件需要先导包,看图1_compenents用法
},
data() { 
    // 调用data()函数,return返回初始数据的一个全新副本数据对象,看图2_data()的用法
    // 这里的值是初始化的,或者说进行定义的,而且这里的值一般就和html里面的控件的值进行双向绑定
    return{
      // name: 'haiphon',
    }
},
created() {
    //在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    // this.name = '没渲染前我喊做小鸡快跑'
},
mounted() {
  // mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作,这个方法内document.getElementById("name")可以拿到值,我在这里进行数据初始化
 // initData()
},
method:{
    ...// 每次更新页面的时候执行
    // 几乎所有的方法都放在这里,例如点击事件回调方法,加载数据的方法,或者某些控件的显示值需要提前处理的也可以放在这里。
},computed:{// 这个方法和wathc的用法这个blog写的比较清楚:https://www.jianshu.com/p/bb7a2244c7ca
    ...// 第一次执行,后面当依赖的属性发生改变的时候执行
   // 某些控件的值显示前需要先进行处理的,而且这个相关值可能会变化的,那可以在这里写方法,优势在于如果依赖属性变了会自动执行,性能有优化。
    testName () {
      console.log('new name')
      return `${this.name}`+'哈哈哈哈哈'
    }
},watch:{
    // value3是已经在data中定义的属性,value是该属性发生改变时候的值。
    value3:function(value) {
        alert("现在的value:"+value);
    }
}
图1_compenents用法.png 图2_data()的用法.png

4.export和export default都用于导出模块,Vue的单文件组件通常需要导出一个对象,这个对象是Vue实例的选项对象,以便于在其他地方可以使用import引入。区别在于export可以导出多个,export default只能导出一个默认模块,这个模块可以匿名。
例如:

/**
 *export用法
 **/
// exportDemo.js 声明导出的文件
export const str = 'hello world'
export function f(a) {
    return a+1
}
// importDemo.js 声明引用的文件
import {str, f} from 'exportDemo'
//------------------------------------

/**
 * export default用法
 **/
// exportDemo2.js 声明导出的文件
export default {
    a: 'hello',
    b: 'world'
}

// importDemo2.js 声明引用方式,这里的"obj"是任意取得名字,也不用大括号括起来
import obj from 'exportDemo2'

相关文章

  • Vue生命周期

    什么是生命周期方法?生命周期钩子=生命周期函数=生命周期事件 Vue生命周期方法分类  创建期间的生命周期方法: ...

  • Vue生命周期

    1.Vue生命周期概述 生命周期是指vue组件从生到死特定阶段调用的方法. 生命周期钩子 = 生命周期函数 = 生...

  • 手写Vue2核心(四):生命周期及组件的合并策略

    属性与生命周期合并策略 Vue.mixin实现 在vue中有一个静态方法:Vue.mixin,用于属性与生命周期的...

  • vue(一):vue 知识点

    目录 1 Vue 实例 2 Vue 的生命周期方法 3 Vue 的数据绑定 4 computed 和 watch ...

  • vue生命周期详解

    1.vue基本生命周期 vue源码中最终执行生命周期函数都是调用callHook方法,callHook函数的逻辑很...

  • Vue进阶

    Vue实例 Vue实例生命周期函数 Vue模板语法 Vue计算属性、方法、侦听器 Vue计算属性的setter和g...

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • vue自记

    vue生命周期: Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运...

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

网友评论

      本文标题:Vue生命周期方法

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