Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架,这两都可以来开发网站和手机App,但vue开发手机app需要Weex的帮助。vue的开发者是尤雨溪。
Vue.js是一套构建用户界面的框架,只关注视图层。主要负责MVC的V的这一层,还是只关注于界面。
其实学习前端的这些框架,无非就是提升效率,大体上的开发进度都是:
原生JS代码 --》 jQuery库 --》前端模板引擎 --》 Angular.js / Vue.js / React.js
Vue就是一套用于构建用户界面的渐进式JavaScript框架。
尤雨溪是Vue开发者,他是收到Angular框架的启发,发出了一款轻量级的框架Seed,之后改名为Vue。
Vue的特点:
采用组件化模式,提高代码复用率,且让代码更好的维护。
声明式编码,让编码人员无需直接操作DOM,提高开发效率。
解释一下命令式编码和声明式编码的区别:
使用虚拟DOM 和 优秀的Diff算法,尽量复用DOM节点。
Vue有两个版本,生产版本和开发版本。
引入,很简单从官网下载js文件也好,引入script也好都行。
devtools可以去github上下载,也可以去谷歌应用商店下载。
需要注意两个版本:
我们可以在控制台打印Vue对象来查看!
上面两个提示的解释:
第一个提示:提示是告诉我们要安装Vue的devtools开发者工具,安装这个插件后就不会报错了。
第二个提示:是提示我们当前是在开发者环境中,部署项目要在生产模式!
对于上面的提示,第一个提示安装devtools就没了,但是想要第二个也不提示,就需要在Vue.config中配置一下: Vue.config.productionTip = false;
首先,我们去Vue官方网站,查看Vue相关的API ,也是可以查询到一些全局配置的!会看官网很重要!一定要学习看官网!
https://cn.vuejs.org/v2/api/
可以在控制台直接打印出Vue.config的内容:
mvc:(主要考虑后端分层开发)
mvvc:(主要考虑前端使用vm来分离)
Model、View、VM ViewModel
链接上面的mvvm解释,下面整体就是一个类似mvvm的架构!
vm(ViewModel)就是const定义的vm对象。
下面,就是Vue的一个工作流程:
先有html代码容器,再有Vue实例,在实例中会解析html代码容器中的代码语法(针对Vue的语法),解析完后,会将之前的容器替换掉,放到前端页面上面。
一个Vue实例,只能对应一个容器。
同样,一个容器也只能对应一个Vue实例对象。
因此,在Vue中,Vue实例对象和容器是一一对应的关系!!!!
开发中只有一个Vue实例,但是在Vue实例中可以引入多个Vue组件。
常见的能写的如下:
总结起来,{{xxx}}里面可以写JS表达式的东西!
那么,什么是JS表达式?
js表达式, js语句 , js代码 这三个要区分好!
js表达式(expressions):
js语句(statements):
js代码就是平时我们写的js代码。
就是双花括号{{xxx}},这种语法就是插值语法。
指令语法功能:
用于解析标签,包括:标签属性、标签体内容、绑定时间等等,例如:v-bind(对标签属性)。
v-bind 的使用(v-bind: 可以简写为 : ):
v-bind能够将所对应的属性中的引号里面的值,当成js表达式来执行(包括Vue实例的data属性中的值)。
Document总结起来就是,标签体内的值使用插值语法,标签体属性的值使用指令语法。
除了v-bind指令,还有很多!此外,我们经常用嵌套格式来获取命令,也可以调用一些方法:
对于标签元素的属性绑定有两种:
在devtools的效果图如下:
那么其他不带$符号的方法属性,不是给开发人员使用的,但是底层在使用,不能随便修改!
第一种是直接定义el来指定容器。
第二种是$mount()方法来实现来指定容器,mount意思就是挂载。
Document注意函数式,非常重要,组件必须用到函数式,此外,data函数可以简化,并且这里不能使用箭头函数,因为这里的this指向必须是Vue实例对象。
在解释一下,箭头函数本身是没有this的,因此它就会向上一层查找!
Title
{{name}}
一般我们后台代码有mvc分层架构,前端代码也是有mvc或mvvm分层架构的。
而在vue中,我们使用mvvm的分层架构。
DOM Listeners :模块监听。
Data Bindings : 数据绑定。
这俩个都是很重要的存在记住!
注意:
1. data中所有的属性,最后都出现在了vm实例对象上面。
2. vm升上所有的属性和Vue原型上所有的属性,都可以直接在Vue模板中使用。
见源码:
Document
学校名称:{{name}}
学校地址:{{address}}
1+1 为什么等于 {{1+1}} ?
测试Vue的$options,{{$options}}
测试Vue原型$emit,{{$emit}}
测试没有$开头的 _c,{{_c}}
Object.defineProperty方法很重要,Vue的底层多处都使用到了该方法。
例如:vue的数据劫持,数据代理,计算属性等底层都使用到了该方法。
Object.defineProperty,翻译过来就是定义属性,换句话说该方法就是用来给对象定义属性的。
Object.defineProperty的参数:
参数1:目标对象。
参数2:要修改或者添加的属性名称。
参数3:目标对象属性的一些特征 (也就是配置项,值为格式类似{ xxx:xxx }的对象),该对象的参数如下:
注意:ObjectdefineProperty增加的属性,在打印出来后,有些不一样,颜色会比其他直接定义的属性浅一些,因此,可以通过这种方式来判别一下该属性是否是ObjectdefineProperty来创建的。
注意:Object.defineProperty定义的属性默认都是为false:
下面演示一下enumerable枚举的效果:
下面Object.keys()的用法:可以将对象里的所以的键取出来放到一个数组中。
Title
常用场景(重要):
使用Object.definedProperty的get来解决上图问题:
Object.definedProperty的get其实就是getter,获取设置属性时,会调用get方法,从而return值。
也可以看看get和set中函数的三种写法形式:
Title
Object.definedProperty的set其实就是setter,当有人修改该属性时,会调用set方法,并且会拿到修改的值value作为参数。
Title
总结:
数据代理:通过一个对象 代理 对另一个对象中属性的操作(读/写)。
其实,在上面的number和person就是类似一种数据代理的形式,number代理操作person的age属性读写操作。
下面再写一个例子,来展现两个对象之间的数据代理:
Document
首先,说一个误区,很多人认为我们在js中定义好vue实例对象,设定好el,data等属性,我们就可以通过vm.el或vm.data获取到相应的内容,这个观点是大错特错!!!!
因为很简单,我们定义的new Vue({ el:xx , data:xx }),黄色部分仅仅是一个参数!!!并不是一个vue实例对象的变量!这是一个容易混淆的误区。
在Vue中,将data属性以及对应的值转为了_data。
数据代理详解图:
总结起来,数据代理就是通过使用Object.definedProperty(obj , attr , value)以及对应的getter和setter方法,来实现对象与对象间的代理操作!
同时也不难看出,只要做过数据代理的都在vue实例对象中查看到有get和set方法和参数值为(…)这种形式基本上都是做过数据代理的。
但是 _data 中,虽然和数据代理很像,但它采用的技术叫做数据劫持,并不是数据代理!因为它要时刻与页面的数据进行响应,也正因如此,才会对我们写js传入的data参数进行一些修改,从而得到一个_data,也不难看出 _data多出了很多属性。
数据代理的本意就是让vue实例对象的数据与页面的数据,链接对应起来,一方修改另一方也要被修改。
参数属性methods:来存放我们设定的函数的。
Document
你好,{{name}}!
我们在methods方法中设定好的函数,默认第一个参数是可以接受到一个event事件对象。
对于event事件对象,我们常用的方法是target来打印一些东西等等:
Document
你好,{{name}}!
这里就有一个原则,就是我们在methods写的方法不要写成箭头函数形式,不然this指向的不是vue对象,而是window对象。
传参数就是在函数后面加上括号参数就可以了。
Document
你好,{{name}}!
但是,上面代码有个问题就是事件对象event没法得到了!为了解决这个问题,我们还可以通过传参$event来解决。
Document
你好,{{name}}!
在data直接设置函数是可以执行的,但是会让vue效率低,因为data中所有的内容都要进行数据代理和数据劫持!因此,函数放到data中没意义反而加重vue运行!