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>

vue1.0 与 Vue2.0的一些区别 及用法

vue1.0 与 Vue2.0的一些区别及用法