Vue.js_构造器及其实例化概念

Vue构造器
1、Vue.js是一个构造函数,编程中称之为构造器
2、每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化
3、构造函数需要将其实例化后才会启用 var vm = new Vue({ //...})
4、Vue构造器要求实例化时需要传入一个选项对象
5、选项对象包括数据(data),模板(tamplate),挂载元素(el),方法(methods),生命周期钩子等选项
附:Vue实例传入选项对象API文档(https://cn.vuejs.org/v2/api/)

属性与方法
1、data会代理其对象里的所有属性
2、只有data里的属性是响应式的,即通信是双向的,如demo中所示
3、Vue被实例化后,再创建的属性,将不会触发视图更新,如demo中所示:
如:<p>{{a}},{{b}},{{c}},{{d}}</p>
1)a,b,c都会在视图中显示
2)a在实例化后仍然保持数据响应
3)d尽管在console.log(data)中存在,但视图却找不到,且会报错
4)因此请不要试图在实例化后添加任何属性

实例属性与方法
1、Vue实例暴露了一些有用的实例属性与方法
2、为与代理属性区分,方前添加了前缀$
3、app.$data===data //->true
app.$el===document.getElementById("app") //->true
附:Vue实例属性和方法API参考(https://cn.vuejs.org/v2/api/)

实例生命周期
1、Vue实例化过程中需要经历一系列额初始化过程,和所有构造函数类似
例如:配置数据观测--编译模板--挂载实例到DOM--数据变化时更新DOM
2、实例化过程中会调用一些生命周期钩子,在此期间,Vue提供执行自定义逻辑的机会
例如:created、mounted、 updated 、destroyed

demo:
<div id="app">
<p>{{a}},{{b}},{{c}}</p>
</div> <script>
var data={
a:1,
b:2,
c:3
}
var app=new Vue({
el:"#app",
data:data
}) console.log(app.a===data.a); //true app.a=5;
console.log(data.a); //5 data.a=10;
console.log(app.a); //10 data.d=12;
console.log(data); console.log(app.$data===data);
console.log(app.$el===document.getElementById("app"));
</script>
上一篇:ASP Base64位 加密解密


下一篇:js冒泡处理