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的一些区别 及用法的主要内容,如果未能解决你的问题,请参考以下文章