Vue.js框架详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45615602/article/details/103068140

VUE到底是什么 view

Vue最火的前端框架 React最流行的前端框架(React 除了开发网站之外还可以开发app Vue也可以进行app 借助其他工具)
Vue.js React.js Angular.js 作为前端的三大主流框架
Vue就是构建用户界面(UI)的框架，只关注视图层(MVC),容易上手，便于整合
前端主要工作就是MVC中V , 和界面打交道，来制作前端页面

学习流行框架

企业讲究效率流行框架可以提高开发效率

开发效率的发展历程

原生js —1-----> jquery之类的类库 --------2------------> 前端模板引擎 --------3------- > 框架

1
- 1.简化代码量
- 2.jq帮助我们解决兼容性问题
2
- 1.简化代码量
- 2.更好的帮助我们去渲染数据
3
- 1.能够较少很多DOM操作
- 2.提高渲染效率
- 3.双向数据绑定的概念
- 核心目的让程序员的关注点旨在数据的业务逻辑上不需要关心DOM如何渲染的

类库和框架的区别

框架: 软件的半成品是一套完整的解决方案对项目侵入性较大

类库提供某一部分功能对项目侵入性较小

Vue中的指令

v-cloak
v-text 默认解决闪烁问题
v-html
v-bind 属性绑定机制缩写是:
v-on 事件绑定机制缩写是@

例：

<div id="app">
		<p v-cloak>{{msg}}</p>
		
		<p v-text="msg1">======</p>
		
		<p v-html="msg2"></p>
		<!-- v-bind 绑定属性 简写：-->
		<input type="button" value="搜索" v-bind:title="myTitle">
		<br>
		<!-- v-on 事件绑定机制 简写@-->
		<input type="button" value="事件1" :title="myTitle" v-on:click="show('Hello')">


	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'123',
				msg1:'啊啊啊啊啊啊啊啊啊',
				msg2:'<h2>今天天气真好</h2>',
				myTitle:'明天天气真好'
			},
			//methods属性中定义了当前Vue实例中所有可用的方法
			methods:{
				show:function(){
					alert('Hello');
				}
			}
		})
	</script>

事件修饰符：

.stop 阻止冒泡
.prevent 阻止默认行为
.capture 事件捕获
.self 实现只有点击当前元素时，才会触发事件处理函数
.once 只执行一次事件处理函数先后顺序无关紧要

Vue指令之`v-model`和`双向数据绑定`

例：

	<!-- v-bind只实现了数据的单向绑定 从M到V 无法实现数据的双向绑定 -->
	<!-- v-model实现了数据的双向绑定，必须和表单元素结合使用 -->
	<div id="app">
		<input type="text" v-bind:value="msg">
		<br />
		<input type="text" v-model="msg">
	</div>
	<script>
		var vm =new Vue({
			el:'#app',
			data:{
				msg:'今天天气真好！！！'
			}
		})
	</script>

在Vue中使用样式

使用class样式

数组
数组中使用三元表达式
数组中嵌套对象
直接使用对象

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>class样式绑定</title>
	<script src="vue-2.4.0.js"></script>
	<style type="text/css">
		.red{
			color: red;
		}
		.thin{
			font-weight: 200;
		}
		.i{
			font-style: italic;
		}
		.active{
			letter-spacing: 0.5em;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 第一种方式 直接传递一个数组 注意：class必须用v-bind修饰 -->
		<!-- <h1 :class="['thin','red']">今天天气真好</h1> -->

		<!-- 第二种 在数组中加上三元运算符 -->
		<!-- <h1 :class="['thin','red',flag?'active':'']">今天天气真好</h1>
		 -->

		<!-- 第三种 将class属性值抽取到data中，方便阅读 -->
		<!-- <h1 :class="arr">今天天气真好</h1> -->

		<!-- 第四种 class等于一个对象 -->
		<h1 :class="obj">今天天气真好</h1>
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				flag:true,
				arr:['thin','red',this.flag?'active':''],
				obj:{
					red:true,
					i:true,
					thin:false,
					active:true
				}
			},
			methods:{}
		})
	</script>
</body>
</html>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象
将样式对象，定义到 data 中，并直接引用到 :style 中
在 :style 中通过数组，引用多个 data 上的样式对象

例：

<div id="app">
		<!-- <h1 :style="style1">今天天气真好</h1> -->
		<h1 :style="[style1,style2]">今天天气真好</h1>
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				style1:{
					//属性名如果没有中横线就可以不加引号
					color:'red',
					'letter-spacing': '0.5em'
				},
				style2:{
					'font-style':'italic'
				}
			},
			methods:{}
		})
	</script>

Vue指令之`v-for`和`key`属性

迭代数组
迭代对象中的属性
迭代数字

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

例1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for</title>
	<script src="vue-2.4.0.js"></script>
</head>
<body>
	<div id="app">
		<!-- {{arr[0]}}
		{{arr[1]}}
		{{arr[2]}}
		{{arr[3]}}
		{{arr[4]}}
			 -->

		<!-- <p v-for="item in arr">
			值为：{{item}}
		</p> -->

		<p v-for="(item,index) in arr">
			值为：{{item}} 索引为：{{index}}
		</p>
	</div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				arr:[1,2,3,4,5]
			},
			methods:{}
		})
	</script>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-for</title>
	<script src="vue-2.4.0.js"></script>
</head>
<body>
	<div id="app">
		<!-- 注意：在遍历对象的键值对时，有三个值分别是val key index -->
		
		<!-- <p v-for="item in obj">
			{{item}}
		</p> -->

		<p v-for="(val,key,i) in obj">
			{{item}}
			值是:{{val}} 键是：{{key}} 索引是：{{i}}
		</p>
	</div>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				obj:{
					id:1,
					name:'张三',
					gender:'男'
				}
			},
			methods:{}
		})
	</script>
</body>
</html>

Vue指令之`v-if`和`v-show`

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-if v-show</title>
	<script src="vue-2.4.0.js"></script>
</head>
<body>
	<div id="app">
	<!-- v-if的特点 每次都会去删除或者创建元素 -->
	<!-- v-show的特点 不会去删除元素而是切换display样式 -->

	<!-- 应用场景 
		v-if 切换时消耗性能较高
		v-show  初始化消耗性能较高

		如果元素涉及到频繁的切换 不用v-if 用v-show
		如果元素可能无法显示被用户看见  最好用v-if
	-->
		<input type="button" value="按钮一" @click="fun1">
		<input type="button" value="按钮二" @click="fun2">
		<h3 v-if="flag">今天天气真好</h3>
		<h3 v-show="flag1">明天天气真好</h3>
	</div>
	<script>
		var vm= new Vue({
			el:'#app',
			data:{
				flag:false,
				flag1:true,
			},
			methods:{
				fun1(){
					this.flag=!this.flag;
				},
				fun2(){
					this.flag1=!this.flag1;
				}
			}
		})
	</script>
</body>
</html>