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 + ...
随机推荐
- HBuilder 连接小米手机
(1)手机与电脑未用USB数据线连接(嘿嘿,这一部大家估计都做到了,可略过) (2)电脑上需要安装电脑版的手机助手,帮助手机顺利连接上(用安卓手机联调的话可安装360手机助手,若用iPhone的话可安 ...
- BZOJ 4668 冷战（按秩合并并查集+LCA）
4668: 冷战 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 627 Solved: 303[Submit][Status][Discuss] D ...
- thttpd 在S3C6410的移植-web服务程序的应用
1. 在VMWare 虚拟机上将arm-linux-gcc 4.3.1配置好:2. 下载thttpd软件包并解压:3. 在thttpd根目录下运行: ./configure:4. ...
- Google浏览器怎样删除指定网址的网址提示
方法例如以下: Windows系统:按键盘上的"箭头下".按shift+delete(或者shift+回退): Mac系统:按fn+shift+delete. (此方法不须要清空b ...
- UVA10491 - Cows and Cars（概率）
UVA10491 - Cows and Cars(概率) 题目链接 题目大意:给你n个门后面藏着牛.m个门后面藏着车,然后再给你k个提示.在你作出选择后告诉你有多少个门后面是有牛的,如今问你作出决定后 ...
- jquery开发之代码风格
1,链式操作风格. (1) 对于同一个对象不超过三个操作的.可直接写成一行.代码例如以下: $("li").show().unbind("click"); (2 ...
- thinkphp5项目--个人博客（一）
thinkphp5项目--个人博客(一) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...
- 福建省赛--Problem E The Longest Straight(标记+二分)
Problem E The Longest Straight Accept: 71 Submit: 293 Time Limit: 1000 mSec Memory Limit : 327 ...
- String build-in function - len
len is a build-in function that returns the numbers of characters in a string: Since we started coun ...
- java9新特性-20-Javascript引擎升级：Nashorn
1.官方Feature 236: Parser API for Nashorn 292: Implement Selected ECMAScript 6 Features in Nashorn 2.使 ...