組件(Component)是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素,封裝可重用的代碼
組件是自定義元素(對象)javascript
方式1:先建立組件構造器,而後由組件構造器建立組件
方式2:直接建立組件php
分類:全局組件、局部組件css
將組件內容放到模板<template>中並引用html
<component :is="">組件
多個組件使用同一個掛載點,而後動態的在它們之間切換前端
<keep-alive>組件vue
在一個組件內部定義另外一個組件,稱爲父子組件
子組件只能在父組件內部使用
默認狀況下,子組件沒法訪問父組件中的數據,每一個組件實例的做用域是獨立的java
a)在調用子組件時,綁定想要獲取的父組件中的數據
b)在子組件內部,使用props選項聲明獲取的數據,即接收來自父組件的數據
總結:父組件經過props向下傳遞數據給子組件
注:組件中的數據共有三種形式:data、props、computednode
a)在子組件中使用vm.$emit(事件名,數據)觸發一個自定義事件,事件名自定義
b)父組件在使用子組件的地方監聽子組件觸發的事件,並在父組件中定義方法,用來獲取數據
總結:子組件經過events給父組件發送消息,實際上就是子組件把本身的數據發送到父組件webpack
props是單向綁定的,當父組件的屬性變化時,將傳導給子組件,可是不會反過來
並且不容許子組件直接修改父組件中的數據,報錯
解決方式:
方式1:若是子組件想把它做爲局部數據來使用,能夠將數據存入另外一個變量中再操做,不影響父組件中的數據
方式2:若是子組件想修改數據而且同步更新到父組件,兩個方法:
a.使用.sync(1.0版本中支持,2.0版本中不支持,2.3版本又開始支持)
須要顯式地觸發一個更新事件
b.能夠將父組件中的數據包裝成對象,而後在子組件中修改對象的屬性(由於對象是引用類型,指向同一個內存空間),推薦ios
非父子組件間的通訊,能夠經過一個空的Vue實例做爲中央事件總線(事件中心),用它來觸發事件和監聽事件
var Event=new Vue();
Event.$emit(事件名,數據);
Event.$on(事件名,data => {});
本意:位置、槽
做用:用來獲取組件中的原內容,相似angular中的transclude指令
使用Vue.js開發SPA(Single Page Application)單頁面應用
根據不一樣url地址,顯示不一樣的內容,但顯示在同一個頁面中,稱爲單頁面應用
bower info vue-router cnpm install vue-router -S
a.佈局
b.配置路由
傳參的兩種形式:
a.查詢字符串:login?name=tom&pwd=123
{{$route.query}}
b.rest風格url:regist/alice/456
{{$route.params}}
router.push() 添加路由,功能上與<route-link>相同
router.replace() 替換路由,不產生歷史記錄
.vue文件,稱爲單文件組件,是Vue.js自定義的一種文件格式,一個.vue文件就是一個單獨的組件,在文件內封裝了組件相關的代碼:html、css、js
.vue文件由三部分組成:<template>、<style>、<script>
<template>
html
</template>
<style> css </style>
<script> js </script>
瀏覽器自己並不認爲.vue文件,因此必須對.vue文件進行加載解析,此時須要vue-loader
相似的loader還有許多,如:html-loader、css-loader、style-loader、babel-loader等
須要注意的是vue-loader是基於webpack的
webpack是一個前端資源模板化加載器和打包工具,它可以把各類資源都做爲模塊來使用和處理
實際上,webpack是經過不一樣的loader將這些資源加載後打包,而後輸出打包後文件
簡單來講,webpack就是一個模塊加載器,全部資源均可以做爲模塊來加載,最後打包輸出
官網
webpack版本:v1.x v2.x
webpack有一個核心配置文件:webpack.config.js,必須放在項目根目錄下
webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根據配置的運行環境自動啓用須要的babel插件
cnpm install vue-template-compiler -D //預編譯模板
合併:cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler
npm run dev
vue-cli是一個vue腳手架,能夠快速構造項目結構
vue-cli自己集成了多種項目模板:
simple 不多簡單
webpack 包含ESLint代碼規範檢查和unit單元測試等
webpack-simple 沒有代碼規範檢查和單元測試
browserify 使用的也比較多
browserify-simple
cnpm install vue-cli -g
vue --version
vue list
語法:vue init 模板名 項目名
cd vue-cli-demo
cnpm install
npm run dev //啓動測試服務
npm run build //將項目打包輸出dist目錄,項目上線的話要將dist目錄拷貝到服務器上
vue init webpack vue-cli-demo2 ESLint是用來統一代碼規範和風格的工具,如縮進、空格、符號等,要求比較嚴格
問題Bug:若是版本升級到node 8.0 和 npm 5.0,控制檯會報錯:
GET http://localhost:8080/__webpack_hmrnet::ERR_INCOMPLETE_CHUNKED_ENCODING
解決方法:
a)下降Node版本到7.9或如下
b)修改build/dev-server.js文件,以下:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat:2000 //添加此行
})
參考:https://github.com/vuejs-templates/webpack/issues/731
cnpm install vue-router -S
cnpm install axios -S
使用axios的兩種方式:
方式1:在每一個組件中引入axios
方式2:在main.js中全局引入axios並添加到Vue原型中
Element UI是餓了麼團隊提供的一套基於Vue2.0的組件庫,能夠快速搭建網站,提升開發效率
ElementUI PC端
MintUI 移動端
cnpm install element-ui -S
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //該樣式文件須要單獨引入
Vue.use(ElementUI); // 這種方式引入了ElementUI中全部的組件
CSS樣式和字體圖標都須要由相應的loader來加載,因此須要style-loader、css-loader 默認並無style-loader模塊,因此須要單獨安裝 cnpm install style-loader --save-dev
安裝loader,須要兩個:less、less-loader
在webpack.config.js中添加loader
cnpm install less less-loader -D
cnpm install babel-plugin-component -D
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
全局組件(插件):就是指能夠在main.js中使用Vue.use()進行全局引入,而後在其餘組件中就均可以使用了,如vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
普通組件(插件):每次使用時都要引入,如axios
import axios from 'axios'
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
簡單來講,用來集中管理數據,相似於React中的Redux,都是基於Flux的前端狀態管理框架
cnpm install vuex -S
Vuex的核心是Store(倉庫),至關因而一個容器,一個store實例中包含如下屬性的方法:
state 定義屬性(狀態、數據)
getters 用來獲取屬性
actions 定義方法(動做)
commit 提交變化,修改數據的惟一方式就是顯式的提交mutations
mutations 定義變化
注:不能直接修改數據,必須顯式提交變化,目的是爲了追蹤到狀態的變化
在子組件中訪問store對象的兩種方式:
方式1:經過this.$store訪問
方式2:經過mapState、mapGetters、mapActions訪問,vuex提供了兩個方法:
mapState 獲取state
mapGetters 獲取getters
mapActions 獲取actions
|-src |-store
|-index.js |-getters.js
|-actions.js |-mutations.js
|-modules //分爲多個模塊,每一個模塊均可以擁有本身的state、getters、actions、mutations |-user.js
|-cart.js |-goods.js
|....
組件(Component)是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素,封裝可重用的代碼
組件是自定義元素(對象)
方式1:先建立組件構造器,而後由組件構造器建立組件
方式2:直接建立組件
分類:全局組件、局部組件
將組件內容放到模板<template>中並引用
<component :is="">組件
多個組件使用同一個掛載點,而後動態的在它們之間切換
<keep-alive>組件
在一個組件內部定義另外一個組件,稱爲父子組件
子組件只能在父組件內部使用
默認狀況下,子組件沒法訪問父組件中的數據,每一個組件實例的做用域是獨立的
a)在調用子組件時,綁定想要獲取的父組件中的數據
b)在子組件內部,使用props選項聲明獲取的數據,即接收來自父組件的數據
總結:父組件經過props向下傳遞數據給子組件
注:組件中的數據共有三種形式:data、props、computed
a)在子組件中使用vm.$emit(事件名,數據)觸發一個自定義事件,事件名自定義
b)父組件在使用子組件的地方監聽子組件觸發的事件,並在父組件中定義方法,用來獲取數據
總結:子組件經過events給父組件發送消息,實際上就是子組件把本身的數據發送到父組件
props是單向綁定的,當父組件的屬性變化時,將傳導給子組件,可是不會反過來
並且不容許子組件直接修改父組件中的數據,報錯
解決方式:
方式1:若是子組件想把它做爲局部數據來使用,能夠將數據存入另外一個變量中再操做,不影響父組件中的數據
方式2:若是子組件想修改數據而且同步更新到父組件,兩個方法:
a.使用.sync(1.0版本中支持,2.0版本中不支持,2.3版本又開始支持)
須要顯式地觸發一個更新事件
b.能夠將父組件中的數據包裝成對象,而後在子組件中修改對象的屬性(由於對象是引用類型,指向同一個內存空間),推薦
非父子組件間的通訊,能夠經過一個空的Vue實例做爲中央事件總線(事件中心),用它來觸發事件和監聽事件
var Event=new Vue();
Event.$emit(事件名,數據);
Event.$on(事件名,data => {});
本意:位置、槽
做用:用來獲取組件中的原內容,相似angular中的transclude指令
使用Vue.js開發SPA(Single Page Application)單頁面應用
根據不一樣url地址,顯示不一樣的內容,但顯示在同一個頁面中,稱爲單頁面應用
bower info vue-router cnpm install vue-router -S
a.佈局
b.配置路由
傳參的兩種形式:
a.查詢字符串:login?name=tom&pwd=123
{{$route.query}}
b.rest風格url:regist/alice/456
{{$route.params}}
router.push() 添加路由,功能上與<route-link>相同
router.replace() 替換路由,不產生歷史記錄
.vue文件,稱爲單文件組件,是Vue.js自定義的一種文件格式,一個.vue文件就是一個單獨的組件,在文件內封裝了組件相關的代碼:html、css、js
.vue文件由三部分組成:<template>、<style>、<script>
<template>
html
</template>
<style> css </style>
<script> js </script>
瀏覽器自己並不認爲.vue文件,因此必須對.vue文件進行加載解析,此時須要vue-loader
相似的loader還有許多,如:html-loader、css-loader、style-loader、babel-loader等
須要注意的是vue-loader是基於webpack的
webpack是一個前端資源模板化加載器和打包工具,它可以把各類資源都做爲模塊來使用和處理
實際上,webpack是經過不一樣的loader將這些資源加載後打包,而後輸出打包後文件
簡單來講,webpack就是一個模塊加載器,全部資源均可以做爲模塊來加載,最後打包輸出
官網
webpack版本:v1.x v2.x
webpack有一個核心配置文件:webpack.config.js,必須放在項目根目錄下
webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根據配置的運行環境自動啓用須要的babel插件
cnpm install vue-template-compiler -D //預編譯模板
合併:cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler
npm run dev
vue-cli是一個vue腳手架,能夠快速構造項目結構
vue-cli自己集成了多種項目模板:
simple 不多簡單
webpack 包含ESLint代碼規範檢查和unit單元測試等
webpack-simple 沒有代碼規範檢查和單元測試
browserify 使用的也比較多
browserify-simple
cnpm install vue-cli -g
vue --version
vue list
語法:vue init 模板名 項目名
cd vue-cli-demo
cnpm install
npm run dev //啓動測試服務
npm run build //將項目打包輸出dist目錄,項目上線的話要將dist目錄拷貝到服務器上
vue init webpack vue-cli-demo2 ESLint是用來統一代碼規範和風格的工具,如縮進、空格、符號等,要求比較嚴格
問題Bug:若是版本升級到node 8.0 和 npm 5.0,控制檯會報錯:
GET http://localhost:8080/__webpack_hmrnet::ERR_INCOMPLETE_CHUNKED_ENCODING
解決方法:
a)下降Node版本到7.9或如下
b)修改build/dev-server.js文件,以下:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat:2000 //添加此行
})
參考:https://github.com/vuejs-templates/webpack/issues/731
cnpm install vue-router -S
cnpm install axios -S
使用axios的兩種方式:
方式1:在每一個組件中引入axios
方式2:在main.js中全局引入axios並添加到Vue原型中
Element UI是餓了麼團隊提供的一套基於Vue2.0的組件庫,能夠快速搭建網站,提升開發效率
ElementUI PC端
MintUI 移動端
cnpm install element-ui -S
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //該樣式文件須要單獨引入
Vue.use(ElementUI); // 這種方式引入了ElementUI中全部的組件
CSS樣式和字體圖標都須要由相應的loader來加載,因此須要style-loader、css-loader 默認並無style-loader模塊,因此須要單獨安裝 cnpm install style-loader --save-dev
安裝loader,須要兩個:less、less-loader
在webpack.config.js中添加loader
cnpm install less less-loader -D
cnpm install babel-plugin-component -D
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
全局組件(插件):就是指能夠在main.js中使用Vue.use()進行全局引入,而後在其餘組件中就均可以使用了,如vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
普通組件(插件):每次使用時都要引入,如axios
import axios from 'axios'
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
簡單來講,用來集中管理數據,相似於React中的Redux,都是基於Flux的前端狀態管理框架
cnpm install vuex -S
Vuex的核心是Store(倉庫),至關因而一個容器,一個store實例中包含如下屬性的方法:
state 定義屬性(狀態、數據)
getters 用來獲取屬性
actions 定義方法(動做)
commit 提交變化,修改數據的惟一方式就是顯式的提交mutations
mutations 定義變化
注:不能直接修改數據,必須顯式提交變化,目的是爲了追蹤到狀態的變化
在子組件中訪問store對象的兩種方式:
方式1:經過this.$store訪問
方式2:經過mapState、mapGetters、mapActions訪問,vuex提供了兩個方法:
mapState 獲取state
mapGetters 獲取getters
mapActions 獲取actions
|-src |-store
|-index.js |-getters.js
|-actions.js |-mutations.js
|-modules //分爲多個模塊,每一個模塊均可以擁有本身的state、getters、actions、mutations |-user.js
|-cart.js |-goods.js
|....