vue学习part3

git page：

任何仓库 master分支，都可以发布(git page)

双向过滤器:

Vue.filter(name,{
read:
write:
});

bower:

bower-> （前端）包管理器
npm install bower -g
验证: bower --version
bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息
bower install vue#1.0.28

<script src="bower_components/vue/dist/vue.js"></script>

vue过渡(动画):

本质走的css3: transtion ,animation
<div id="div1" v-show="bSign" transition="fade"></div>
动画:
.fade-transition{

}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}

vue组件:

组件: 一个大对象
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});

Vue.component('aaa',Aaa);

*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});

组件的另一种编写方式:

Vue.component('my-aaa',{
template:'<strong>好</strong>'
});

var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'<h2>标题2</h2>'
}
}
});

配合模板:

1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>

动态组件:

<component :is="组件名称"></component>

vue默认情况下，子组件也没法访问父组件数据

组件数据传递: √
1. 子组件就想获取父组件data
在调用子组件：
<bbb :m="数据"></bbb>

子组件之内:
props:['m','myMsg']

props:{
'm':String,
'myMsg':Number
}
2. 父级获取子级数据
*子组件把自己的数据，发送到父级

vm.$emit(事件名,数据);

v-on:   @

vm.$dispatch(事件名,数据)  子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经废弃以上方法

slot:

位置、槽口
作用: 占个位置
类似ng里面 transclude  （指令）

vue-> SPA应用，单页面应用：

vue-resouce 交互
vue-router  路由
根据不同url地址，出现不同效果
主页  home
新闻页 news

html:
<a v-link="{path:'/home'}">主页</a>   跳转链接

展示内容:
<router-view></router-view>
js:
//1. 准备一个根组件
var App=Vue.extend();

//2. Home News组件都准备
var Home=Vue.extend({

4000
template:'<h3>我是主页</h3>'
});

var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});

//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:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}

路由其他信息:

/detail/:id/age/:age

{{$route.params | json}}   ->  当前参数

{{$route.path}}    ->  当前路径

{{$route.query | json}}    ->  数据

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

.vue文件:

放置的是vue组件代码

<template>
html
</template>

<style>
css
</style>

<script>
js  （平时代码、ES6）  babel-loader
</script>

简单的目录结构:
|-index.html
|-main.js   入口文件
|-App.vue   vue文件，官方推荐命名法
|-package.json  工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件

ES6: 模块化开发

导出模块：
export default {}
引入模块:
import 模块名 from 地址

./当前目录  ../上一级目录

webpack准备工作:

--save-dev    下载并且导入到webpack.config.js中
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev

App.vue -> 变成正常代码       vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev

cnpm install vue-html-loader --save-dev

vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2

babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime