2020-07-05

Vue快速入门

字数统计: 2.8k字 | 阅读时长: 13分

一、Vue的简介

（一）什么是Vue

Vue 是一套用于构建用户界面的渐进式框架。

（二）框架和库的区别

1 2	1.就像vue 官网介绍的一样，vue是一个框架，那么前端框架和我们以前了解的jquery库之间有什么区别么？ 2.目前框架有哪些？库有哪些?

问题一：

1
2
3

1.库（插件）：是一种封装好的特定方法集合，对项目的侵入性较小，提供给开发者使用，控制权在使用者手中，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求

2.框架：是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目

问题二：

1 2	1.目前的流行前端框架Angular Vue React 2.流行的一些库jquery ，Zepto

二、为什么要使用Vue

问题：

1	相比以前的jquery 也可以开发web网页，那为什么还要去学习这些前端框架

解答：

1.从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作dom元素

2.vue 和上面这些不一样能够帮助我们减少不必要的DOM操作;提高渲染效
率;双向数据绑定的概念【通过框架提供的指令，程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】

Vue的特点

1.构建用户界面，只需要关系view层
2.响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作
3.简单易学，轻量快速
4.渐进式框架

补：什么是渐进式？
答：渐进式可以理解为，开发可以根据需求，逐渐递增所要的方式，但每个方,式有不是依靠行特别强。

三、第一个Vue程序

（一）使用Vue的步骤

1
2
3

1. 导入Vue的开发文件
2. 指定需要操作的元素
3. 创建Vue实例，编写操作

（二）代码实现

<html>
	<head>
		<title>Vue快速入门</title>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:'Hello Vue!'
				}
			})
		</script>
	</body>
</html>

代码解释：

Vue实例中的代码
1. el属性：用于和需要操作的元素建立联系。CSS中的大部分选择器都可以使用
2. data属性：用于提供元素中需要使用的数据

div元素中的代码：
在{{ XXX }}中指出需要从data中取出的数据

四、Vue中常用的指令

Vue中提供了很多用于操作元素的指令（其实就是属性）。

（一）内容绑定、事件绑定

v-text：用于绑定文本信息
v-html：用于绑定文本信息和渲染标签

v-on：用于绑定事件

v-text案例代码：

<html>
	<head>
		<title>HTML文档</title>
	</head>

	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<div id="app">
			<!-- v-text指令：用于设置标签的内容(textContent) -->
			<h2 v-text="message"></h2>	
			<h2 v-text="message">小黑</h2>
			<h2>{{ message }}小黑</h2>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					message:'你好呀!'
				}
			})
		</script>
	</body>
</html>

v-html案例代码：

<html>
	<head>
		<title>HTML文档</title>
	</head>

	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<div id="app">
			<p v-html="content"></p>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					//content:'Hello Vue!'
					content:'<a href="http://www.baidu.com" target="_blank">你好</a>'
				}
			})
		</script>
	</body>
</html>

v-on案例代码：

<html>
	<head>
		<title>HTML文档</title>
	</head>

	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<div id="app">
			<input type="button" value="v-on指令" v-on:click="doIt">
			<input type="button" value="v-on简写" @click="doIt">

			<h2>{{ food }}</h2>
			<input type="button" value="双击修改数据" @dblclick="changeData">
			<!-- 在VUE中，数据的改变页面会跟着改变。
				 因此，需要修改页面的数据时，不需要通过dom操作，
				 只需要修改数据即可，页面会自动修改 -->
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					food:"西蓝花炒蛋"
				},
				methods: {
					doIt:function(){
						alert("弹弹弹！");
					},
					changeData:function(){
						//在修改数据时，需要通过this关键字获取
						this.food += "敲好吃！";
					}
				},
			})
		</script>
	</body>
</html>

（二）显示切换、属性绑定

1
2
3

v-show：根据真假切换元素的显示状态
v-if：根据真假切换元素的显示，直接进行dom操作
v-bind：用于绑定属性（给属性赋值）

