那今天，我就给大家详细的说道说道这个 Vue.js ，以下是我们这次详解的目录，朋友们可以根据自己的情况选择性阅读，所有操作均附有代码实现。
1. Vue.js 如何绑定到页面中，使用他的功能。
2. Vue 实例化对象的生命周期。
3. Vue 的 所有 数据绑定指令
那接下来，我们就开始今天的介绍啦！
1. Vue.js 如何绑定到页面中，使用他的功能。
先看下面的一段代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body> <button id="app1" onclick="app1.func()">我是app1，点我</button></body><script type="text/javascript" src="js/jquery-3.1.1.min.js?1.1.11" ></script><script type="text/javascript" src="js/vue.js?1.1.11" ></script><script type="text/javascript">//通过Vue.js的构造函数 实例化出一个根实例var app1= new Vue({
el:"#app1",
data:{
message:"我在app1中显示出来了吗？",
func:function(){
alert(this.message);
}
}
});
console.log(app1.$data.message); //这个要知道哈，app1就是一个变量，一个对象类型的变量，链式语法直接用即可</script></html>效果如下：
上述代码就是点击按钮有弹窗，下面解析一下这段代码。
var app1= new Vue({
el:"#app1",
data:{
message:"我在app1中显示出来了吗？",
func:function(){
alert(this.message);
}
}
});
console.log(app1.$data.message);
通过Vue.js的构造函数实例化出一个根实例 app1 ，说白了，这就是我们面向对象的对象的实例化，直接 new 一个对象。
el:"#app1", 这是在 挂载我们实例化对象的元素节点，就是这个app1 对象作用域是那一个标签里面的。这里可以是 id、class、tagname。但是主要还是用id，因为他的唯一性。
data:{} 是定义 这个对象的变量和方法，注意所有在和 app1 有关联的变量、方法都必须在data中声明。
注意： (1)作用域。js5 只有函数作用域，所以 data 中的函数如果想调用变量，就必须通过 this. 调用，或者直接通过对象名调用。
(2)外部调用。app1.$data.message； 在js中直接调用 vue 对象的属性、方法时，需要链式语法，一层层点出来，这里用 $data ，主要还是和js的变量作区别
(3)与HTML代码的绑定。 这里我是通过 js 的onclick直接绑定的，当然 vue 有自己的事件绑定，这里暂且不讲，如果用 js 的行内绑定，注意需要带对象名。这就是纯 OOP思想了。相信大家对面向对象也不陌生，如果真的不知道是啥玩意的，赶紧百度学去。
下载本文