vue入门教程

vue基础加面试题

一、什么是vue?

​ Vue是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的JS框架

​ 第三方：别人写好的，我们直接下载即可

​ 渐进式：可以逐步在项目中引入Vue的各项功能，同时，可以与其他技术混用，但是，不推荐（es5：只要不是使用框架，一律使用es5，不能出现es6；es6：我们使用框架的时候，就可以使用es6）

MVVM设计模式：

1. 传统前端三大部分：html/css/javascript

​ 问题：html和css的功能都太弱了，对于页面发生的一切变化都需要JavaScript来编写，导致需要JavaScript编写大量重复的增删改查操作

2. 现代前端三大部分：(MVVM)

界面(View)：

​ 视图，指网页中的元素和样式，一般指的就是html和css。view是.html网页中的一个需要动态加载内容的父元素，比如:“div#app”。html中的视图，也被称为模板template，如果发生template错误，那么就在html中查找就可以了

数据模型(Model):

​ 集中保存界面中所需要的所有变量和变量值。模型，指程序中创建的或者从远程获取的数据，一般使用js中的一个对象data来保存，内容就会直接显示到view中

控制器(ViewModel):

​ 视图模型/控制，用于替代之前DOM/jQuery操作，封装了重复的增删改查操作，把模型中的数据和视图中的html元素“绑定”到一起。Vue类型提供的就是一种强大的ViewModel对象，可以自动同步数据和页面元素。专门负责自动将模型中的变量值自动同步到界面中所需要的位置，实现实时同步。

ViewModel核心原理：（响应系统/虚拟DOM树）

纯前端：

​ 不需要任何后端技术，就能够独立运行

框架：

​ 包含核心功能的半成品代码，开发人员只需要根据业务的需求，添加定制自己个性化的一部分内容即可

（构造+原型）

案例：第一个vue程序

<!-- 第一步、编写页面 -->
		<!-- 界面中所有的元素都必须放在唯一的父元素内，父元素必须要有id名，便于查找 -->
		<div id="app">
			<!-- 将输入的内容的保存到变量中，使用{{变量名}}来进行占位 -->
			<h2>{{showMessage}}</h2>
			<!-- 为button按钮绑定点击事件，向控制台输出一段话 -->
			<button type="button" @click="show">输出</button>
		</div>

        <script src="../js/vue.js" type="text/javascript">
		</script>
		<script type="text/javascript">
			//第二步：在js中定义数据对象
			//所有的界面所需要的变量都定义在data对象中，
			//var data={变量名1:变量值1,变量名2:变量值2,...变量名n:变量值n}
			var data={
				showMessage:"hello vue!"
			}
			//第三步：在js 中创建vue对象，将界面和数据绑定起来
			//创建vue类型的ViewModel对象
			var vm=new Vue({
				//el:id选择器，查找页面中需要监控的父元素，并且进行绑定；后面可以跟上任意选择器，但是一个viewModel对象只能绑定一个dom元素，即使“选择器”可以找到多个元素，也只能绑定一个一个符合条件的dom元素。所以一般用id选择器。
				el:"#app",
				//data:存在界面所需要的变量，让new vue同时监控data数据
				data,
				//methods:所有界面所需要的事件处理函数都有放在一个名为methods的对象属性中。
				methods:{
					//定义一个函数show
					show(){
						console.log("hello vue!")
					}
				}
			})
		</script>

二、对比原生DOM、jQuery、Vue框架

1. 原生DOM：

   使用原生DOM，必须是一步一步的来，而且每一步都不能少，步骤上非常繁杂，原生的DOM兼容性好

问题：jQuery中有多少种查找方法？（查找id的元素，查找class的元素，查找name的元素）

（两个点：1.是否考虑IE；2.是否有自己的框架）

2. jQuery：

   jQuery其实是对DOM的每一步都进行了简化，但是，并没有从根本上改变程序的流程

3. Vue：

