VUE_24kb min+gzip-CSDN博客

本文链接：https://blog.csdn.net/zhujunyu0814/article/details/89503658

VUE

Vue.js 提供了 MVVM (Model-View-ViewModel 的简写)数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
MVVM: 它采用双向绑定（data-binding）：View 的变动，自动反映在
ViewModel，反之亦然。
Vue 框架有以下特点:

简洁	HTML 模板 + JSON 数据。
数据驱动	自动追踪依赖的模板表达式和计算属性。
组件化	用解耦、可复用的组件来构造界面。
轻量	~24kb min+gzip，无依赖。
快速	精确有效的异步批量 DOM 更新。
模块友好	通过 NPM 或 Bower 安装，无缝融入你的工作流。

一、Vue 基础语法

Vue
渐进式框架，采用自底向上的增量开发，Vue 关注视图层
如何使用Vue
1）、引入Vue的核心JS文件
2）、准备Dom结构
3）、实例化组件
通过el属性，挂载元素，绑定id为app的html元素
通过data属性，定义数据，可以在html代码段中显示的数据
4）、获取数据
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基础语法</title>
		<!--1、引入Vue的核心JS文件，Vue会被当做全局变量使用-->
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--2、准备Dom结构-->
		<div id="app">
			<!--双花括号取值-->
			{{msg}}
		</div>	
		<script type="text/javascript">
			/*3、实例化组件*/
			var app = new Vue({
				el:"#app", // el：element的简写。挂载元素，绑定id为app的html元素
				data:{ // 定义数据，可以在html代码段中显示的数据
					msg:"Hello Vue！"					
				}
			});
		</script>
	</body>
</html>

二、指令
1）文本渲染
1、v-text
显示数据，响应式（默认）
简写：{{}}
2.v-once:
数据只会更新一次，下次更新数据不影响dom
3.v-html:
可以显示html元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本渲染指令</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<div v-text="msg"></div>
			<!--简写-->
			<div>{{msg}}</div>
			<hr />
			<div v-once>{{txt}}</div>
			<hr />
			<div>{{tpl}}</div>
			<div v-html="tpl"></div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				msg:"Hello",
				txt:"Hello Vue",
				tpl:"<h2>上海</h2>"
			}
		});
	</script>
</html>

2）class 与 style 绑定
1.v-bind
v-bind指令可以绑定元素的属性，动态给属性赋值。
比如：v-bind:class、v-bind:style、v-bind:href形式。
v-bind的简写形式：
v-bind:属性名=“组件中定义的数据”
简化为 :
:属性名=“组件中定义的数据”
上边的形式可以改写成：
:class、:style、:href

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bind指令</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<div title="你好">Hello</div>
			<hr />
			<div v-bind:title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
			<div :title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
			<hr />
			<img :src="src"/>
			<a :href="href">Vue</a>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				msg:"Vue is very good",
				src:"https://cn.vuejs.org/images/logo.png",
				href:"https://cn.vuejs.org/"
			}
		});
	</script>
</html>

2.class绑定
通过 v-bind:class 一个对象，以动态地切换 class：
class绑定
绑定DOM对象的class样式有以下几种形式：
绑定多个class
使用对象classObject绑定
使用数组classList绑定
绑定的对象可以同时切换多个class

	对象和数组绑定的区别：
				对象可以控制class的添加和删除；数组不能控制删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>class绑定</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<div class="red green item">Vue</div>
			<hr />
			<div :class="{red:true,green:false,item:true}">Vue</div>
			<div :class="classObj">Vue</div>
			<div :class="classList">Vue</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				classObj:{
					red:true,
					green:false,
					item:true
				},
				classList:["red","item","test"]
			}
		});
	</script>
</html>

3、style 绑定
绑定形式跟 class 一致：

使用内联对象 Object
直接传入对象 styleObject
使用数组对象 styleList

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>style绑定</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<div style="color:red;font-size: 30px;">我是文本</div>
			<div :style="{'color':'red','font-size':'30px'}">我是文本</div>
			<div :style="styleObj">我是文本</div>
			<div :style="[styleObj,styleObj2]">我是文本</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				styleObj:{
					'color':'red',
					'font-size':'30px',
					'font-family':'楷体'
				},
				styleObj2:{
					'background':'pink'
				}
			}
		});
	</script>
</html>

3）事件处理
1、监听事件
用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
v-on:click，简化形式：@click
绑定事件
语法：
v-on:事件名
简写：
@事件名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听事件</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			count:{{count}} &nbsp;
			<button v-on:click="count++">add</button>
			<button @click="count--">down</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				count:0
			}
		});
	</script>
