vuejs點滴

博客0.沒事的時候能夠看的一些博客：http://www.javashuo.com/article/p-ptvncson-y.html

http://www.tuicool.com/articles/vQBbiiQ

博客1.vuex應該去看的東西：

http://blog.csdn.net/github_26672553/article/details/53176778

博客2：vue.use 詳解。http://www.cnblogs.com/dupd/p/6716386.html

博客3：Vue與jquery項目的對比：http://blog.csdn.net/violetjack0808/article/details/51451672

博客4：vue的生命週期 http://www.javashuo.com/article/p-waxdskaz-cs.html

博客5：vue的面試題http://www.cnblogs.com/coding4/p/7953417.html

1.vuejs簡介    vue究竟是什麼?

一個mvvm框架(庫)、和angular相似  比較容易上手、小巧官網:http://cn.vuejs.org/ 

手冊： http://cn.vuejs.org/api/

2.vuejs與angular的區別。

vue：

簡單、易學，指令以 v-xxx，一片html代碼配合上json，在new出來vue實例，我的維護項目  ，適合: 移動端項目,小巧

vue的發展勢頭很猛，github上start數量已經超越angular，

angular: 指令以 ng-xxx,全部屬性和方法都掛到$scope身上,angular由google維護 ,,合適: pc端項目

angular展現一條基本數據:
        var app=angular.module('app',[]);

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

        html:
        div ng-controller="xxx"
            {{msg}}

 

共同點: 不兼容低版本IE

3.簡單的代碼。

<div id="box">
	{{msg}}
</div>

var c=new Vue({
	el:'#box',	//選擇器  class tagName
	data:{
	      msg:'welcome vue'
	}
});

4.經常使用指令：

angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

5.vue經常使用指令

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

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

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

v-for="(k,v) in json"

7.事件:
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);
   }
  }
});

 8.

顯示隱藏:
v-show=「true/false」
bootstrap+vue簡易留言板(todolist):

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

9.

事件:
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
.....

10.

屬性:
v-bind:src=""
width/height/title....

:width :height :title

簡寫:
:src="" 推薦

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

11.class最終都要聯繫到class中，而style則不須要。

class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

:class="[red]"

 

當:class後邊數數組的是數組

-----------------------------------------------

class第一種：

:class="[classa,classb,classc,classd]"

data{

   classa:"red",

   classb:"blue",

   classc:"pink"

}

<style>

.red{background:red;}

.blue{background:blue;}

.pink{backround:pink;}

</style>

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

class第二種

:class後邊是Json
:class="{red:a, blue:false}"//data中只有a沒有red之類的。而red是樣式中的class.

 

-----------------------------------------------------

class第三種

:class="json"

data:{
json:{red:a, blue:false}//推薦  red是樣式，而 a是true後者false。
}
-------------------------------------------------------------------
style:

第一種：(:style後邊的屬性必須加{}，而且變量名必須爲red不然不行，這個不通用)

  <strong :style="{color:'red'}">文字...</strong>  

<style>
.red{
     color: red;
}
</style>

第二種：
:style="[c]"
:style="[c,d]"

data:{
c:{color:'red'},
b:{backgroundColor:'blue'}
}

第三種：

 <strong :style="a">文字...</strong>

data:{
a:{
    color:'red',//這裏這裏的red雖然不是樣式，可是必須加引號
    backgroundColor:'gray'
}
}

注意: 複合樣式，採用駝峯命名法
:style="json"

----------------------------------------------

 

12.

模板:
{{msg}} 數據更新模板變化
{{*msg}} 數據只綁定一次

{{{msg}}} HTML轉意輸出

13.

過濾器:-> 過濾模板數據
系統提供一些過濾器:

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

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

currency 錢

{{msg| filterA 參數}}

下面有講的自定義過濾器

14.

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);
        });

15.

this.$http({
url:地址
data:給後臺提交數據,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});

16.

vue生命週期:
鉤子函數:

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

beforeDestroy -> 銷燬以前
destroyed -> 銷燬以後 (vm.$destroy()調用的時候)

17.

用戶會看到花括號標記:

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

18.

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

 

 

--------------------------
computed:{
b:{
get:
set:
}
}

* computed裏面能夠放置一些業務邏輯代碼，必定記得return

19.

vue實例簡單方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手動掛在vue程序

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

vm.$log(); -> 查看如今數據的狀態