​ 优点：已经包含核心功能，而且封装了很多重复的功能，编写时我们就不必要再编写重复的功能，比如：增删改查，算是在开发中彻底简化的了开发的步骤

​ 缺点：不兼容旧浏览器，同时开发人员需要彻底的改变编程习惯和思维

​ DOM树重绘问题：重复性高，效率低

三、什么时候使用Vue？为什么使用Vue？

​ 1.Vue适用于以数据操作为主的项目(web/app)

​ 2.我们使用vue框架可以提高项目的开发效率

四、如何在项目中使用Vue

1. 下载vue.js，并通过script引入（学习阶段使用）

2. 通过Vue-Cli脚手架工具（开发项目，使用的都是脚手架工具）

五、Vue下载安装

1. Vue中文官网

https://cn.vuejs.org/

2. 下载Vue.js

​ 提示：下载独立的vue.js文件：打开官网，点击页面中的起步按钮，之后再在页面左侧选择安装，在安装下选择要下载的vue.js版本

​ 开发版：未经压缩的，拥有完备的注释和错误提示的版本，可读性高

​ 生产版：已经压缩过的，而且去掉了错误提示，可读性差

3. 在网页中引入vue.js

<script src="./js/vue.js"></script>

六、编写vue程序的步骤：

第一步：编写页面

第二步：在JS中定义数据对象

第三步：在JS中创建vue对象，将界面和数据绑定起来

el：

id选择器，查找页面中需要监控的父元素，并进行绑定。el: 后可以跟任意选择器，但是一个viewModel对象只能绑定一个DOM元素，即使“选择器”可以找到多个元素，也只能绑定第一个符合条件的DOM元素身上。所有，el中我们一般用id选择器就ok了

data：

存放界面所需要的变量，让new Vue同时监控data中变量的一个变化

methods:

所有界面所需的事件处理函数都要放在一个名为methods的对象属性中

提示：绑定以后，只要程序的变量值发生变化，页面上就会自动更新

问题：new Vue()的绑定原理

​ new Vue() 其实就是创建一个ViewModel对象，自动的绑定界面和数据，new Vue会自动将data中的初始值，替换到界面中所有{{变量}}的位置，只要data中的变量值发生改变，new Vue就会自动将新的变量值，更新到页面中{{变量}}的位置

new Vue()中包含两大子系统（响应系统、虚拟DOM树）

①响应系统：

​ new Vue()刚创建的时候，需要先引入data对象，并自动为data中每个变量添加访问器属性保护起来，所有访问器属性都直接隶属于new Vue对象。如果想要修改data中的变量，可以通过"this.变量名"的方式进行访问。但是，其实都是访问的变量的set访问器，而且，new Vue()在每个set访问器中都添加了通知机制，只要修改变量，就会自动调用访问器，只要调用了访问器，就会触发通知。

②虚拟DOM树：

​ new Vue()通过扫描真是的DOM树，形成一个简化版的DOM树模型，仅包含可能变化的属性，那些固定不变的变量和属性，一点都不包含。因为真实的DOM树太大了，包含很多无关的元素和属性，不便于快速的查找，所以我们需要使用虚拟DOM树

虚拟DOM树优点：

1. 小，遍历极快。而且只修改变化的元素，影响的范围小。

2. 封装了重复的增删改查操作，极大的减少了代码量。

3. 效率高，仅修改个人可能受影响的元素和可能受响应的属性。多数无关的元素和属性，不受影响。

七、vue语法

1、绑定语法

绑定语法就是专门为html 添加变量，html本身不支持变量，但是html中的个别内容有需要根据程序中的变量自动变化，当html中的任何一个位置的内容，需要根据程序中的变量值自动变化的时候，就要绑定语法。

语法：{{变量/js表达式}}

双花括号语法，也叫做大胡子语法，官方名字：MUstache，补缺、插值的意思。