v-show案例代码：

<html>
	<head>
		<title>HTML文档</title>
	</head>

	<body>
		<div id="app">
			<!--v-show：根据真假切换元素的显示状态-->
			
			<!-- 真假值得获取：1、通过判断表达式的值 -->
			<img src="C:\Users\ASUS\Desktop\progrommer.jpg" v-show="1>2" >

			<!-- 真假值得获取：2、从data中获取 -->
			<img src="C:\Users\ASUS\Desktop\progrommer.jpg" v-show="isShow" >
			<input type="button" value="切换显示状态" v-on:click="changeIsShow"></input>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					isShow:true
				},
				methods:{
					changeIsShow:function(){
						this.isShow = !this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

v-if案例代码：

<html>
	<head>
		<title>HTML文档</title>
	</head>

	<body>
		<div id="app">
			<!-- v-if：根据真假切换元素的显示，直接进行dom操作-->
			<!-- 
			1、v-show：修改display属性，从而达到切换的效果
			2、v-if：进行dom操作，即：如果不需要显示就从dom树中删除，在需要显示的时候又添加到dom树中。
			  需要频繁操作时，不建议使用该方法，因为dom操作会影响性能
			  此外，v-if也能通过表达式来获取真假值
			-->
			<input type="button" value="切换显示状态" v-on:click="changeIsShow"></input>
			<img src="C:\Users\ASUS\Desktop\progrommer.jpg" v-if="isShow" >
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					isShow:true
				},
				methods:{
					changeIsShow:function(){
						this.isShow = !this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

v-bind代码：

<html>
	<head>
		<title>HTML文档</title>
		<style type="text/css">
			.active{
				border:1px solid red;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- v-bind指令：用于给属性赋值 -->
			<img v-bind:src="imgSrc">
			<img :src="imgSrc">
			<img :src="imgSrc" :title="imgTitle">

			<!-- 根据isActive的值来判断是否添加active类 -->
			<!-- 方式一 -->
			<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleIsActive">
			<!-- 方式二：添加active类与否，取决于isActive的值 -->
			<img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="toggleIsActive">
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					imgSrc:"C:/Users/ASUS/Desktop/progrommer.jpg",
					imgTitle:"程序员",
					isActive:false
				},
				methods:{
					toggleIsActive:function(){
						this.isActive = !this.isActive;
					}
				}
			})
		</script>		
	</script>
	</body>
</html>

（三）列表循环、表单元素绑定

1
2
3

v-for：遍历容器，并进行显示
v-on补充：传递参数、使用事件修饰符
v-model：用于和表单进行双向数据绑定

v-for案例代码：

<html>
	<head>
		<title>HTML文档</title>
	</head>

	<body>
		<!-- v-for指令：相当于先按照需要遍历的容器中数据个数进行标签拷贝，然后再分别将数据进行填充 -->
		<div id="app">
			<!-- 普通遍历 -->
			<ul>
				<li v-for="item in arr">{{ item }}</li>
			</ul>

			<!-- 遍历时获取索引 -->
			<ul>
				<li v-for="(item, index) in arr">{{ index }} {{ item }}</li>
			</ul>

			<!-- 遍历嵌套结构 -->
			<h3 v-for="item in vagetables">{{ item.name }}</h3>

			<!-- 集合中的数据发生改变时，遍历显示的数据也会自动改变 -->
			<h3 v-for="item in arr">{{ item }}</h3>
			<input type="button" value="添加数据" @click="add"></input>
			<input type="button" value="删除数据" @click="remove"/>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					arr:["北京","上海", "广州", "深圳"],

					vagetables:[
						{name:"西红柿"},
						{name:"土豆"}
					]
				},
				methods:{
					add:function(){
						this.arr.push("杭州");	//从后面添加
					},	
					remove:function(){
						this.arr.shift();		//从前面删除
					}
				}
			})
		</script>
	</body>
</html>