20.

循環：
v-for="value in data" 這樣子的話，不能添加劇復的數據的。2.0以上的版本默認是能夠添加數據的。

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

track-by='$index/uid'

 

21.

過濾器:
vue提供過濾器:
下邊三個對於字符串的時候
capitalize    uppercase    currency....

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

filterBy    過濾數據
filterBy ‘誰’

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

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

});

debounce的用法

自定義過濾器：

 雙向綁定過濾器

 

 

 

22.

@keydown.up
@keydown.enter

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

自定義鍵盤信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

23.  自定義指令指的是自定義的屬性，和組件沒有關係的。Vue.directive和Vue.filter這兩個函數都必須寫在new Vue以前才行。

自定義元素指令:元素指令（用處不大）

 v-這種表達形式。

其實本事也是bind函數：

在自定義指令中使用的是this.el不是this.$el

 

24.

監聽數據變化:
vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //淺度
vm.$watch(name,fnCb,{deep:true}); //深度監視

 

25.vue組件：避免緩存重複造輪子。

html:

 

全局的組件：

另外一種書寫方式：

 

局部含參數的：

注意上邊的components中的my-aaa必須有引號。

帶方法，帶事件產生。

注意：data必須用方法的形式，vue中還有一個是computed這個後邊也必須是方法（若是你寫set,get就另說了）。

父子組件：

簡單的：

父向子傳數據

注意：通常狀況下下屬性中不會用{{}}都是""

 

屬性綁定的時候:mmm:msgparent 後邊的是父類的數據，前面的子的數據，綁定在bbb上邊。

子向父傳數據

 <bbb @child-msg="get"></bbb>記住這個child-msg這個綁定在bbb中，get是父的方法。必須注意get後邊不能寫(),不然傳的是參數是空

<div id="box">
        <aaa>
        </aaa>
    </div>

    <template id="aaa">
        <span>我是父級 -> {{msg}}</span>
        <bbb @child-msg="get"></bbb>
    </template>
    <template id="bbb">
        <h3>子組件-</h3>
        <input type="button" value="send" @click="send">
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:111,
                            msg2:'我是父組件的數據'
                        }
                    },
                    template:'#aaa',
                    methods:{
                        get(msg){
                            // alert(msg);
                            this.msg=msg;
                        }
                    },
                    components:{
                        'bbb':{
                            data(){
                                return {
                                    a:'我是子組件的數據'
                                }
                            },
                            template:'#bbb',
                            methods:{
                                send(){
                                    this.$emit('child-msg',this.a);
                                }
                            }
                        }
                    }
                }
            }
        });

 26.如何解決

這種原來就有元素呢，用到slot。

name=是定義， slot=使用。

 27.多層路由：

 

 

 

 28.手動配置本身的webpack+vue-loader

腳手架:
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
--------------------------------------------

29.真實的開始本身的vue湯坑歷程了。

vuex

http://vuex.vuejs.org/zh-cn/intro.html 

30.公佈一個全局的算法。

這個Vue.prototype.$http = Axios // 相似於vue-resource的調用方法，以後能夠在實例裏直接用this.$http.get()等

 

 

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

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

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

31.上面的屬於基礎的面試以前看的，下面的屬於本身開發過程當中或者本身查看git上的開元項目的想法思考或者啓示。

32.vue devtools的安裝和使用 http://blog.csdn.net/qq_24122593/article/details/53444777

33.用了vue-cli的webpack配置後要怎麼debug

https://segmentfault.com/q/1010000008757714

34.eslint 和 jslint: 檢查的太嚴格了,沒太大意義.

http://www.tuicool.com/articles/NF3aqi

 35.

vuex的學習和使用。

http://vuex.vuejs.org/zh-cn/modules.html 

http://www.shouce.ren/api/view/a/11734

http://blog.csdn.net/sinat_17775997/article/details/54943797

36.vue中的斷電問題：

devtool: 'eval-source-map',這裏配置，#eval-source-map多一個#也行。
debug: true

37.vue中關於打斷點debugger；的問題，不是哪裏均可以打斷點的。

這裏是一種錯誤的作法。必須在對方方法執行中才能夠打這樣子打不住的。

這裏用console.log 或者alert都是不行的。 

38.vue2.0中，

1.0中 data：function(){

   return {

   }

}

2.0中data(){

  return {

    count:0  

}

}

39. vue2.0的computed中不建議使用箭頭函數。

若是一個box中有多個 computed的話，那麼只有最後一個有效，會覆蓋上邊的。

---------------------------

如下是學習這個項目學到的東西。

https://github.com/lzxb/vue-cnode

 

40.vue-cnode中不使用用webpack-dev-server默認的熱加載，而是使用webpack-dev-middleware這個插件（在webpack的博客中有詳細說明），主要由於webpack-dev-middleware的擴展性更強點，而且爲了更好的實現返回，進度條等操做。

41.vue-loader幫咱們加載後，css放進了js中，

因此

 42.babel-polyfill 這個須要依賴。

"eslint": "^3.17.0",
    "eslint-config-standard": "^8.0.0-beta.0",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-html": "^2.0.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-node": "^4.1.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^2.1.1",

43. No ESLint configuration found 

缺乏.eslint的配置文件。

44.若是.babelrc 中有的時候，latest須要去掉。

 45.據說在操做vue的數組不能用=號，改天試試看。

46.vue2.0

vue2.0:
bower info vue

http://vuejs.org/
到了2.0之後，有哪些變化?

1. 在每一個組件模板，不在支持片斷代碼
組件中模板:
以前:
<template>
<h3>我是組件</h3><strong>我是加粗標籤</strong>
</template>
如今: 必須有根元素，包裹住全部的代碼
<template id="aaa">
<div>
<h3>我是組件</h3>
<strong>我是加粗標籤</strong>
</div>
</template>
2. 關於組件定義
Vue.extend 這種方式，在2.0裏面有，可是有一些改動，這種寫法，即便能用，咱也不用——廢棄

Vue.component(組件名稱,{ 在2.0繼續能用
data(){}
methods:{}
template:
});

2.0推出一個組件，簡潔定義方式：
var Home={
template:'' -> Vue.extend()
};
3. 生命週期
以前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
如今:
beforeCreate 組件實例剛剛被建立,屬性都沒有
created 實例已經建立完成，屬性已經綁定
beforeMount 模板編譯以前
mounted 模板編譯以後，代替以前ready *
beforeUpdate 組件更新以前
updated 組件更新完畢 *
beforeDestroy 組件銷燬前
destroyed 組件銷燬後
3. 循環
2.0裏面默認就能夠添加劇複數據

arr.forEach(function(item,index){

});

去掉了隱式一些變量
$index $key

以前:
v-for="(index,val) in array"
如今:
v-for="(val,index) in array"

4. track-by="id"
變成
<li v-for="(val,index) in list" :key="index">
5. 自定義鍵盤指令
以前：Vue.directive('on').keyCodes.f1=17;

如今: Vue.config.keyCodes.ctrl=17
6. 過濾器
以前:
系統就自帶不少過濾
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些簡單功能，本身經過js實現

到了2.0， 內置過濾器，所有刪除了

lodash 工具庫 _.debounce(fn,200)

自定義過濾器——還有
可是,自定義過濾器傳參

以前: {{msg | toDou '12' '5'}}
如今: {{msg | toDou('12','5')}}
------------------------------------------------------
組件通訊:
vm.$emit()
vm.$on();

父組件和子組件:

子組件想要拿到父組件數據:
經過 props

以前，子組件能夠更改父組件信息，能夠是同步 sync
如今，不容許直接給父級的數據，作賦值操做

問題，就想更改：
a). 父組件每次傳一個對象給子組件, 對象之間引用 √
b). 只是不報錯, mounted中轉
------------------------------------------------------
能夠單一事件管理組件通訊: vuex
var Event=new Vue();

Event.$emit(事件名稱, 數據)

Event.$on(事件名稱,function(data){
//data
}.bind(this));
------------------------------------------------------
debounce 廢棄
-> lodash
_.debounce(fn,時間)
------------------------------------------------------

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問題:
	論壇
	http://bbs.zhinengshe.com
	------------------------------------------------
	UI組件
	別人提供好一堆東西
	目的:
	爲了提升開發效率
	功能
	原則: 拿過來直接使用
	vue-cli -> vue-loader
	bootstrap:
	twitter 開源
	簡潔、大方
	官網文檔
	基於 jquery
	柵格化系統+響應式工具 (移動端、pad、pc)
	按鈕
	--------------------------------
	bower 前端包管理器 jquery#1.11.1
	自動解決依賴
	npm node包管理器 jquery@1.11.1
	--------------------------------
	餓了麼團隊開源一個基於vue 組件庫
	elementUI PC
	MintUI 移動端
	--------------------------------
	elementUI:
	如何使用
	官網:http://element.eleme.io/
	使用:
	1. 安裝 element-ui
	npm i element-ui -D
	npm install element-ui --save-dev
	// i -> install
	// D -> --save-dev
	// S -> --save
	2. 引入 main.js 入口文件
	import ElementUI from 'element-ui'
	import 'element-ui/lib/theme-default/index.css'
	所有引入
	3. 使用組件
	Vue.use(ElementUI)
	css-loader 引入css
	字體圖標 file-loader
	less:
	less
	less-loader
	-------------------------------------------------
	按需加載相應組件: √
	就須要 按鈕
	1. babel-plugin-component
	cnpm install babel-plugin-component -D
	2. .babelrc文件裏面新增一個配置
	"plugins": [["component", [
	{
	"libraryName": "element-ui",
	"styleLibraryName": "theme-default"
	}
	]]]
	3. 想用哪一個組件就用哪一個
	引入:
	import {Button,Radio} from 'element-ui'
	使用:
	a). Vue.component(Button.name, Button); 我的不太喜歡
	b). Vue.use(Button); √
	---------------------------------------------------
	發送請求:
	vue-resourse 交互
	axios
	---------------------------------------------------
	element-ui -> pc
	mint-ui
	移動端 ui庫
	http://mint-ui.github.io/
	1. 下載
	npm install mint-ui -S
	-S
	--save
	2. 引入
	import Vue from 'vue';
	import Mint from 'mint-ui';
	import 'mint-ui/lib/style.css'
	Vue.use(Mint);
	按需引入:
	import { Cell, Checklist } from 'minu-ui';
	Vue.component(Cell.name, Cell);
	Vue.component(Checklist.name, Checklist);
	http://mint-ui.github.io/docs/#!/zh-cn2
	論壇:
	-------------------------------------------------------
	Mint-ui-demo: 看着手冊走了一遍
	https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo

47. vue2.0中定義全局變量。

global.COURSES = 'xxxxx';

在入口的main.js

就能夠，別的js不須要import也能用到COURSES



import './a'

48.在vue2.0中，

咱們須要明白，路由不一樣，好比說列表頁和詳情頁原本就是不一樣的路由。

可是一個列表頁中，顯示的不一樣組件就是組件之間的數據傳遞，通常經過event.emit管理，或者經過vuex管理。

可是vuex不能管理不一樣路由之間的變量,我不太清楚，應該是能夠的。

49.不一樣路由之間的傳參方式。

傳參方式一，

在一級路由中,name屬性{二級路由不能直接name屬性。}

不一樣路由之間的傳參方式 二：

 

不一樣路由之間的傳參方式 三：

 

 50.有兩個參數咱們須要注意：1.routes 2.$route

 51.components  這樣子好像影響到了移入移除的動畫了，

52.query傳參，徹底不用name，param纔會和name有聯繫。

 53.append exact

 54.redirect

{
        path:'/ccc/:id',
        redirect:xxxx=>{
            const {hash,params,query} = xxxx;
            if(params.id == '001'){
                return '/home'
            }
        }
    }

55.路由別名。alias

{path:'/aaa/:id',component:html,alias:["/gogo:id","/papa:id"]}, 

56.router的一些後退，前進，返回home等操做了。

 57.vue router的學習的代碼：

//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
//import router from './router'
Vue.use(VueRouter)

Vue.config.productionTip = false
//組件
var Home={
    template:'<h3>我是主頁</h3>'
};
var about={
    template:'<h3>about</h3>'
};
var User={
    template:`
        <div>
            <h3>我是用戶信息</h3>
            <ul>
                <li><router-link  :to="{path:'/user/wos',query:{age:90}}">Strive</router-link></li>
                <li><router-link  :to="{path:'/aaa/123',query:{n:'aa'}}">aaa</router-link></li>
                <li><router-link  :to="{path:'/bbb/456',query:{n:'bb'}}">bbb</router-link></li>
                <li><router-link  :to="{path:'/ccc/001',query:{n:'bb'}}">ccc</router-link></li>
            </ul>
            <div>
                <router-view></router-view>
            </div>
        </div>
    `
};
var html = {
    template:'<div>this is html!{{$route.query}}</div>'
}
var UserDetail={
    template:'<div>{{$route.params}}</div>'
};
//配置路由
const routes=[
    {path:'/home', component:Home},
    {
      path:'/user',component:User,children:[
          {path:':username',component:html}
      ]
    },
    {path:'/aaa/:id',component:html,alias:["/gogo:id","/papa:id"]},
    {path:'/bbb/:id',redirect:'/aaa/:id'},
    {
        path:'/ccc/:id',
        redirect:xxxx=>{
            const {hash,params,query} = xxxx;
            if(params.id == '001'){
                return '/home'
            }
        }
    }
];

//生成路由實例
const router=new VueRouter({
    routes
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }，
  methods:{
      houtui:function(){
          router.go(-1);
      },
      qianjin:function(){
          router.go(1)
      },
      home:function(){
          router.push("/");
      },
      query:function(){
          //這個query能夠經過$route.query.a讀出來，可是這個是修改不了路由表的
          router.push({path:"/",query:{a:1,b:1}});
      }
  }
})

//App.vue
<template>
  <div id="app">
    <input type="button" value="添加一個路由" @click="push">
          <input type="button" value="替換一個路由" @click="replace">
          <div>{{ $route.name }}---</div>
          <div>
              <router-link to="/home">主頁</router-link>
              <router-link to="/user">用戶</router-link>
          </div>
          <div>
                  <router-view></router-view>
          </div>
    </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
      push(){
          router.push({path:'home'});
      },
      replace(){
          router.replace({path:'user'});
      }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
//

View Code

 58.vuex的快速的入門看的博客：http://blog.csdn.net/teckeryu/article/details/54915207

59.最簡單的vuex的用法。

//store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        sideBarOpened: false,
        count:40
        //放置公用狀態
    },
    mutations: {
       
    }
});

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Vuex from 'Vuex'
import { store } from './store'
//import router from './router'
/*var html ={
    template:"<div>this is our world!</div>"
}*/
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render:aa=>aa(App)
})

App.vue中

<template>
  <div id="app">
    <div>this is our world!</div>
    <div>{{this.$store.state.count}}</div>
  </div>
</template>

 60.computed的簡單使用。

 61.咱們之因此會用computed是由於咱們不想在template中直接寫變量（咱們不能夠把$store.state中的變量直接賦值給data中的變量，由於改變的話，你會發現沒有效果，因此放computed），在computed中直接寫mapState是由於這樣寫的少一些，可是還不是最簡單的，用vuex中的getter最簡單的。用mapstate只是能夠簡化寫法。

 

<template>
  <div id="app">
    <div>this is our world!</div>
    <div>{{this.$store.state.count}}</div>
    <div>----</div>
    <div>{{count}}</div>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  name: 'app',
  /*computed:{
    countA(){
      return this.count+20
    }
  },*/
  /*computed:{
    count(){
      return this.$store.state.count+1
    }
  },*/
  /*computed:mapState({
    count:state=>state.count+2
  })*/
  computed:mapState([
    "count"
  ]),
  methods:{
  }
}
</script>

View Code

62.mapMutations

//store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        sideBarOpened: false,
        count:40
        //放置公用狀態
    },
    mutations: {
       jia(state,n){
        state.count += n.a
       },
       jian(state){
        state.count--
       }
    }
});
//App.vue
<template>
  <div id="app">
    <div>this is our world!</div>
    <div>{{this.$store.state.count}}</div>
    <div>----</div>
    <div>{{count}}</div>
    <div>
      <button @click="$store.commit('jia',{a:10})">jia</button>
      <button @click="$store.commit('jian',{a:10})">jia</button>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from "vuex"
export default {
  name: 'app',
  /*computed:{
    countA(){
      return this.count+20
    }
  },*/
  /*computed:{
    count(){
      return this.$store.state.count+1
    }
  },*/
  /*computed:mapState({
    count:state=>state.count+2
  })*/
  computed:mapState([
    "count"
  ]),
  methods:mapMutations([
    'jia','jian'
  ])
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
//main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Vuex from 'Vuex'
import { store } from './store'
//import router from './router'
/*var html ={
template:"<div>this is our world!</div>"
}*/
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
render:aa=>aa(App)
})