大胡子语法：用于特定的Model数据绑定到视图中，当Model数据发生了改变，所有用到显示数的{{}}，里面的数据都会自动更新。首次加载的时候，new Vue()会自动找到{{}}，用程序中的变量值，替换{{变量}},当程序中的变量被修改的时候，再次扫描虚拟DOM树，找到这里，用新值自动替换

{{}}的用法：

1. Model变量名

{{showMessage}}

data:{

showMessage:“Hello World”

}

2. 算数/比较/逻辑/三目运算(过滤器代替)

算数：{{10+20}}

比较：{{10>20}}

逻辑：{{true&&false}}

三目运算：{{sex==0?“女”:“男”}}

data:{

sex:0

}

3. 方法的调用(计算属性代替)

{{getString()}}

methods:{
getString(){return “xxxx”}

}

4. 对象属性的访问

{{obj.name}}

data:{

obj:{

​ name:“xxx”,

​ price:“￥300”

}

}

5. 数组下标访问

{{arr[1]}}

data:{

arr:[1,2,3,4,5]

}

6. 字符串的拼接

{{模板字符串}}

{{${str} World}}

data:{

str:“Hello”

}

7. 创建对象

{{new Date().toLocaleString()}}

注意：{{}}内只要有返回值，合法的js变量和表达式都行，但是{{}}内部能出现逻辑结构if或for以及没有返回值的js表达式

{{}}的问题：不能使用动态绑定属性

2、指令

什么是指令？

​ Directive，指令就是为添加新功能的自定义属性，因为本身是静态的，不具有任何的动态生成能力，所以当我们想要在中使用程序的一些特征的时候，例如：“分支”，“循环”等，就需要指令

（1）v-bind：在vue中，元素的属性不能使用{{}}进行绑定，必须使用“v-bind：”或“：”来绑定

注：“：”是"v-bind:"的缩写

普通绑定：

<any v-bind:属性="变量或js表达式">

动态绑定：

<any v-bind:[attr]="变量或js表达式">

(2)控制元素的显示/隐藏

​ 1.控制一个元素的显示/隐藏

​ v-show:

<any v-show="条件表达式">

提示：如果成立，则显示，如果不成立隐藏

原理：使用css中的display来控制元素 的显示/隐藏

​ 2.两个元素，二选一显示

v-if

v-else

<any v-if="判断条件">
<any v-else>

​ 提示：v-if会自动判断条件，如果条件成立，则显示第一个元素，v-else的元素不再显示，否则隐藏第一个元素，显示第二个元素

(3)多个元素，多选一显示

v-if

v-else-if

…

v-else

<any v-if="判断条件1">
<any v-else="判断条件2">
...
<any v-else="判断条件n">

​ 提示：如果v-if的条件成立，就显示v-if的元素，之后的元素不再显示，如果v-if的条件不成立，则按顺序判断每个v-else-if的条件，哪个成立就选哪个，其他元素不再显示。如果所有的条件都不满足，就显示v-else

​ 原理：v-if,v-else-if,v-else 不是用display:none进行隐藏/显示的，而是彻底的删除不显示的元素，元素必须是紧邻的兄弟元素，中间不能阻隔任何其他的元素。

反复生成多个相同结构的元素

v-for：会自动遍历数组/对象/字符串中的每个元素， 每遍历一个元素，就会自动创建元素对象

<any v-for="(elem,i) of 数组/对象/字符串" :key="i">

elem:变量名

i:下标

:key 是在内存中为每个html元素副本添加一个唯一标识。 如果每个html元素副本都有唯一的标识，则每次修改数组元素的时候，v-for只需要找到受影响的那一个html元素副本，修改即可。其余不受影响的html元素副本保持不变–效率高

面试题：v-for为什么一定要加key？

案例：

<div id="app">
		<div>
			<input type="text"  @keyup.enter="add" v-model="name"/>
			<button @click="add">添加</button>
		</div>
		<ul>
			<li v-for="(item,i) in list" :key="item.id">
				<input type="checkbox"/>{{item.name}}
			</li>
		</ul>
	</div>

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				name:'',
				newId:3,
				list:[{
					id:1,
					name:'张三'
				},{
					id:2,
					name:'李四'
				},{
					id:3,
					name:'王五'
				}]
			},
			methods:{
				add(){
					this.list.unshift({
						id:++this.newId,
						name:this.name
					})
					this.name=''
				}
			}
		})
	</script>

