vue.js入门教程

什么是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 : 是调度者

操作步骤

1. 导包
2. 写MVVM中的V

//可以使用class
<div id="app"></div>

注: V中的id或class 的指定的标签不能出现嵌套,嵌套则会报错,可以通过编辑器的代码折叠功能,辅助查看是否出现嵌套;

3. 定义data

//data属性中存放的是el中要用到的数据
var data={id="1",name="小明"};

4. 创建一个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-bindvue提供的属性绑定机制 缩写是 :
v-onvue提供的事件绑定机制 缩写是 @

事件修饰符

1. .stop阻止冒泡
2. .prevent阻止默认事件
3. .capture添加事件侦听器时使用事件捕获模式
4. .self只当事件在该元素本身(比如不是子元素) 出发时出发回调
5. .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作用差不多,适合做单页面应用程序;

第二天准备开始!!!