vuejs點滴

剛開始學習vuejs,加油少年，爲了咱們的coding的理想

1.http://www.cnblogs.com/cjlll/p/6077430.html

2.注意自定義指令的傳參的這裏的blue這裏須要一層單引號的。

3.Vue.components()必須在new Vue以前寫。

 4.vue的動畫，有時間在系統的學習下。

===============================

第一天：

vue:
讀音: v-u-e
view

vue究竟是什麼?
一個mvvm框架(庫)、和angular相似
比較容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官網:http://cn.vuejs.org/
手冊： http://cn.vuejs.org/api/

vue和angular區別?
vue——簡單、易學
指令以 v-xxx
一片html代碼配合上json，在new出來vue實例
我的維護項目

適合: 移動端項目,小巧

vue的發展勢頭很猛，github上start數量已經超越angular
angular——上手難
指令以 ng-xxx
全部屬性和方法都掛到$scope身上
angular由google維護

合適: pc端項目

共同點: 不兼容低版本IE
-------------------------------------------
vue基本雛形:
angular展現一條基本數據:
var app=angular.module('app',[]);

app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})

html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>

var c=new Vue({
el:'#box', //選擇器 class tagName
data:{
msg:'welcome vue'
}
});
經常使用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

$scope.show=function(){}
指令: 擴展html標籤功能,屬性

v-model 通常表單元素(input) 雙向數據綁定

循環:
v-for="name in arr"
{{$index}}

v-for="name in json"
{{$index}} {{$key}}

v-for="(k,v) in json"
事件:
v-on:click="函數"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
el:'#box',
data:{ //數據
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法
alert(1);
}
}
});
顯示隱藏:
v-show=「true/false」
bootstrap+vue簡易留言板(todolist):

bootstrap: css框架 跟jqueryMobile同樣
只須要給標籤 賦予class，角色
依賴jquery

確認刪除？和確認刪除所有麼?
-----------------------------------------
事件:
v-on:click/mouseover......

簡寫的:
@click="" 推薦

事件對象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推薦
默認行爲(默認事件):
阻止默認行爲:
a). ev.preventDefault();
b). @contextmenu.prevent 推薦
鍵盤:
@keydown $event ev.keyCode
@keyup

經常使用鍵:
回車
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
-----------------------------------------
屬性:
v-bind:src=""
width/height/title....

簡寫:
:src="" 推薦

<img src="{{url}}" alt=""> 效果能出來，可是會報一個404錯誤
<img v-bind:src="url" alt=""> 效果能夠出來，不會發404請求
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

:class="[red]" red是數據
:class="[red,b,c,d]"

:class="{red:a, blue:false}"//data中只有a沒有red之類的。

:class="json"

data:{
json:{red:a, blue:false}//推薦
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 複合樣式，採用駝峯命名法
:style="json"
-----------------------------------------
模板:
{{msg}} 數據更新模板變化
{{*msg}} 數據只綁定一次

{{{msg}}} HTML轉意輸出
-----------------------------------------
過濾器:-> 過濾模板數據
系統提供一些過濾器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize

currency 錢

{{msg| filterA 參數}}

....
-----------------------------------------
交互:
$http （ajax）

若是vue想作交互

引入: vue-resouce

get:
獲取一個普通文本數據:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
給服務發送數據:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默認名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});

次日：

vue製做weibo
交互

vue-> 1.0
vue-resource ajax php
服務器環境(node)

this.$http.get()/post()/jsonp()

this.$http({
url:地址
data:給後臺提交數據,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});
----------------------------------
vue事件:
@click=""
數據:

添加一條留言：

獲取某一頁數據:
getPageData(1);
----------------------------------
vue生命週期:
鉤子函數:

created -> 實例已經建立 √
beforeCompile -> 編譯以前
compiled -> 編譯以後
ready -> 插入到文檔中 √

beforeDestroy -> 銷燬以前
destroyed -> 銷燬以後
----------------------------------
用戶會看到花括號標記:

v-cloak 防止閃爍, 比較大段落
看這篇博客：http://www.cnblogs.com/cjlll/p/6077430.html
----------------------------------
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
----------------------------------
ng: $scope.$watch

計算屬性的使用:
computed:{
b:function(){ //默認調用get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}

* computed裏面能夠放置一些業務邏輯代碼，必定記得return
---------------------------------
vue實例簡單方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手動掛在vue程序

vm.$options -> 獲取自定義屬性
vm.$destroy -> 銷燬對象

vm.$log(); -> 查看如今數據的狀態
---------------------------------
循環：
v-for="value in data"

會有重複數據？
track-by='索引' 提升循環性能

track-by='$index/uid'
---------------------------------
過濾器:
vue提供過濾器:
capitalize uppercase currency....

debounce 配合事件，延遲執行
數據配合使用過濾器:
limitBy 限制幾個
limitBy 參數(取幾個)
limitBy 取幾個 從哪開始

filterBy 過濾數據
filterBy ‘誰’

orderBy 排序
orderBy 誰 1/-1
1 -> 正序
2 -> 倒序

自定義過濾器: model ->過濾 -> view
Vue.filter(name,function(input){

});

時間轉化器
過濾html標記

雙向過濾器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});

數據 -> 視圖
model -> view

view -> model
---------------------------------
v-text
v-for
v-html
指令: 擴展html語法

自定義指令:
屬性:

Vue.directive(指令名稱,function(參數){
this.el -> 原生DOM元素
});

<div v-red="參數"></div>

指令名稱: v-red -> red

* 注意: 必須以 v-開頭

拖拽:
-------------------------------
自定義元素指令:（用處不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
------------------------------------------------
@keydown.up
@keydown.enter

@keydown.a/b/c....

自定義鍵盤信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
------------------------------------------------
監聽數據變化:
vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //淺度
vm.$watch(name,fnCb,{deep:true}); //深度監視
------------------------------------------------
vue組件:
組件間各類通訊
slot
vue-loader webpack .vue
vue-router

==========================

第三天：

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

最最核心

==================

第四天

手動配置本身:
webpack+vue-loader

webpack加載模塊
-------------------------------------
如何運行此項目？
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
}

之後下載模塊：
npm install <package-name> --save-dev

EADDRINUSE 端口被佔用

少了:
webpack-dev-server
webpack
----------------------------------------
.vue 結尾，以後稱呼組件
----------------------------------------
路由:
vue-router

-> 如何查看版本:
bower info vue-router

路由使用版本: 0.7.13
配合vue-loader使用:
1. 下載vue-router模塊
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'

3. Vue.use(VueRouter);

4. 配置路由
var router=new VueRouter();
router.map({
路由規則
})
5. 開啓
router.start(App,'#app');

注意:
以前: index.html -> <app></app>
如今: index.html -> <div id="app"></div>

App.vue -> 須要一個 <div id="app"></div> 根元素

home news
---------------------------------------------
路由嵌套:
和以前如出一轍
--------------------------------------------
上線:
npm run build
-> webpack -p
--------------------------------------------
腳手架:
vue-cli——vue腳手架
幫你提供好基本項目結構

自己集成不少項目模板:
simple 我的以爲一點用都沒有
webpack 可使用(大型項目)
Eslint 檢查代碼規範，
單元測試
webpack-simple 我的推薦使用, 沒有代碼檢查 √

browserify -> 本身看
browserify-simple

--------------------------------------------
基本使用流程:
1. npm install vue-cli -g 安裝 vue命令環境
驗證安裝ok?
vue --version
2. 生成項目模板
vue init <模板名> 本地文件夾名稱
3. 進入到生成目錄裏面
cd xxx
npm install
4. npm run dev
--------------------------------------------

第五天