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'
