vue25---vue2.0变化
组件模版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}}
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue1.0.js"></script>
<script>
Vue.component('my-aaa',{//组件这种写法
template:'<h3>我是组件</h3><strong>我是加粗标签</strong>'
}); window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
}
});
};
</script>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.component('my-aaa',{//全局
template:'#aaa'
}); window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
}
});
};
</script>
</head>
<body>
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
</html>
组件定义方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
var Home={ //这是2.0组件
template:'#aaa'
}; //Vue.extend() Vue.component('my-aaa',Home);//全局 window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
}
});
};
</script>
</head>
<body>
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
var Home={ //这是2.0组件
template:'#aaa'
}; //Vue.extend() window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
components:{//局部
'aaa':Home
}
});
};
</script>
</head>
<body>
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
<div id="box">
<aaa></aaa>
{{msg}}
</div>
</body>
</html>
声明周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();//this是new Vue对象
}
},
beforeCreate(){
console.log('组件实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组件" @click="destroy">
{{msg}}
</div>
</body>
</html>
vue2.0:
bower info vue http://vuejs.org/
到了2.0以后，有哪些变化? 1. 在每个组件模板，不在支持片段代码
组件中模板:
之前:
<template>
<h3>我是组件</h3><strong>我是加粗标签</strong>
</template>
现在: 必须有根元素，包裹住所有的代码
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template> 2. 关于组件定义
Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——--------废弃 Vue.component(组件名称,{ 在2.0继续能用
data(){}
methods:{}
template:
}); 2.0推出一个组件，简洁定义方式：
var Home={
template:'' -> Vue.extend()
}; 3. 生命周期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
现在: (创建----编译-----更新------销毁)
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
vue25---vue2.0变化的更多相关文章
- vue2.0变化
之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...
- vue2.0变化(转载)
原文链接:https://www.cnblogs.com/itbainianmei/p/6062249.html 1.每个组件模板template,不再支持片段代码 之前: <template& ...
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- VUE2.0不可忽视的很多变化
今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也 ...
- Vue2.0中v-for迭代语法变化（key、index）【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0以后，有哪些变化
最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
随机推荐
- NOIp2018模拟赛四十五~？？
欠的太多,咕了咕了 最近复赛临近时间紧,就不每次都写感想和题解了,只写点有意义的好题
- POJ-1276 Cash Machine 多重背包 二进制优化
题目链接:https://cn.vjudge.net/problem/POJ-1276 题意 懒得写了自己去看好了,困了赶紧写完这个回宿舍睡觉,明早还要考试. 思路 多重背包的二进制优化. 思路是将n ...
- [codevs3657]括号序列
题目大意:有一列只有'(',')','[',']'构成的括号序列,求在序列中至少加上多少括号,能使该序列合法. 解题思路:区间dp. 我们以$f[i][j]$表示把区间$[i,j]$添成合法括号所需的 ...
- suse 11 sp4 bond 网卡 mode0模式
开启网卡: ifocnfig eth1 up 点亮网卡ethtool eth1 db2:~ # cat /etc/sysconfig/network/ifcfg-bond0 DEVICE='bond0 ...
- Centos7&docker-ce&compose&wordpress
如题,最近帮人装个WordPress,想起来用docker方便,这里做个记录. 原文:https://my.oschina.net/finchxu/blog/2877580 因为docker要求lin ...
- 通过唯一ID实现简单的日志跟踪实现
在实际项目中,通知我们需要记录一些日志,方便问题核查.但是日志多了就很容易混乱,请求,响应,执行中的日志无法对应,这时就需要为请求进行标记唯一ID来进行跟踪. /** * 记录请求日志 * * Cla ...
- POJ 1975 Median Weight Bead
Median Weight Bead Time Limit: 1000ms Memory Limit: 30000KB This problem will be judged on PKU. Orig ...
- Java 8 Stream API具体解释
Java 8 Stream API具体解释 一.Stream API介绍 Java 8引入了全新的Stream API,此Stream与Java I/O包里的InputStream和OutputStr ...
- 操作指定文件格式的10个Perl CPAN模块
在Perl开发中,非常可能会碰到一些不同格式的文件--XML.PDF.CSV及RSS文件等,和一些不同的二进制数据格式.Perl应用程序须要操作这些文件,对它们进行读写. 此时.能够求助于全面Perl ...
- XMPP添加删除好友
在现阶段的通信服务中.各种标准都有,因此会出现无法实现相互连通,而XMPP(Extensible Message and presence Protocol)协议的出现,实现了整个及时通信服务协议的互 ...