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

Posted 信尔奕骄

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue1.0 与 Vue2.0的一些区别 及用法相关的知识,希望对你有一定的参考价值。

1.Vue2.0的模板标记外必须使用元素包起来;

eg:Vue1.0的写法

<!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的写法

<!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没有那些自带的过滤器;得自定义   且 传参的方式不同

<!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 的生命周期

<!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生命周期----整理一

vue1.0+vue2.0实现选项卡

关于Vue2.0那些事_1

vue2.0s中eventBus实现兄弟组件通信

Vue2.0的变化———vue2.0动画的变化vue-2.0路由的变化

vue1.0中$index一直报错的解决办法