Vue-高级讲师之笔记06
来源:互联网 发布:php的框架有哪些 编辑:程序博客网 时间:2024/06/09 04:59
vue动画
vue路由
--------------------------------------
transition 之前 属性
<p transition="fade"></p>
.fade-transition{}
.fade-enter{}
.fade-leave{}
--------------------------------------
到2.0以后 transition 组件
<transition name="fade">
运动东西(元素,属性、路由....)
</transition>
class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{}
.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
如何animate.css配合用?
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
多个元素运动:
<transition-group enter-active-class="" leave-active-class="">
<p :key=""></p>
<p :key=""></p>
</transition-group>
------------------------------------------
vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 布局
<router-link to="/home">主页</router-link>
<router-view></router-view>
2. 路由具体写法
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
//配置路由
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News},
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#box'
});
3. 重定向
之前 router.rediect 废弃了
{path:'*', redirect:'/home'}
------------------------------------------
路由嵌套:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
------------------------------------------
/user/strive/age/10
:id
:username
:age
------------------------------------------
路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个
router.replace({path:'news'}) //替换路由,不会往历史记录里面添加
------------------------------------------
vue-cli
------------------------------------------
npm install
------------------------------------------
脚手架: vue-loader
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})
------------------------------------------
vue2.0
vue-loader和vue-router配合
------------------------------------------
style-loader css-loader
style!css
------------------------------------------
项目:
------------------------------------------
vue路由
--------------------------------------
transition 之前 属性
<p transition="fade"></p>
.fade-transition{}
.fade-enter{}
.fade-leave{}
--------------------------------------
到2.0以后 transition 组件
<transition name="fade">
运动东西(元素,属性、路由....)
</transition>
class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{}
.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
如何animate.css配合用?
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
多个元素运动:
<transition-group enter-active-class="" leave-active-class="">
<p :key=""></p>
<p :key=""></p>
</transition-group>
------------------------------------------
vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 布局
<router-link to="/home">主页</router-link>
<router-view></router-view>
2. 路由具体写法
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
//配置路由
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News},
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#box'
});
3. 重定向
之前 router.rediect 废弃了
{path:'*', redirect:'/home'}
------------------------------------------
路由嵌套:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
------------------------------------------
/user/strive/age/10
:id
:username
:age
------------------------------------------
路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个
router.replace({path:'news'}) //替换路由,不会往历史记录里面添加
------------------------------------------
vue-cli
------------------------------------------
npm install
------------------------------------------
脚手架: vue-loader
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})
------------------------------------------
vue2.0
vue-loader和vue-router配合
------------------------------------------
style-loader css-loader
style!css
------------------------------------------
项目:
------------------------------------------
阅读全文
0 0
- Vue-高级讲师之笔记06
- Vue-高级讲师之笔记01
- Vue-高级讲师之笔记02
- Vue-高级讲师之笔记03
- Vue-高级讲师之笔记04
- Vue-高级讲师之笔记05
- Vue-高级讲师之笔记07(结尾)
- 某公司嵌入式高级讲师要求
- 内部讲师培训笔记
- vue之vue-router vuex学习笔记
- 开启讲师之路
- 讲师课程设计之问题分析
- vue.js学习06之vue-resource
- vue.js学习笔记之prototype
- vue 学习笔记一之Quick Start
- Vue学习笔记之 路由路径
- Vue 学习笔记1之安装
- android 学习笔记 (for 黎活明讲师)
- Linux IO模式及 select、poll、epoll详解
- 从零开始的UART(基于S3C2440)
- 点击按钮更改对应段落(多个按钮之间互不影响)
- idea SVN 忽略文件夹classes、lib
- matlab 中如何使用bwboundaries获取连通区域并求取其轮廓
- Vue-高级讲师之笔记06
- Leetcode 309. Best Time to Buy and Sell Stock with Cooldown
- 代码更换SeekBar进度条颜色
- 课堂在线Java程序设计作业 类的使用
- 【总结】数据预处理
- Easyui combobox设置值和文本的几种方式和问题
- jQuery setInterval倒计时精确到毫秒
- 【性能测试】-常见性能测试问题分析(一)
- shiro