什么是Vue.js
Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue.js也可以用于手机App开发,但需要借助于Weex)
Vue.js 是前端的主流框架之一,和Angular.js,React.js一起,称为前端三大主流框架!
Vue.js 是一套构建用户界面的前端框架,只关注视图层
,它不仅易于上手,还便于与第三方库或既有项目整合. (Vue.js有配套的第三方类库,可以整合起来做大型项目的开发)
前端的主要工作? 主要负责MVC中的V这一层;主要工作就是和界面打交道.
为什么要学习流行框架
1.企业为了提高开发效率,在企业中,时间就是效率,效率就是金钱.
2.企业中,使用框架,能够提高开发的效率.
3.提高开发效率的发展历程: 原生js(存在浏览器兼容问题) -> Jquery之类的类库(解决了浏览器兼容问题,存在频繁操作DOM) -> 前段模板引擎(调用模板引擎自动生成DOM,存在操作不必要的DOM操作[如: 有一千条数据,id除了有两条数据不是按照从小到大的顺序排序,现在需要对1000条数据按照id从小到大的顺序排序,模板引擎需要先对1000条数据排序,然后浏览器重新重绘和重排DOM,存在不必要的DOM操作,消耗浏览器性能]) -> Angular.js / Vue.js (减少不必要的DOM操作,提高渲染效率:都提供了双向数据绑定的概念[通过框架提供的指令,前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染])
4.在Vue.js中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;
5.增强自己就业时候的竞争力.
5.1.人无我有,人有我优
框架和库的区别
1.框架: 是一套完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目.
1.1.node 中的express;
2.库(插件) : 提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求.
2.1.从Jquery切换到Zepto
2.2.从EJS 切换到art-template
vue中的所有指令,在调用的时候,都以v-开头
包括自定义指令
Node(后端) 中的MVC 与 前端中的MVM之间的区别
1.MVC 是后端的分层开发概念;
2.MVVM 是前端视图层的概念,主要关注于 视图层分离,也就是说: MVVM把前端的视图层,分为了 三部分:Model,View, VM ViewModel
3.为什么有了MVC 还要有MVVM?
3.1.MVVM 是前端视图层的分层开发思想,主要把每个页面,分成了 M,V和VM,其中VM是MVVM思想的核心,因为VM是M 和 V 之间的调度者
Vue.js 基本代码和MVVM之间的对应关系
介绍
M : 是数据
V : 是界面
VM : 是调度者
操作步骤
- 导包
- 写MVVM中的V
//可以使用class
<div id="app"></div>
注: V中的id或class 的指定的标签不能出现嵌套,嵌套则会报错,可以通过编辑器的代码折叠功能,辅助查看是否出现嵌套;
- 定义data
//data属性中存放的是el中要用到的数据
var data={id="1",name="小明"};
- 创建一个Vue.js的实例
//当导入包之后,在浏览器的内存中,就多了一个Vue构造函数,就可以:
//注意: new 出来的这个vm对象,就是MVVM中的调度者
new Vue({
//表示当前new的Vue实例,要控制页面上的那个区域:区域不能有包含关系,否则最小的区域不会生效,会报没有定义异常
//参数el: Vue实例控制的区域
el:’#app’,
//data属性中,存放的是el中要用到的数据,该数据必须提前定义,才能保证数据绑定,否则后续添加的数据,不能完成数据绑定
data:data,
//通过Vue提供的指令,很方便的就把数据渲染到页面上,程序员不再手动操作DOM元素了[前端的Vue之类的框架,不提倡手动操作DOM元素]
msg:’’}})
Vue.js的 ‘基本代码结构’ 和 ‘插值表达式’,’v-cloak’,’v-html’
v-cloak
<div id="#app">
<!-- 使用v-clock 能够解决 插值表达式闪烁的问题,当网速表较慢时,我们最先看到的是如:{{msg}} 这样的插值表达式 -->
<p v-cloak>{{ msg }}</p>
</div>
<style>
/* 隐藏插值表达式标签 */
[v-cloak]{
display:none;
}
</style>
<script src="vue.js"></script>
<script>
var vm = new vue({
el:'#app',
data:{
msg:'aaa'
}
})
</script>
//总结: 具体的流程: 当渲染页面时,在p标签上的v-cloak被设置成隐藏,用户看不见,当数据加载完成后,Vue会移除p标签上的v-cloak属性.
v-text
写法:
<p v-text=’msg’></p>
1.1.通过在浏览器中查看,v-text并没有闪烁问题;
1.2.V-text会覆盖元素中原本的内容,插值表达式只会替换自己的占位符,不会把整个元素的内容清空;
1.3.插值表达式可以前后拼接字符串,或者运算,v-text则不可以进行拼接和运算;
2.v-html:
2.1.V-html和v-text一样都会覆盖元素中原本的内容;
2.2.V-text不会解析data中的html标签,v-html会解析:
Data:{
Msg:’<h1>abc</h2>’
}
<div v-text=’msg’></div>
<div v-html=’msg’></div>
‘V-bind:
’ (Vue提供的属性绑定机制,绑定属性,属性值为data中的变量名或和js表达式拼接) 和 ‘v-on:click
’ (Vue提供的事件绑定机制,绑定的是方法,方法写在和data平级的methods对象中)
v-bind:
简写为 :
V-bind: 是Vue中提供的用于绑定属性的指令:
<input type=”button” value=”按钮” v-bind:title=’mytitle’ />
Data:{
Mytitle:’自定义title’
}
v-bind: 绑定的属性,Vue会将v-bind: 绑定的属性值作为变量在data中去查找,也会将v-bind:绑定的属性的属性值作为js代码执行:
<input type=’button’ value=’按钮’ v-vind:title=’mytitle + “123”’/>
输出结果: 自定义title123
vue指令
v-bind:
的三种用法:
1.直接使用指令v-bind:
2.使用简化指令:
3.在绑定的时候,拼接绑定内容就使用 :title=‘btnTitle+“这是追加的内容”’
v-on: + 事件名称
简写为 @ (没有冒号) + 事件名称
<input type=”button” value=’按钮’ v-on:click=’show’>
<script>
Var vm = new Vue({
El:’#app’,
Data:{},
Methods:{
Show : function(){
alert(‘Hello’);
}
}
})
</script>
注意: @click 或 v-on: 绑定的事件,可以加() 也可以不加,那加和不加的区别是: 加括号就可以传参了,不加无法传参;
在vue中,使用时间绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了;
<input type=”button” value=”添加” class=”btn btn-primary” @click=”add()”/>
<input type=”button” value=”添加” class=”btn btn-primary” @click=”add()”/>
总结:
如何定义一个基本的Vue代码结构
?
插值表达式
和v-text
v-cloak
v-html
v-bind
vue提供的属性绑定机制 缩写是:
v-on
vue提供的事件绑定机制 缩写是@
事件修饰符
.stop
阻止冒泡.prevent
阻止默认事件.capture
添加事件侦听器时使用事件捕获模式.self
只当事件在该元素本身(比如不是子元素) 出发时出发回调.once
事件只出发一次
<input type=”button” value=”点击” @click.stop=”go” />
按键修饰符
官网地址: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
2.x自定义全局按键修饰符
在vue实例上方,即写vue实例的script标签的顶部,和创建vue实例同级:
Vue.config.keyCodes.按键修饰符 = 键值
如回车键: Vue.keyCodes.enter = 13
用法:
在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符;
<input v-on:keyup.13=’submit’ />
<input v-on:事件名称.按键修饰符或键值 = ‘方法名称’ />
跑马灯效果
代码及解析过程:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 导入Vue.js包 -->
<script src="vue.js"></script>
</head>
<body>
<!-- HTML结构: -->
<div id="app">
<input type="button" value="开始" v-on:click="go" />
<input type="button" value="停止" v-on:click="stop" />
<p>{{ info }}</p>
</div>
<!-- Vue实例 -->
<script>
var vm = new Vue({
el: '#app'
m,
data: {
info: '猥琐发育,别浪!',
intervalId: null
},
//虽然是以s结尾,不是数组,而是一个对象
//vm会自动监听自己身上data中所有的数据的改变,只要数据一发生变化,就会自动把最新的数据,从data上同步熬页面中去,好处: 程序员只要关心数据,不需要考虑如何重新渲染DOM页面
methods: {
lang() {
//判断this.intervalId !=null 则定时器已经开发直接返回
if(this.intervalId != null) {
return;
}
//在方法里访问this,this的指向发生改变:
//解决办法:1. 在方法外面定义var _this = this; //这是投取巧的方法
//方法2. 是用es6的箭头函数
<!-- 1. 方法1的写法 -->
<!--
var _this = this;
setInterval(function() {
//获取到头的第一个字符
var start = _this.info.substring(0, 1);
//获取到后面的所有字符
var end = _this.msg.substring(1);
//重新拼接得到新的字符串,并赋值给info
_this.info = end + start;
});
-->
<!-- 方法2的写法:es6的写法,箭头函数,内部的this和外部的this保持一直 -->
<!--
改成箭头函数之后, 内部的this就指向了外部的this
this.intervalId = setInterval(() => {
//获取到头的第一个字符
var start = this.info.substring(0, 1);
//获取到后面的所有字符
var end = this.msg.substring(1);
//重新拼接得到新的字符串,并赋值给info
this.info = end + start;
}, 400);
-->
},
stop() { //停止定时器
//停止定时器
clearInterval(this.intervalId);
//每当清楚了定时器之后,需要把intervalId置为null
this.intervalId = null;
}
}
});
</script>
</body>
<!-- 使用到的其他知识点:
1. js中的字符串截取: substring
2. 定时器,定时执行字符串截取操作
3. 清楚定时器
关键点: 1. 根据定时器id进行清楚;
4. es6 函数的写法,函数名(){} 函数名后面的括号是参数列表,花括号为函数体,后续解析的时候会自动将方法名映射为属性名,中间加function,解析为lang:function(){};
5. 在vm实例内部,如果想到获取data上的数据,或者想要调用methods中的方法,必须通过this.数据属性名 或 this.方法名来进行访问,这里的this就是表示new出来的vm实例对象;
分析:
1. 给 开始按钮绑定一个点击事件 v-on: 或 @
2. 在按钮的时间处理函数中,写相关的业务逻辑代码,拿到info字符串,然后调用字符串的substring还进行字符串的截取曹组,把第一个字符截取出来,放到最后一个位置即可;
3. 为了实现点击下按钮,自动截取的功能,需要把2的步骤代码放到定时器中;
-->
</html>
v-model 实现双向数据绑定
这是唯一一个可以实现双向数据绑定;
1.V-bind 只能实现数据的单向绑定,从M 自动绑定到V,无法实现数据的双向绑定;
注意: v-model 只能运用在表单元素中: input,radio,text,address,emal,select,checkbox,textarea
<input type=’text’ v-bind:value=’msg’ style=”width:100%;”>
2.使用V-model 指令,可以实现表单元素和Model中数据双向绑定
<input type=”text” style=”width:100%;” v-model=’msg’ />
在vue中使用样式
使用class样式
使用class样式就是在元素的class属性上进行操作
总共有四种方式,第5个例子是class和:class混合使用:
1. 数组方式:
<h1 :class=[’red’,’thin’]>这是h1</h>
注意: 第一种使用方式,直接传递一个数组,注意: 这里的class需要使用
v-bind:
做数据绑定
2. 数组中使用三元表达式:
<h1 :class=”[‘red’, ’thin’, isactive ? ’active’ : ’’]”>这是一个h1</h>
3. 数组中嵌套对象:
<h1 :class=”[‘red’,’thin’,{‘active’:isactive}]”>这是h1</h>
注意: 在数组中使用三元表达式不方便代码阅读,直接在数组中使用对象的方式;
4. 直接使用对象:
<h1 :class=”{red:true,italic:true,active:true,thin:true}”>这是一个h1</h>
注意: 前面是类名,后面是判断,为true或false;
注意: 属性名可以不带引号,也可以带引号;
5. Class 和 :class混合使用:
<h1 class=”red” :class=”{red:true,italic:true,active:true,thin:true}”>这是一个h1</h>
前提: 当然,class 或 :class属性值需要提前在<style>标签或其他地方定义好;
使用内联样式
1. 直接在元素上通过 :style 的形式,书写样式对象:
<h1 :style=”{color:’red’,’font-size’:’40px’}”>这是一个h1</h>
<!--注意: 属性名和属性值需要使用引号引起来-->
<!--
如果想要达到页面加载时,默认不显示某个div,使用v-if不能达到效果;
需要使用: style="display: none;" :style="{'display':'block'}"
-->
<div v-if="ruleFlag" style="display: none;" :style="{'display':'block'}">默认不显示的内容</div>
2. 将样式对象,定义到 vm的data中,并直接引用到 :style中:
在data上定义样式:
H1StyleObj就是无序键值对的集合:
注意: 如何属性名由中横线连接的必须加引号(单引或双引):
Data:{
H1StyleObj:{color:’red’,’font-size:’40px’}
}
在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style=”h1StyleObj”>这是一个h1</h>
3. 在 :style中通过数组,引用多个data上的样式对象:
在data上定义样式:
Data:{
H1StyleObj:{color:’red’,font-size:’40px’},
H2StyleObj:{fontSytle:’italic’}
}
在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style=”[h1StyleObj,h2StyleObj]”>这是h1</h>
vue中的指令v-for
和key
属性
1. 迭代数组:
<ul>
<li v-for=”(item,i) in list”>索引: {{i}} --- 姓名: {{item.name}} ---年龄:{{item.age}}<li>
</ul>
2. 迭代对象中的属性:
<!-- 循环遍历对象身上的属性 -->
<div v-for=”(val,key,i) in userInfo”>值是: {{val}} --- 键是: {{key}} --- 索引是: {{i}}</div>
3. 迭代数字:
<p v-for=”i in 10”>这是第{{i}}个p标签</p>
注意: 2.20+ 的版本中,当在组件中使用v-for时,key是必须的;
总结: in后面可以放: 普通数组,对象数组,对象,数字;
如果使用v-for 迭代数字的话,前面的count 值 从1开始;
当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用”就地复用”策略. 如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据想的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素;
为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有的元素,需要为每项提供一个唯一key属性;
list.push({id:this.id,name:this.name});
图片位置 ./pic/1.png
List.unshift({id:this.id,name:this.name});
图片位置 ./pic/2.png
因为没有指定key,所以只是认为选中了索引为4的,如果指定key之后,就会选择对应key的一项;
指定key:
注意: :key的值只能是string或number 不能是对象,item等;
注意: key 在使用的时候,必须使用v-bind属性绑定的形式,指定key的值;
Key是保证数据的唯一性的;
<ul>
<li v-for=”item in list” :key=”{{item.id}}”>id:{{item.id}}---name:{{item.name}}</li>
</ul>
vue指令v-if
和v-show
一般来说: v-if有更高的切换消耗,而v-show有更高的初始渲染消耗.因此,如果需要频繁切换v-show较好,如果在运行时条件不大可能改变v-if较好;
V-if 的特点: 每次改变都会重新删除或创建元素;
V-show的特点: 每次改变不会重新创建或删除DOM操作,只是切换了元素的display:none;样式;
注意: 从Vue 2.0开始不能在body上创建控制区域;
Chrome中安装devtools(此方法不可用)
安装npm环境
下载地址:
github地址: https://github.com/vuejs/vue-devtools
搭建环境:
http://www.runoob.com/nodejs/nodejs-install-setup.html
安装devtools及使用
参考链接:http://www.cnblogs.com/lolDragon/p/6268345.html
npm介绍
参考链接:https://www.jianshu.com/p/4643a8e43b79
以上内容总结:
1.MVC 和 MVVM 的区别;
2.学习Vue.js中最基本代码的结构;
3.插值表达式 v-clock, v-text, v-html, v-bind(缩写为 : ), v-on(缩写为 @ ), v-model, v-for, v-if, v-show;
4.事件修饰符: .stop, .prevent, .capture, .self, .once;
5.el : 指定要控制的区域, data: 是个对象,指定了控制的区域内要用到的数据, methods: 虽然带个s后缀,但是是个对象,这里可以自定义方法;
6.在VM实例中,如果要访问data上的数据,或者要访问methods中的方法,必须带this;
7.在v-for 中要会使用key属性(值只能是string或number);
8.v-model 只能应用于表单元素;
9.在Vue中绑定样式两种方式,v-bind:class v-bind:style;
react,ng,vue作用差不多,适合做单页面应用程序;
第二天准备开始!!!