Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多。
那今天,我就给大家详细的说道说道这个 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>我是app1,点我</button> </body> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/vue.js" ></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思想了。相信大家对面向对象也不陌生,如果真的不知道是啥玩意的,赶紧百度学去。
以上就是最最最最最最.....基础的使用 vue 的方法了。
2. Vue 实例化对象的生命周期。
接下来,我们说一下,一个实例化出来的对象,他的生命周期是啥样的,要经历那些阶段。请看下面一段代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>我的声明周期,大家看吧!</div> </body> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/vue.js" ></script> <script type="text/javascript"> //以下代码时显示vm整个生命周期的流程 var vm = new Vue({ el: "#container", data: { test : 'hello world' }, beforeCreate: function(){ console.log(this); showData('创建vue实例前',this); }, created: function(){ showData('创建vue实例后',this); }, beforeMount:function(){ showData('挂载到dom前',this); }, mounted: function(){ showData('挂载到dom后',this); }, beforeUpdate:function(){ showData('数据变化更新前',this); }, updated:function(){ showData('数据变化更新后',this); }, beforeDestroy:function(){ vm.test ="3333"; showData('vue实例销毁前',this); }, destroyed:function(){ showData('vue实例销毁后',this); } }); function realDom(){ console.log('真实dom结构:' + document.getElementById('container').innerHTML); } function showData(process,obj){ console.log(process); console.log('data 数据:' + obj.test) console.log('挂载的对象:') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } </script> </html>
那接下来看看效果图: