关键词：
之前讲解的都是vue1.0的使用，现在我们开始介绍vue2.0，
这里的介绍是在vue1.0的基础上进行介绍的，主要介绍的是同vue1.0版本相比2.0的变化
vue2.0动画的变化:
现在变成:
<transition>
运动东西(元素,属性,路由.....);
</transition>
class的定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 --当元素出来(显示)
.fade-leave{} //可不写
.fade-leve-active{} //变化成什么样 --当元素离开(隐藏)
vue2.0给transition动画加的默认事件
@before-enter="beforeEnter" //动画enter进入之前
@enter="enter" //动画enter进入中
@afterEnter="afterEnter" //动画enter进入之后
@beforeLeave="beforeLeave" //动画leave离开之前
@leave="leave" //动画leave离开中
@afterLeave="afterLeave" //动画leave离开之后
并且每个事件都有el参数,表示当前元素
beforeEnter(el){}
transition如何与animate.css配合用？
transition只能让其下面第一层元素运动
1)让一个元素运动时
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<div class="div1" v-show="show"></div>
</transition>
</div>
2)多个元素运动时,要用transition-group,并且绑定key 属性
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition-group enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<div class="div1" v-show="show" :key="1"></div>
<div class="div1" v-show="show" :key="2"></div>
</transition-group>
</div>
<script>
new Vue({
el:‘#box‘,
data:{
show:false
}
});
</script>
transition与animate.css结合使用示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <style>
10 p{
11 width:100px;
12 height:100px;
13 background: red;
14 margin:10px auto;
15 }
16 </style>
17 <script src="vue.js"></script>
18 <link rel="stylesheet" href="animate.css">
19 <script>
20 window.onload=function(){
21 new Vue({
22 el:‘#box‘,
23 data:{
24 show:‘‘,
25 list:[‘apple‘,‘banana‘,‘orange‘,‘pear‘]
26 },
27 computed:{
28 lists:function(){
29 var arr=[];
30 this.list.forEach(function(val){
31 if(val.indexOf(this.show)!=-1){ //indexOf查找在数组中返回的位置,没有查找到则返回-1
32 arr.push(val);
33 }
34 }.bind(this));
35 return arr;
36 }
37 }
38 });
39 };
40 </script>
41 </head>
42 <body>
43 <div id="box">
44 <span>请在文本框中输入字母a,b,c,e,o等</span>
45 <br/><br/>
46 <input type="text" v-model="show">
47
48 <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
49 <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
50 {{val}}
51 </p>
52 </transition-group>
53 </div>
54 </body>
55 </html>
vue-2.0路由变化：
网站：http://router.vuejs.org/zh-cn/index.html
下载vue-router#2.0-->bower install vue-router
vue-router2.0变化:
布局变化：
<div id="box">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
js变化：
<script>
//准备组件
var Home={
template:‘<h3>我是主页</h3>‘
};
var News={
template:‘<h3>我是新闻</h3>‘
};
//配置路由
var routes=[
{path:‘/home‘,component:Home},
{path:‘/News‘,component:News},
{path:‘*‘,redirect:‘/home‘} //重定向,默认打开的是主页,之前的router.reditect已经废弃
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:‘#box‘
});
</script>
---------------------------------------------
路由的嵌套：/user/username
html代码：
<div id="box">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
js代码：
<script>
//准备组件
var Home={
template:‘<h3>我是主页</h3>‘
};
var User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li>
<router-link to="/user/username">用户名</router-link>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
};
var UserDetail={
template:‘<p>我是xxx用户</p>‘
};
//配置路由
var routes=[
{path:‘/home‘,component:Home},
{
path:‘/user‘,
component:User,
children:[ //核心,routes怎么配,children就怎么配
{path:‘username‘,component:UserDetail}
]
},
{path:‘*‘,redirect:‘/home‘} //重定向,默认打开的是主页
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:‘#box‘
});
</script>
上面讲解应用示例：包含路由与动画配合使用(animate.css)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <style>
10 .router-link-active{
11 font-size: 20px;
12 color:#f60;
13 }
14 </style>
15 <script src="vue.js"></script>
16 <script src="bower_components/vue-router/dist/vue-router.min.js"></script>
17 <link rel="stylesheet" href="animate.css">
18 </head>
19 <body>
20 <div id="box">
21 <input type="button" value="添加一个路由" @click="push">
22 <input type="button" value="替换一个路由" @click="replace">
23 <div>
24 <router-link to="/home">主页</router-link>
25 <router-link to="/user">用户</router-link>
26 </div>
27 <div>
28 <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
29 <router-view></router-view>
30 </transition>
31 </div>
32 </div>
33
34 <script>
35 //组件
36 var Home={
37 template:‘<h3>我是主页</h3>‘
38 };
39 var User={
40 template:`
41 <div>
42 <h3>我是用户信息</h3>
43 <ul>
44 <li><router-link to="/user/strive/age/10">Strive</router-link></li>
45 <li><router-link to="/user/blue/age/80">Blue</router-link></li>
46 <li><router-link to="/user/eric/age/70">Eric</router-link></li>
47 </ul>
48 <div>
49 <router-view></router-view>
50 </div>
51 </div>
52 `
53 };
54 var UserDetail={
55 template:‘<div>{{$route.params}}</div>‘
56 };
57
58 //配置路由
59 const routes=[
60 {path:‘/home‘, component:Home},
61 {
62 path:‘/user‘,
63 component:User,
64 children:[
65 {path:‘:username/age/:age‘, component:UserDetail}
66 ]
67 },
68 {path:‘*‘, redirect:‘/home‘} //404
69 ];
70
71 //生成路由实例
72 const router=new VueRouter({
73 routes
74 });
75
76
77 //最后挂到vue上
78 new Vue({
79 router,
80 methods:{
81 push(){
82 router.push({path:‘home‘});
83 },
84 replace(){
85 router.replace({path:‘user‘});
86 }
87 }
88 }).$mount(‘#box‘);
89 </script>
90 </body>
91 </html>
脚手架中vue-loader的变化
main.js中
之前vue1.0中
new Vue({
el:‘#app‘,
components:App
});
现在：
new Vue({
el:‘#app‘,
render h => h(APP)
});
vue2.0的变化
1.在每个组件模板，不在支持片段代码组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在:必须有根元素，包裹住所有的代码 ... 查看详情
vue2.0不可忽视的很多变化
今天使用webpack-sample初始一个vue-cli项目，在app.vue文件中添加了个钩子函数ready，可是ready内的事件一直不执行，检查了webpack文件和package.json也没发现什么问题，浏览器也没报错或者提示，很令人捉急。然后去github看了webpack-simple... 查看详情
vue2.0的数据改变了，怎么视图没变化
参考技术Aif(that.$router.history.current.fullPath==‘/pers’)that.pers_icon_active="pers_icon_active";that.pers_text_active="pers_text_active";本回答被提问者采纳 查看详情
vue2.0有哪些变化
vue2.0之后有哪些变化： 1.每个组件模板template,不再支持片段代码 之前： <template> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </template> ... 查看详情
transitionvue2.0动画
相对于vue1.0来说，vue2.0的动画变化还是挺大的，在1.0中，直接在元素中加 transition，后面跟上名字。而在vue2.0中，需要把设置动画的元素、路由放在<transitionname="fade"></transition>中，name就是动画名称。 在1.0时... 查看详情
vue25---vue2.0变化
组件模版：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>智能社——http://www.zhinengshe.com</title><metaname="viewport"content="width=device-width,initial 查看详情
初识vue2.0（13）：子组件使用watch监听父组件变化(代码片段)
...候，获取父组件传过来的props数据。父组件props数据发生变化，子组件默认无法感知，因此需要手动实现子组件监听父组件变化的功能。一般的值类型数据，可以直接使用watch监听：watch:msg(newVal,oldVal)//对引用类型的值无效console.in... 查看详情
vue2.0中v-for迭代语法变化（keyindex）
语法发生了变化：http://blog.csdn.net/sinat_35512245/article/details/53966788新数组语法 valueinarr (value,index)inarr新对象语法 valueinobj(value,key)inobj (value,key,index)inobj对 Vue.js——60分钟快速入 查看详情
vue2.0+elementui+pagehelper实现的表格分页
...后端分页的特点是对当前页的数据进行请求，每次当页码变化或者每页数据量变化的时候 查看详情
vue2.0学习之动画
下载animate.css<transitionname="v"><divclass="content">需要做动画的内容</div></transition><style> .content //也可以有其他的样式 transition:all0.4slinear; .v-enter-active,.v-leav 查看详情
vue2.0之render函数
...函数。虚拟DOMVue通过建立一个虚拟DOM 对真实DOM发生的变化保持追踪。请近距离看一下这行代码：returncreateElement(‘h1‘,this.blogTitle)createElement 到底会返回什么呢？其实不是一个实际的 DOM元素。它更准确的名字可能是c 查看详情
vue2.0父子组件之间的双向数据绑定问题解决方案
...目代码就完全奔溃不能运行，vue2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定，很遗憾。解决方案只有两种：1)父子组件之间通过vue事件机制传递数据，这太麻烦，而且可能会遇到问题。2)不用父子组件方式，... 查看详情
vue2.0项目实战vuex快速入门
...状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具 devtoolsextension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。 以上是vuex的官方文档对vuex... 查看详情
vue2.0过度动画(代码片段)
...同方式的应用过度效果。包括以下工具： 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库，如animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合使用第三方javascript动画库，如Velocity.js一、... 查看详情
vue2.0学习—监视属性（三十五）(代码片段)
...过vm对象的$watch或watch配置来监视指定的属性当属性发生变化时，回调函数自动调用，在函数内部进行计算需求：做一个天气案例<!DOCTYPEhtml><htmllang="en"><head><metacharse 查看详情
vue2.0模板编译原理：优化器
...AST中找到静态子树并打上标记，即那些永远不会发生变化的节点，例如纯文本节点。打标记的作用：在生成VNode的过程中，除了首次渲染，每次重新渲染，不需要为静态子树创建新节点 查看详情
vue2.0学习—计算属性（三十四）(代码片段)
...什么时候执行？初次读取时会执行当依赖的数据发生变化时会被再次调用优势：与methods实现相比，内部 查看详情
vuex2.0+vue2.0构建备忘录应用实践
...状态，并以相应的规则保证状态以一种可预测的方式发生变化，适合于构建中大型单页应用。1、什么是状态管理模式？看个简单的例子：650)this.width=650;"src="/img/fz.gif"alt="复制代码"style="border:0px;"/><!DOCTYPE&nbs 查看详情