vue視頻學習筆記03

video 3

git page：
任何倉庫 master分支，均可以發佈(git page)
-------------------------------------
雙向過濾器:
Vue.filter(name,{
read:
write:
});
-------------------------------------
1.0
2.0
-------------------------------------
引入 vue.js
-------------------------------------
bower-> （前端）包管理器
npm install bower -g
驗證: bower --version

bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息

<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-devtools -> 調試工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
--------------------------------------------
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地址，出現不一樣效果

咱上課: 0.7.13

主頁 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({
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

.css
.js
.html
.php
.....

a.vue
b.vue

.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 地址
--------------------------------------------
webpak準備工做:
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

最最核心：