vue1.0 與 Vue2.0的一些區別及用法

時間 2019-11-11

標籤 vue1.0 vue vue2.0 一些區別用法简体版

原文原文鏈接

1.Vue2.0的模板標記外必須使用元素包起來；javascript

eg：Vue1.0的寫法html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue1.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			window.onload = function(){
				Vue.component("aaa",{
					template:'<h3>我是h3</h3><strong>我是strong標籤</strong>'
				})
				new Vue({
					el:"#box",
					data:{
						msg:"hello world"
					}
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
			<aaa></aaa>
			{{msg}}
		</div>
	</body>
</html>

　　Vue 2.0的寫法vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue2.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			window.onload = function(){
				Vue.component("aaa",{
					template:'<div><h3>我是h3</h3><strong>我是strong標籤</strong></div>'
				});
//				Vue2.0不支持片斷代碼,須要用一個盒子將其包起來
				new Vue({
					el:"#box",
					data:{
						msg:"hello world"
					}
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
			<aaa></aaa>
			{{msg}}
		</div>
	</body>
</html>

　　2. Vue2.0沒有那些自帶的過濾器；得自定義且傳參的方式不一樣java

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue2.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			window.onload = function(){
				Vue.filter("toDou",function(input,a,b){
					alert(a+":"+b)
					return input>10 ? ''+input:"0"+input;
				})
				new Vue({
					el:"#box",
					data:{
						iNum:9
					}
				
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
			<!--vue 2.0 傳參用括號-->
			{{iNum | toDou(1,2)}}
		</div>
	</body>
</html>

　3.Vue2.0 的生命週期spa

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue1.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:"#box",
					data:{
						msg:"hello world"
					},
					created:function(){
						alert("實例建立完畢")
					},
					beforeCompile:function(){
						alert('數據編譯以前')
					},
					compiled:function(){
						alert("數據編譯完成後")
					},
					ready:function(){
						alert("數據插入到文檔中")
					},
					beforeDestroy:function(){
						alert("數據銷燬以前")
					},
					destroyed:function(){
						alert("數據銷燬完成")
					}
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
			{{msg}}
		</div>
	</body>
</html>