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的一些区别 及用法的更多相关文章

  1. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  2. vue1.0与vue2.0对于v-for的使用的区别

    vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...

  3. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  4. vue1.0＋vue2.0实现选项卡

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...

  5. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  6. Vue1.x 到Vue2.0的一个变化

    小弟初来乍到,写的不好的地方还望指正.谢谢各位! 废话不多说  进入正题: Vue1.x到2.0的一个变化 1. 在每个组件模板,不在支持片段代码  组件中模板: 之前:     <templa ...

  7. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  8. 用webpack2.0构建vue2.0单文件组件超级详细精简实例

    npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...

  9. vue使用中遇到的，以及vue1.0到vue2.0新手踩的坑

    最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...

随机推荐

  1. 使用vue-cli脚手架搭建项目，保存编译时出现的代码检查错误（ESLint）

    一.问题 出现这么写错误是什么原因呢?相信很多小白都会像我一样,第一次接触时有点二丈和尚摸不着头脑.其实是在你用vue-cli脚手架构建项目时用了ESLint代码检查工具,如下图 那么什么是ESLin ...

  2. ActiveMQ消息队列的搭建和使用

    一.安装ActiveMQ(部署在centos7) 1.ActiveMQ官网下载地址:http://activemq.apache.org/download.html 2.解压安装包:tar xvzf  ...

  3. jQuery 遍历 - closest() 方法

    jQuery 遍历参考手册 实例 本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...

  4. springcloud整合bus

    bus的使用主要是配合springcloud config部分来一起使用,并没有单独使用 首先建立服务端: <dependency> <groupId>org.springfr ...

  5. Python之freshman01

    列表与元组.字典 1.列表list:["ele1","ele2","ele3","ele0"] 列表是一组任意类型的值, ...

  6. C++_异常7-exception类

    C++异常的主要目的是为了设计容错程序提供语言级支持. 即异常使得在程序设计中包含错误处理功能更加容易,以免事后采取一些严格的错误处理方式. 异常的灵活性和相对方便性激励着程序员在条件允许的情况下在程 ...

  7. LeetCode268.缺失数字

    268.缺失数字 描述 给定一个包含 0, 1, 2, ..., n 中 n 个数的序列,找出 0 .. n 中没有出现在序列中的那个数. 示例 示例 1: 输入: [3,0,1] 输出: 2 示例 ...

  8. P3243 [HNOI2015]菜肴制作

    传送门 把时间看成数,菜肴看成位置 考虑一个位置填什么数很麻烦 考虑一个数放在什么位置 一开始我想的是,对于一个限制 $(a,b)$ ,从 $a$ 往 $b$ 连一条边,然后如果有解则所有的限制构成了 ...

  9. self_vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

    解决方案: 1.试一下 卸载npm uninstall webpack-dev-server,在安装这个npm i webpack-dev-server@2.9.7 2.删除node_modules目 ...

  10. KM算法（运用篇）

    传送门:KM算法---理解篇 最佳匹配 什么是完美匹配 如果一个二分图,X部和Y部的顶点数相等,若存在一个匹配包含X部与Y部的所有顶点,则称为完美匹配. 换句话说:若二分图X部的每一个顶点都与Y中的一 ...