首页 > 代码库 > vue1.0 与 Vue2.0的一些区别 及用法
vue1.0 与 Vue2.0的一些区别 及用法
1.Vue2.0的模板标记外必须使用元素包起来；
eg：Vue1.0的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://www.mamicode.com/js/vue1.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="http://www.mamicode.com/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="http://www.mamicode.com/js/vue2.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="http://www.mamicode.com/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="http://www.mamicode.com/js/vue2.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="http://www.mamicode.com/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="http://www.mamicode.com/js/vue1.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="http://www.mamicode.com/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的一些区别 及用法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。