</html>

2、方法事件处理器
绑定事件
语法：v-on:事件名
简写：@事件名

		方法事件处理器
			一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。
			需要在methods属性中定义方法，然后v-on引用对应相关的方法名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件方法</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			count:{{count}} &nbsp;
			<button @click="addCount()">add</button>
			<button @click="downCount">add</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				count:0
			},
			methods:{
				addCount:function(){
					this.count++;
				},
				downCount:function(){
					if(this.count>0){
							this.count--;
					}
				
				}
			}
		});
	</script>
</html>

3、$event 对象

在事件处理函数中访问 DOM 原生事件 event 对象，可以使用特殊变量$event 对象传
入。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>$event</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			count:{{count}} &nbsp;
			<button @click="addCount($event)">add</button>
			<button @click="downCount">down</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				count:0
			},
			methods:{
				addCount:function(e){
					console.log(e);
					console.log(e.target.tagName);
					this.count++;
				},
				downCount:function(){
					this.count--;
				}
			}
		});
	</script>
</html>

4、事件修饰符
在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为）或 event.stopPropagation()（阻止事件冒泡到父元素）是非常常见的需求。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。

stop ：阻止event冒泡，等效于event.stopPropagation()
prevent ：阻止event默认事件，等效于event.preventDefault()
capture ：事件在捕获阶段触发
self ：自身元素触发，而不是子元素触发
once ：事件只触发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>$event</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<div @click="father">
				<div @click="child">child</div>
			</div>
			<hr />
			<!--stop ： 阻止event冒泡，等效于event.stopPropagation(-->
			<div @click="father">
				<div @click.stop="child">child</div>
			</div>
			<hr />
			
			<!--prevent ： 阻止event默认事件，等效于event.preventDefault()-->
			<a href="http://www.baidu.com" @click.prevent="prevent1">百度</a>
			<hr />
			
			<!--capture ： 事件在捕获阶段触发-->
			<div @click.capture="father">
				<div @click.capture="child">child</div>
			</div>
			
			<!--self ： 自身元素触发，而不是子元素触发-->
			<hr />
			<div @click.self="father">
				father
				<div @click="child">child</div>
			</div>
			<hr />
			
			<!--once ： 事件只触发一次-->
			<div @click.once="child">child</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{	
			},
			methods:{
				father:function(){
					console.log("父元素...");
				},
				child:function(){
					console.log("子元素...");
				},
				prevent1:function(){
					console.log("666....");
				}
			}
			
		});
	</script>
</html>

5、键值修饰符
键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键值修饰符</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<form action="http://www.shsxt.com">
				<input v-on:keyup.enter="submit">
				
				<!-- 只有在 keyCode 是 13 时调用 submit() -->
				<input v-on:keyup.13="enterKey">
			</form>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
			},
			methods:{
				enterKey:function(){
					console.log("enter...");
				}
				
			}
			
		});
	</script>
</html>

4）条件渲染
1、v-if
根据 if 绑定值得 true 或者 false 进行渲染
2、v-else
当if条件不满足时，执行（要结合v-if一起使用）
3、v-else-if
当满足条件时执行（要结合v-if一起使用）
4、v-show
满足条件时显示，不满足隐藏
v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>条件渲染</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="flag">你能看见我！</div>
			&nbsp; {{flag}}
			<hr />
			
			<h3 v-if="age==18">
				张三是18岁
			</h3>
			<h3 v-else>
				张三不是18岁
			</h3>
				
			<hr />
			<h3 v-if="age>18">
				成年啦
			</h3>
			<h3 v-else-if="age==18">
				刚成年
			</h3>
			<h3 v-else>
				小屁孩
			</h3>
			
			<hr />
			<h4 v-show="flag">你能看见我！</h4>
		</div>
	</body>
	
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				flag:false,
				age:18
			}
		});
		
	</script>
</html>

5）列表渲染
1、v-for
可以把一组值进行列表渲染，语法形式： item in items，
items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
v-for也可以遍历对象，可以指定三个形参:
形式: v-for="(value, key, index) in object"

value: 对象的值
key: 对象的键
index: 遍历的索引

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表渲染</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in items">{{item.name}}</li>
			</ul>
			<hr />
			<ul>
				<li v-for="(item,index) in items">{{type}}--{{index}}--{{item.name}}</li>
			</ul>
			<hr />
			<ul>
				<li v-for="(value,key,index) in person">{{index}}--{{key}}--{{value}}</li>
			</ul>
		</div>
	</body>
	
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				type:"水果",
				items:[
	                {name:'西瓜'},
	                {name:'苹果'},
	                {name:'菠萝'}
           		 ],
           		 person:{
	                name:'Tim',
	                age:12,
	                love:'music'
	            }
			}
		});
		
	</script>
</html>

2、key 属性
用 v-for 渲染列表时，使用 key 属性给每个指定一个唯一的 ID 表示，那么可以在
下次数据渲染时，提高渲染速度。它默认用“就地复用”策略。
如果数据项的顺序被改变，重复 ID 的元素将会被再次使用，不会重新渲染。这个默认
的模式是高效的。需要用 v-bind 来绑定动态值 (在这里使用简写)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>key属性</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in items" :key="item.id">{{item.name}}</li>
			</ul>
			
		</div>
	</body>
	
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				items:[
	                 {id:1,name:'西瓜'},
	                 {id:2,name:'苹果'},
	                 {id:3,name:'菠萝'}
           		 ],           		 
			}
		});
	</script>
</html>

3、取值范围
v-for 也可以指定整数，用来重复多次使用模板。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>取值范围</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h3 v-for="index in 10">{{index}}</h3>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#root"
			
		});
	</script>
</html>

6）表单输入绑定
v-model
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。
单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单输入绑定</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<!--文本框-->
			<input type="text" v-model="txtMsg" placeholder="请输入用户名..." />
			文本值：{{txtMsg}}
			
			<br /><hr /><br />
			<!--复选框-->
			<input type="checkbox" v-model="ck" /> &nbsp;选中状态：{{ck}}
			<br />
			<input type="checkbox" value="HTML5" v-model="lesson"> <label>HTML5</label>
		    <input type="checkbox" value="JavaScript" v-model="lesson"> <label>JavaScript</label>
		    <input type="checkbox" value="Vue" v-model="lesson"> <label>Vue</label>
		    <p>多选结果：{{lesson}}</p>
		    
		    <br /><hr /><br />
		    <!--单选框-->
		    <input type="radio" value="yes" v-model="love"><label>喜欢</label>
    		<input type="radio" value="no" v-model="love"><label>不喜欢</label>
    		<input type="radio" value="all" v-model="love"><label>都喜欢</label>
   			<p>是否喜欢: {{love}}</p>
   			
   			<br /><hr /><br />
		    <!--下拉框-->
   			<select v-model="selected">
		        <option>西瓜</option>
		        <option>苹果</option>
		        <option>菠萝</option>
		    </select>
		    <h3>结果: {{selected}}</h3>
			
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#root",
			data:{
				txtMsg:"",
				ck:"",
				lesson:[],
				love:"",
				selected:""
			}
		});
	</script>
</html>

下拉框绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单输入绑定</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<select v-model="selected">
				<option v-for="item in list" :value="item.value">{{item.text}}</option>
			</select>
			
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#root",
			data:{
				 list:[
	                {text:'西瓜', value:'1'},
	                {text:'苹果', value:'2'},
	                {text:'菠萝', value:'3'}
	             ],
	             selected:3
			}	
		});
	</script>
</html>

修饰符
使用v-model绑定数据后，可以使用修饰进行数据处理：

.lazy：绑定数据默认实时更新，lazy可以在onChange触发
.number：返回数字类型的值，转换不成返回NaN
.trim：去除数据的前后空格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>修饰符</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
		    <p><input type="text" v-model.lazy="name">{{name}}</p>
		    <p><input type="text" v-model.number="age"></p>
		    <p><input type="text" v-model.trim="cont"></p>
		    <p><button @click="show();">显示值</button></p>
		</div>
		
		<script type="text/javascript">
			
			new Vue({
				el:"#app",
				data:{
					name:"",
					age:"",
					cont:""
				},
				methods:{
					show:function(){
						console.log(this.name);
						console.log(typeof this.age);
						console.log(this.age);
						console.log(this.cont);
					}
				}
			});
		</script>
	</body>
</html>

三、组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封
装可重用的代码。
1、定义组件
Vue自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。
1）全局注册
使用Vue.component(tagName, options)来定义：

			注意：HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。
				即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用<my-component>进行引用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定义组件</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--使用组件-->
			<my-hello></my-hello>	
		</div>
	</body>
	
	<script type="text/javascript">w Vue({
			el:"#app"
		});

		/*定义全局组件*/
		Vue.component("my-hello",{
			template:"<h3>Hello Vue</h3>"
		});
		
	</script>
</html>