​ 答：这个代码就能很好的解释， 加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果。如果不加key就不具有唯一性。

注意：

1、v-for 一定写在重复生成的元素上，而不是写在父元素上

2、如果我们不关心下标，只关心元素，可以简写

<any v-for="elem of 数组/对象/字符串">

3、of和in是可以相互代替的，用法完全一样，vue中v-for统一了js中for of 和for in ，即可以遍历索引数组，又可以遍历对象。

4、of会自动取出数组/集合中的每个元素的值和下标，保存到右边的变量中，如果of 后是数字，那么of会从1开始迭代增到目标数字

(4)v-on

1、普通绑定

<any v-on：事件名="处理函数">

2、动态绑定

<any v-on:[变量名]="处理函数">
data:{
	变量名:事件名
}

注：v-on:可以缩写@

提示：无论是data中的变量，还是methods中的函数，只要进入new Vue() 以后，都直接隶属于new Vue()，所以在new Vue() 的直属方法中，使用this可以直接调用变量

问题：如果我们将button按钮换成a标签，href="…"属性，默认会改变我们的地址栏或跳转到其他页面

解决问题：（阻止默行为）

阻止默认行为

解决问题

1、js中

实参：event

function(e){

​ e.prventDefault();

}

2、vue中

实参：$event

fn(e){

​ e.preventDefault();

}

提示：

$event是vue对象内置,是将DOM事件对象e封装后得到的产物，是现成的内置变量，可以直接使用，只要想要vue的处理函数中使用事件对象，就必须在html绑定的调用方法中传入$event

3、使用事件修饰符

事件修饰符会自动实现原Dom事件对象操作的特殊属性，当需要修改事件的行为时，就要使用事件修饰符

.prevent

使用.prevent代替内置变量$event下的e.preventDefault()，阻止默认行为

.stop

使用.stop代替内置变量$event下的e.stopPropagtion(),取消冒泡/蔓延

<a href="#" @click.prevent="xxx">

多个修饰符可以同时修饰同一个事件，而且与顺序无关

（5）v-html绑定html片段

v-html专门用于加载一段html的代码片段，功能类似于js中的innerHTML()

<any v-html="变量名">
data:{
	变量名:"<h2>Hello World</h2>"
}

(6) v-cloak：防止用户短暂看到{{}}的语法

v-cloak让元素进行默认隐藏，直至内容准备就绪的时候，才会自定的显示出来，可以防止用户短暂看到{{}}内的语法

<any v-cloak>{{message}}</any>

手动添加一个属性选择器，隐藏所有加v-cloak的元素

[v-cloak]{display:none;}

原理：在程序开始的时候，需要由我们手动添加display:none，准备就绪后，vue会自动将v-cloak属性删除，这个时候，也就删除了display:none属性，元素也就能显示出来了

(7)v-text:是{{}}的等效指令，只不过v-text是写在属性中的，而{{}}是写在内容中的给需要隐藏的元素添加v-text，v-text的后面就是我们要显示的内容

<any v-text=`${变量名}`>

(8)保护{{}}中的内容不被编译

v-pre:保护当前元素中的语法，不会被绑定渲染

<any v-pre>{{info}}</any>
data:{
	info:"你猜我再不在"
}

(9)唯一不变元素

v-once:当前元素的{{}}语法对应的数据只能绑定一次，以后即使模型数据发生改变，也不会再改变了

<any v-once>{{name}}</any>
data:{
	name:"jack"
}

​ 原理：只在首次加载的时候，一次性的将数据模型数据显示在当前元素中，不会将元素注册到监听队列中。正常情况下，watch中，有一个队列，维护这每个数据变量和页面之间的对应关系。每次数据模型发生改变后，都会通知watch，watch会遍历受到该数据变量影响的元素，并逐个的修改他们。通过减少监视的元素个数，可以优化页面绑定的效率

