vue常用api简单介绍(data，methods，watch，created，mounted)

学习任何一门语言都应该学会总结汇总，对于Vue常用的API模块，坐下笔记，有需要的收藏使用。

data：定义一些需要使用的数据变量或者常量

computed：同data一样，可以定义变量，变量的值通过方法计算得到

watch：用于监听数据变化，等同于给数据绑定的onchange事件，一旦数据值改变就会执行方法体

created：初始化执行，在html加载之前进行，所以可以改变data中的值，但是不会触发change事件，也不会触发到watch

mounted：初始化执行，在html加载之后进行，所以改变data定义变量的同时，会触发chang事件

methods：定义方法体

Vue生命周期中的created和mounted的区别：

created：创造的;创建
mounted： 安装好的; 准备好的;
从英文意思也可以看出来区别：
created（html模板渲染之前，这时候获取不到dom元素）
mounted（html模板渲染之后，这时候可以获取到dom元素）

Vue.component("demo1",{

data:function(){

return {

name:"",

age:"",

city:""

}

},

template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",

created:function(){

this.name="唐浩益"

this.age = "12"

this.city ="杭州"

var x = document.getElementById("name")//第一个命令台错误

console.log(x.innerHTML);

},

mounted:function(){

var x = document.getElementById("name")//第二个命令台输出的结果

console.log(x.innerHTML);

}

});

var vm = new Vue({

el:"#example1"

})

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。