63.vue2.0中computed和vuex中的getter函數都不建議使用=>函數，由於=>中的this是往上穿一層。　　

64.actions

//App.vue
<template>
  <div id="app">
    <div>this is our world!</div>
    <div>{{this.$store.state.count}}</div>
    <div>----</div>
    <div>{{count}}</div>
    <div>
      <button @click="$store.commit('jia',{a:10})">jia</button>
      <button @click="$store.commit('jian',{a:10})">jia</button>
      <button @click="jiaplus">jiaplus</button>
      <button @click="jianplus">jianplus</button>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
export default {
  name: 'app',
  /*computed:{
    countA(){
      return this.count+20
    }
  },*/
  /*computed:{
    count(){
      return this.$store.state.count+1
    }
  },*/
  /*computed:mapState({
    count:state=>state.count+2
  })*/
  /*computed:mapState([
    "count"
  ])*/
  computed:{
    ...mapState([
      "count"
    ]),
    ...mapGetters([
      "count"
    ])
  },
  /*methods:mapMutations([
    'jia','jian'
  ])*/
  methods:{
    ...mapMutations([
        'jia',
        'jian'
      ]),
    ...mapActions([
        'jiaplus'
      ]),
    ...mapActions({
        jianplus:'jianplus'
      })
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        sideBarOpened: false,
        count:40
        //放置公用狀態
    },
    mutations: {
       jia(state,n){
        state.count += n.a
       },
       jian(state){
        state.count--
       }
    },
    /*getters:{
        count:function(state){
            return state.count +=100;
        }
    },*/
    actions:{
        jiaplus(content){
            setTimeout(function(){
                content.commit("jia",{a:50});   
            },5000);
            console.log('先執行我哈哈');
        },
        jianplus({commit}){
            commit('jian');
        }
    }

});

65.

Less在項目中的使用

—————————

@black:#000000;

@white:#ffffff;

 

@gray-darker:lighten(@black,13.5%);//#222

@gray-dark:lighten(@black,20%);//#333

@gray:light(@black,33.5%)//#555

@gray-light:light(@black,33.5%)//#999

@gray:lighter(@black,33.5%)//#eee

 

@green:#49aa83

@turquoise:#399998;

@orange:#eb6419

@red:#361d39;

 

@font-size-lg:150%;

@font-size-md:100%;

@font-size-sm:75%;

 66.computed在項目中的使用

 67.有時候須要在點擊時間的後邊添加.native 成爲@click.native

68.

事件的方法中的this.$parent表達的是父組件。 

69.一類不經常使用的post提交方式。

70.子組件獲取父組件的data直接用this.$parent. 

71.這裏少了一個，號一直報組件加載不成功，找了兩個小時。

72.當圖片水平居中使用。

vertical-align: middle;
display: table-cell;

以後咱們發現，不能使用line-height:✘✘✘px由於這樣子的話，垂直居中又失效了。這個table-cell和ling-height仍是有點不一樣的。

73.這個名字和文件的名字無關。

74.這裏也能夠有兩個class

 75.vue render函數。

http://www.mamicode.com/info-detail-1906336.html

http://www.cnblogs.com/libin-1/p/6923221.html

 76.不知道爲何vuex中的store中的redcar.js會在main以前加載。

77.有時候能夠在template中使用template

 78.vue dom更新錯位的問題。

https://segmentfault.com/a/1190000007787941?_ea=1459649

79.咱們須要注意屬性,:label和label

:label後邊能夠綁定data中的數據，label中則不能綁了，純屬我的理解。

80.

今天遇到這個一個奇怪的問題，父頁面初始化完成,咱們必須觸發一次請求,可是咱們須要子頁面某些操做完成完成後(當子頁面mounted以後,這個操做還沒完成),才調用咱們父的請求,個人處理方法在created的時候，設置一個變量而後在mounted完成全部的以後把這個變量變爲true,而後當這個true的時候，子頁面調用父方法的時候才能夠,

81.vue中的方法命名的時候要注意，本身內部調用的方法用_開頭，外部調用的方法不用_開頭。es6也是一樣的。

82.vue中computed與watch的區別和聯繫

http://blog.csdn.net/webxiaoma/article/details/72626439 

（1）大多數時候使用computed比watch要簡單。

（2）能夠在computed中寫set 和get在設置和返回前觸發,

（3）watch有時間是computed替代不了的。

 83.