案例：

<!-- 一、编写页面 -->
		<!-- 界面中所有的元素都必须放在唯一的父元素内，父元素必须要有id名，便于查找 -->
		<div id="app">
			<!-- 将输入的内容的保存到变量中，使用{{变量名}}来进行占位 -->
			<!-- <h2>{{showMessage}}</h2>
		    <h3>{{10+20}}</h3>
			<h3>{{10>20}}</h3>
			<h2>{{sex==0?"女","男"}}</h2>
			<h3>{{getString()}}</h3>
			<h3>书名：{{book.bname}}</h3>
			<h3>价格：{{book.price}}</h3>
			<h3>{{arr[n]}}</h3>
			<h3>{{`${str}`World}}</h3> -->
			<!-- <h4 v-bind:class="fontColor">{{new Date().toDateString()}}</h4>
			<h4 v-bind:class="getClass()">{{new Date().toDateString()}}</h4>
			<h2 v-bind:[attr]="fontBg">hello</h2> -->
			
			<!-- <h2 v-if="day==1">
				v-if显示
			</h2>
			<h2 v-else-if="day==2">v-else-if显示</h2>
			<h2 v-else="">v-else显示</h2> -->
			<!-- 影藏 -->
			<!-- <h2 v-show="false"> hello</h2> -->
			<!-- 两个隐藏、显示 -->
			<!-- <h2 v-if="day>=1">5000</h2>
			<h2 v-else="">7000</h2> -->
			<!-- 为button按钮绑定点击事件，向控制台输出一段话 -->
			<!-- <button type="button" @click="show">输出</button> -->
			<!-- v-for -->
			<!-- <table>
				<tr>
					<td>书名</td>
					<td>价格</td>
				</tr>
				<tr v-for="(elem,i) of book" :key="i">
					<td>{{elem.bname}}</td>
					<td>{{elem.price}}</td>
				</tr> 
				</table>-->
				<!-- v-on -->
				<!-- <a type="button" @click.prevent="alertMsg($event)">输出</a> -->
				<!-- v-html -->
				<div >
					{{hello}}
				</div>
			
		</div>

<script src="../js/vue.js" type="text/javascript"></script>

<script type="text/javascript">
			//第二步：在js中定义数据对象
			//所有的界面所需要的变量都定义在data对象中，
			//var data={变量名1:变量值1,变量名2:变量值2,...变量名n:变量值n}
			var data={
				hello:"<h2>helloworld</h2>",
				day:2,
				attr:"class",
				fontBg:"fontBg",
				sex:0,
				showMessage:"hello vue!",
				//
				book:[{
					bname:"vue.js",
					price:"300"
				},{
					bname:"javascript",
					price:"500"
				}],
				str:"hello",
				fontColor:"fontColor",
				name:"今天很冷"
			}
			//第三步：在js 中创建vue对象，将界面和数据绑定起来
			//创建vue类型的ViewModel对象
			var vm=new Vue({
				//el:id选择器，查找页面中需要监控的父元素，并且进行绑定；后面可以跟上任意选择器，但是一个viewModel对象只能绑定一个dom元素，即使“选择器”可以找到多个元素，也只能绑定一个一个符合条件的dom元素。所以一般用id选择器。
				el:"#app",
				//data:存在界面所需要的变量，让new vue同时监控data数据
				data,
				//methods:所有界面所需要的事件处理函数都有放在一个名为methods的对象属性中。
				//自动打撒
				methods:{
					//定义一个函数show
					show(){
						console.log("hello vue!")
					},
					getString(){
						return "我们每天刷题"
					},
					getClass(){
						return this.fontColor
					},
					alertMsg(e){
						//阻止默认行为
						// e.preventDefault();
						console.log(this.name)
					}
				}
			})
		</script>