一、过渡（动画）
引入 vue.js
bower-> （前端）包管理器
npm install bower -g
验证: bower --version
bower install <包名> 安装
bower uninstall <包名> 卸载
bower info <包名> 查看相关的包版本信息
- 动画
本质是css3: transtion ,animation
动画:
.fade-transition{
}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
animate.css 做动画
二、组件
- vue组件：一个大对象
- 全局组件
var Aaa=Vue.extend({
template:'{{msg}}
',
data:function () {
return{
msg:'111',
}
},
methods:{
change(){
this.msg = 'aaa'
}
}
});
Vue.component('aaa',Aaa);
var vm = new Vue({
el:'#box',
});
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
- 局部组件
可以放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
另一种编写方式:
全局
Vue.component('my-aaa',{
template:'好'
});
局部
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'标题2
'
}
}
});
- 配合模板:
template:'标题2->{{msg}}
'- 单独放到某个地方
标题1
-
{{val}}
- 动态组件:
- vue-devtools -> 调试工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
vue默认情况下，子组件也没法访问父组件数据
5. 组件数据传递: √
- 子组件就想获取父组件data
在调用子组件：
子组件之内:
第一种：props:['m','myMsg']
第二种：props:{
'm':String,
'myMsg':Number
}
在html中属性有-的话，在js中要变成驼峰的形式，例如my-msg->myMsg
- 父级获取子级数据
*子组件把自己的数据，发送到父级
vm.$emit(事件名,数据);
v-on: @
vm.$dispatch(事件名,数据) 子级向父级发送数据
-
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}在vue2.0里面已经，报废了
slot:
位置、槽口
作用: 占个位置(自定义组件中还有内容可以用这个
template中：
类似ng里面 transclude （指令）
三、SPA应用（单页面应用）
- vue-resouce 交互
vue-router 路由
根据不同url地址，出现不同效果
目前版本：0.7.13
主页 home
新闻页 news
html:
主页 跳转链接
展示内容:
我是主页
'
});
var News=Vue.extend({
template:'我是新闻
'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
- 跳转:（访问某页打开直接跳转，不需要点击）
router.redirect({
‘/’:'/home'
});
- 路由嵌套(多层路由):
主页 home
登录 home/login
注册 home/reg
新闻页 news
subRoutes:{
'login':{
component:{
template:'我是登录信息'
}
},
'reg':{
component:{
template:'我是注册信息'
}
}
}
- 路由其他信息:
/detail/:id/age/:age
{{$route.params | json}} -> 当前参数
{{$route.path}} -> 当前路径
{{$route.query | json}} -> 获取'?a=1'这种数据 - vue-loader:（无需刷新）
其他loader -> css-loader、url-loader、html-loader.....
后台: nodeJs -> require exports
- broserify 模块加载，只能加载js
- webpack 模块加载器，一切东西都是模块, 最后打包到一块了。
require('style.css'); -> css-loader、style-loader
vue-loader基于webpack
.css .js .html .php 这些文件
a.vue / b.vue
.vue文件：放置的是vue组件代码
html
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件，官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件
ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
-
webpak准备工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-devApp.vue -> 变成正常代码 [email protected]
cnpm install [email protected] --save-dev 下载vueloader
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader 将vue解析成html/css
[email protected] 验证代码有没有错误
es6语法：bable相关模块需要去下载
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最最核心：