目錄
- Vue學習筆記01-Vue基礎
- Vue學習筆記02-Vue組件
- Vue學習筆記03-Axios
- Vue學習筆記04-Vue路由
- Vue學習筆記05-H5實例百度音樂
- Vue學習筆記06-Vuex
- Vue學習筆記07-Web商城實例
Vue基礎
1. Vue環境搭建
（1）為什么用框架（Angular,React,Vue)
很多業務邏輯移動到前段實現，Javascript文件會 越來越多，處理也胡變得更加復雜
（2）為什么選擇Vue
1.漸進式框架
2.雙向數據綁定
3.不需要操作DOM，狀態機，狀態的改變會引起試圖的更新
4.Vue不僅僅可以構建整個大型應用，還可以作為一個項目的某一個功能實現
5.Vue環境構建非常方便，vue-clie指令
6.Vue單文件組成，組件化開發
7.社區非常強大，提供各種各樣的插件供我們使用
（3）安裝
- 下載並安裝nodejs：http://nodejs.cn/download/
- 安裝cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安裝vue腳手架：npm install --global vue-cli
要安裝vue-cli（可以不用安裝vue），不然提示vue不是本地命令
（4）新建項目
- 初始化項目
vue init webpack my-project - 填寫項目信息
- Project name vb
- Project description A Vue.js project
- Author hanzhichao
- Vue build standanlone
- Install vue-router No
- Use ESLint to lint you code No
- Set to unit test No
- Setup e3e tets with Nightwatch No
- Yes use NPM
- 安裝依賴
cd my-project
npm install - 運行開發環境
npm run dev
什么是npm？
npm是隨同Nodejs一起安裝的包管理工具，能解決Nodejs代碼部署上的很多問題，常見的使用場景有以下幾種：
允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
什么是webpack？
webpack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。
https://www.cnblogs.com/-walker/p/6056529.html
2. Vue項目結構
入門示例
** main.js入口解釋**
src/main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false // 生產環境配置提示
new Vue({
el: '#app', // 綁定根視圖
components: { App }, // 加載組件
template: '<App/>' // 使用組件
模板語法
- 文本：模板
{{ 變量 }}（Mustache語法 ） - 原始html：
v-html="變量"可以解析DOM
示例：
src/App.vue
<template>
<div id="app">
{{ demo }} <!--只能展示文本-->
<div v-html="demo"></div> <!--可以展示html-->
</div>
</template>
<script>
export default {
name: 'App',
data(){
return { demo: "<h1>第一個Vue Demo</h1>" }
},
components: {
}
}
</script>
<style>
</style>
Vue的組件結構
<template>
html模板區
</template>
<script>
數據邏輯區
</script>
<style>
樣式區
</style>
項目結構
build/ --- 構建配置文件目錄
config/ --- 不同環境配置文件目錄
node_modules/ --- 依賴包
src/ --- 源碼
assets/ --- 資源文件目錄
conponents --- 組件目錄
App.vue --- Vue的單文件組件
main.js --- 入口函數
static/ --- 靜態文件目錄
.babelrc --- babel配置文件
.editorconfig
.gitignore --- git忽略文件
.postcssrc.js --- postcss配置文件
index.html --- 項目根視圖
package-lock.json
package.json --- 依賴包配置
README.md --- 項目說明
什么是babel？
babel是一個工具鏈，主要用於將ES6及以上版本的代碼轉換為向后兼容的 JavaScript語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
什么是postcss?
postcss是一種基於插件的css編譯的工具，類似babel對js的處理，常見的功能如：
1.使用下一代css語法
2.自動補全瀏覽器前綴
3.自動把px代為轉換成rem
4.css代碼壓縮等等
https://jianshu.com/p/288963680642
什么是ES6?
ES即ECMAScript，是JavaScript中的語法規范。ES6即ECMAScript 6標准語法。
3. Vue基本指令
- 文本：{{ }}
- 原始html：v-html
- 綁定屬性：v-bind，簡寫為
: - 表達式：{{ Javascript表達式 }} （只支持單行表達式語句）
- 條件渲染：
- v-if v-else v-else-if
- v-show
- 列表渲染：v-for 支持索引
(item,index)支持遍歷數[...]和對象{...} 一般要給出索引v-bind:key="index"來維護順序狀態。 - 事件綁定：v-on 簡寫為
@
v-if和v-show的區別：v-if是添加移除節點，v-show是控制節點的display。
v-if有更改的切換開銷，而v-show有更改的初始渲染開銷。如果需要頻繁切換用v-show較好。如果運行時改變較少，用v-if較好。
示例：
src/App.vue
<template>
<div id="app">
{{ demo }} <!--只能展示文本-->
<div v-html="demo"></div> <!--可以展示html-->
<div class="white" v-bind:class="active" v-bind:data-id="id">Hello</div> <!--綁定屬性-->
{{ 1+1 }} <!--使用Javascript表達式-->
{{ 10>9?'對了':'錯了'}}
{{ [1,2,3].toString() }}
{{ [1,2,3].push(4) }}
<div v-if="flag">
我是條件渲染 <!--條件渲染-->
</div>
<template v-if="flag2"> <!--template不會被渲染-->
<p>1</p>
<p>2</p>
<p>3</p>
</template>
<template v-else> <!--自動匹配上一個v-if-->
<p>4</p>
</template>
<div v-show="flag2">我是v-show</div>
<ul>
<li v-for="item in names">{{ item }}</li> <!--列表渲染-->
</ul>
<ul>
<li v-bind:key="index" v-for="(item,index) in names">{{ index+1 }} - {{ item }}</li> <!--支持使用索引-->
</ul>
<ul>
<li v-bind:key="index" v-for="(obj,key,index) in objs">{{ index+1 }} - {{ key}} : {{ obj }}</li> <!--支持對象遍歷-->
</ul>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
demo: "<h1>第一個Vue Demo</h1>",
active: "active",
id: 19,
flag: false,
flag2: true,
names: ['kevin', 'eric', 'lily'],
objs: {"name": "kevin", "age": 18},
}
},
components: {
}
}
</script>
<style lang="css">
.white {
color: white
}
.active {
background-color: red
}
</style>
數組更新檢測
以下數組操作可以引起視圖更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
而filter()、concat()和 slice()等方法由於不改變原數組，不會引起視圖更新。
示例：
<template>
<div id="app">
<ul>
<li v-for="item in names">{{ item }}</li>
</ul>
<button v-on:click="addItem" type="button" name="button">添加</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
names: ["kevin", "eric", "lily"]
}
},
methods: {
addItem(event){
this.names.push('superhin')
}
}
}
</script>
<style lang="css">
</style>
class與type綁定
<p v-bind:class="{ active: isActive }">哈哈哈</p>使用isActive變量<p v-bind:class="{ active: 0<10 }">哈哈哈</p>使用表達式<p v-bind:class="[h1, h2]">哈哈哈</p>使用h1和和兩個變量v-bind:style='myStyle' 應用myStyle樣式myStyle: {color: 'red'}`
示例：
<template>
<div id="app">
<div>
<p v-bind:class="{ active: isActive }">哈哈哈</p>
<p v-bind:class="[h1, h2]">哈哈哈</p>
<p v-bind:style="myStyle">哈哈哈</p>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
isActive: true,
h1: 'hh1',
h2: 'hh2',
myStyle: { color: 'red', fontSize: "30px"}
}
},
methods: {
addItem(event){
this.names.push('superhin')
}
}
}
</script>
<style lang="css">
</style>
計算屬性和觀察者
頁面中復雜的計算邏輯，如
{{ msg.split('').reverse().join('') }}
應使用計算屬性。
示例：
<template>
<div id="app">
<p>{{ msg }}</p>
<p>{{ messageInfo }}</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg: "hello,world"
}
},
computed: { //計算屬性
messageInfo(){
return this.msg.split('').reverse().join('');
}
}
}
</script>
<style lang="css">
</style>
計算屬性和方法的區別，計算屬性可以緩存，只要變量不變則不重新計算，方法每次都會重新計算。
4. Vue事件應用
- 監聽事件： v-on:click="counter += 1"
- 調用事件函數：v-on:click="func"
export default {
...
data(): {
msg: "hello"
}
methods: {
func(event) {
this.msg="world";
}
}
- 傳遞參數：v-on:click="func2('vue')"
export default {
...
methods: {
...,
func2(text) {
console.log(text);
}
}
- 事件修飾符（修飾符可以串聯）
- .stop：阻止單擊事件繼續傳播
- .prevent：提交事件不再重載頁面
- .capture：內部元素觸發的事件先在此處理，然后才交由內部元素進行處理
- .self：只對當前元素生效
- .once：點擊事件將只會觸發一次
- .passive：滾動事件的默認行為 (即滾動行為) 將會立即觸發
- 按鍵修飾符 v-on=keyup.enter="submit"
- .enter
- .tab
- .delete (捕獲“刪除”和“退格”鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
監聽事件示例：
<template>
<div id="app">
<button v-on:click="counter += 1" type="button" name="button">按鈕</button>
{{ counter }}
<div>
<button v-on:click="clickHandler" type="button" name="button">第二按鈕</button>
{{ eventShow }}
</div>
<button v-on:click="dataevent(content,$event)" type="button" name="button">第三按鈕</button>
<input v-on:keyup.enter="getInfo"/>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
counter: 1,
eventShow: "我是孫悟空",
content: "為師寂寞了"
}
},
components: {
},
methods: {
clickHandler(event){
console.log('事件');
this.eventShow="我是六耳獼猴";
},
dataevent(data){
console.log(data);
},
getInfo(event){
// if(event.keyCode === 13) {
// console.log('你按了回車鍵');
// }
console.log('你按了回車鍵');
}
}
}
</script>
<style lang="css">
</style>
5. Vue雙向數據綁定
表單輸入綁定：v-model
- 文本框/文本域：input/textarea v-model="msg"
- 單選/復選框：多個選項v-model使用同一個值
- 下拉框：在select處設置 select v-model="selected"
修飾符
- .lazy：v-model.lazy 不是每輸入一個就改變
- .number：轉為數字
- .trim：不處理空白字符
示例：
src/App.vue
<template>
<div id="app">
<input v-model.lazy="msg" type="text" name="" >
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg: "hello",
}
},
components: {
},
methods: {
}
}
</script>
<style lang="css">
</style>