第一章 什么是vue.js
vue.js是目前很火的一个前端框架,react是最流行的一个前端框架,(React除了开发网站,还可以开发手机APP,Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
vue.js是前端的主流框架之一,和angular.js,reac.js一起,并称为前端三大主流框架.
vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.
前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果.
学习前端框架能提高开发效率
提高开发效率的发展历程:原生JS->Jquery之类的类库->前端引擎模板->angular.js/vue.js
在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员有更多的时间去关注业务逻辑
1.1 框架和库的区别
框架:是一套完整的解决方案,对项目的侵入性比较大,项目如果需要更换框架,需要重新架构整个项目.
库:提供一个小功能,对项目的入侵性较小,如果某个库无法完成某些需求,可以很容易进行切换.
1.从jquery切换到zepto
2.从ejs切换到art-template
1.2 MVC和MVVM的关系图解
MVC是后端的分层开发的概念;
View指的是视图,model指的是对数据库的操作,c就是路由加上controller.
MVVM是前端视图层的概念,主要是关注于视图层分离,也就是说:MVVM把前端的视图层分为了三部分Model,View,VM ViewModel
M修改了要传入到V中,V中修改了数据要传到M中,不能直接传,要通过VM才行.
1.3 vue基本代码和MVVM之间对应关系
首先导包,当导入包之后,在浏览器的内存中,就多了一个Vue的构造函数,基本模板就是下图
更改EL,添加data
第二章 指令的使用
2.1 v-cloak
当我们网速比较慢的时候,请求资源的时候会将我们的代码显示在网页上,然后请求到vue.js之后才会将data中的数据进行显示,这个叫做闪烁问题,如果我们不希望客户看到我们的代码,可以加上v-cloak
2.2 v-text
v-text是没有闪烁问题的.
msg:123
2.3 v-html
如果我们想在消息中放入html标签,{{}}与v-text都将失效,需要用v-html.
2.4 v-bind指令的学习
当我们想在按钮上使用消息时,需要用v-bind,如果直接写的话,会将我们的data的key值直接当字符串进行渲染.下图就是当成了字符串进行渲染
我们需要告诉它是一个变量
其实是将字符串中的内容当作表达式来进行使用,所以我们加上'123'也是可以的.
我们可以直接写个冒号,当作v-bind来使用
2.5 v-on指令
v-on提供了事件绑定机制,缩写是@
也有一些其它的事件:比如v-on:mouseover事件
2.6 事件修饰符介绍
.stop和.self虽然都会阻止冒泡.但是.self是仅仅阻止了自己的,.stop是阻止了后续所有的.
点击按钮时会弹出两个事件
2.6.1 .stop事件修饰符
可以阻止冒泡,
2.6.2 .prevent事件修饰符
这里我们只想触发方法,不想去触发事件,可以用prevent
2.6.3 .capture事件修饰符
使用捕获机制来触发事件,我们正常的是从里往外,即点击按钮触发后面的div,这个是从外往里触发事件,即点击外面的div触发按钮.
2.6.4 .selft事件修饰符
只点击我自己才触发事件,不管冒泡和捕获
2.6.5 .once事件修饰符
事件只触发一次
事件修饰符可以串联的,比如下图,第一次点击不会触发默认行为,第二次点就会触发默认行为.先后没关系
2.7 v-model指令
这是唯一的指令可以实现双向数据绑定的,此指令只能在表单元素中使用
2.8 在Vue中使用样式
下图是普通的使用方式
第一种使用方式:
第二种使用方式:
第三种使用方式:
第四种使用方式:
使用内联样式:
如果属性有横杠-,则必须使用引号
第一种使用方式:
第二种使用方式:
将内联样式移动到data中
第三种使用方式:
使用数组
2.9 v-for指令
for循环普通数组:
for循环对象数组:
for循环遍历对象:
for循环迭代数字:
从1开始
注意事项:
当循环的不指定key时,系统不知道你指定的是哪一项,可能会出错,key的类型必须为number或者string
2.10 v-if与v-show指令
第三章 小例子
3.1 跑马灯效果制作
当我们要在函数中使用this时,会遇到到底这个this是用在函数中的this,还是用在Vue中的this,来让我们调用自己的数据的.用ES6中的箭头函数可以很好的解决这一点,这代表this就是Vue中的this了,用来引用Vue的数据或方法.
为了避免连续的启动定时器,我们在data中存储数据id
