Vue 的基本認(rèn)識(shí)
?官網(wǎng)
1）英文官網(wǎng):https://vuejs.org/
2）中文官網(wǎng):https://cn.vuejs.org/
介紹描述
1）漸進(jìn)式 JavaScript 框架
2）作者: 尤雨溪(一位華裔前 Google 工程師)
3）作用: 動(dòng)態(tài)構(gòu)建用戶界面
?Vue 的特點(diǎn)
1）遵循 MVVM 模式
2）編碼簡(jiǎn)潔, 體積小, 運(yùn)行效率高, 適合移動(dòng)/PC 端開發(fā)
3）它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項(xiàng)目
與其它前端 JS 框架的關(guān)聯(lián)
1）借鑒 angular 的模板和數(shù)據(jù)綁定技術(shù)
2）借鑒 react 的組件化和虛擬 DOM 技術(shù)
?Vue 擴(kuò)展插件
1）vue-cli: vue 腳手架
2）vue-resource(axios): ajax 請(qǐng)求
3）vue-router: 路由
4）vuex: 狀態(tài)管理
5）vue-lazyload: 圖片懶加載
6）vue-scroller: 頁面滑動(dòng)相關(guān)
7）mint-ui: 基于 vue 的 UI 組件庫(移動(dòng)端)
8）element-ui: 基于 vue 的 UI 組件庫(PC 端)
9）它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項(xiàng)目
Vue 的基本使用
編碼
<div? id="app">
<input? type="text"? v-model="username">
<p>Hello,? {{username}}</p>
</div>
<script? type="text/javascript"? src="../js/vue.js"></script>
<script? type="text/javascript">
new? Vue({
el:? '#app',
data:? {
username:? 'vue'
}
})
</script>
?模板語法
模板的理解
1）動(dòng)態(tài)的 html 頁面
2）包含了一些 JS 語法代碼
a.雙大括號(hào)表達(dá)式
b.指令(以 v-開頭的自定義標(biāo)簽屬性)
文本
? ? <span>Message:{{msg}}</span>
原始HTML
? ? <p>Using mustaches:{{rawHtml}}<p>
? ? <p>Using v-html directive:<span v-html="rawHtml"></span></p>
?雙大括號(hào)表達(dá)式
1）語法: {{exp}}
2）功能: 向頁面輸出數(shù)據(jù)
3）可以調(diào)用對(duì)象的方法
表達(dá)式
? ? {{number + 1}}
? ? {{ok?'YES':'NO'}}
? ? {{message.split('').reverse().join('')}}
指令一: 強(qiáng)制數(shù)據(jù)綁定
1）功能: 指定變化的屬性值
2）完整寫法:
v-bind:xxx='yyy' //yyy 會(huì)作為表達(dá)式解析執(zhí)行
3）簡(jiǎn)潔寫法:
:xxx='yyy'
指令二: 綁定事件監(jiān)聽
1）功能: 綁定指定事件名的回調(diào)函數(shù)
2）完整寫法:
v-on:keyup='xxx'
v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'
3）簡(jiǎn)潔寫法:
@keyup='xxx' @keyup.enter='xxx'
計(jì)算屬性和監(jiān)視
?計(jì)算屬性
1）在 computed 屬性對(duì)象中定義計(jì)算屬性的方法
2）在頁面中使用{{方法名}}來顯示計(jì)算的結(jié)果
監(jiān)視屬性
1）通過通過 vm 對(duì)象的$watch()或 watch 配置來監(jiān)視指定的屬性
2）當(dāng)屬性變化時(shí), 回調(diào)函數(shù)自動(dòng)調(diào)用, 在函數(shù)內(nèi)部進(jìn)行計(jì)算
?計(jì)算屬性高級(jí)
1）通過 getter/setter 實(shí)現(xiàn)對(duì)屬性數(shù)據(jù)的顯示和監(jiān)視
2）計(jì)算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計(jì)算
1.5. class 與 style 綁定
理解
1）在應(yīng)用界面中, 某個(gè)(些)元素的樣式是變化的
2）class/style 綁定就是專門用來實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)
class 綁定
1）:class='xxx'
2）表達(dá)式是字符串: 'classA'
3）表達(dá)式是對(duì)象: {classA:isA, classB: isB}
4）表達(dá)式是數(shù)組: ['classA', 'classB']
style 綁定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 屬性
條件渲染
條件渲染指令
1）v-if 與 v-else
2）v-show
比較 v-if 與 v-show
3）如果需要頻繁切換 v-show 較好
4）當(dāng)條件不成立時(shí), v-if 的所有子節(jié)點(diǎn)不會(huì)解析
列表渲染
列表顯示指令
數(shù)組: v-for / index
對(duì)象: v-for / key
列表的更新顯示
刪除 item
替換 item
列表的高級(jí)處理
列表過濾
列表排序
事件處理
綁定監(jiān)聽:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(參數(shù))"
4）默認(rèn)事件形參: event
5）隱含屬性對(duì)象: $event
事件修飾符
1）.prevent : 阻止事件的默認(rèn)行為 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
按鍵修飾符
1）.keycode : 操作的是某個(gè) keycode 值的鍵
2）.keyName : 操作的某個(gè)按鍵名的鍵(少部分)
?表單輸入綁定
使用 v-model 對(duì)表單數(shù)據(jù)自動(dòng)收集
1）text/textarea
2）checkbox
3）radio
4）select
?vue 生命周期分析
1）初始化顯示
*beforeCreate()
*created()
*beforeMount()
*mounted()
2）更新狀態(tài): this.xxx = value
*beforeUpdate()
*updated()
3）銷毀 vue 實(shí)例: vm.$destory()
*beforeDestory()
*destoryed()
常用的生命周期方法
1）created()/mounted(): 發(fā)送 ajax 請(qǐng)求, 啟動(dòng)定時(shí)器等異步任務(wù)
2）beforeDestory(): 做收尾工作, 如: 清除定時(shí)器
過渡&動(dòng)畫
?vue 動(dòng)畫的理解
1）操作 css 的 trasition 或 animation
2）vue 會(huì)給目標(biāo)元素添加/移除特定的 class
3）過渡的相關(guān)類名
xxx-enter-active: 指定顯示的 transition
xxx-leave-active: 指定隱藏的 transition
xxx-enter/xxx-leave-to: 指定隱藏時(shí)的樣式
?基本過渡動(dòng)畫的編碼
1）在目標(biāo)元素外包裹
2）定義 class 樣式
指定過渡樣式: transition
指定隱藏時(shí)的樣式: opacity/其它
?過濾器
?理解過濾器
1）功能: 對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示
2）注意: 并沒有改變?cè)镜臄?shù)據(jù), 可是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)
?定義和使用過濾器
1）定義過濾器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 進(jìn)行一定的數(shù)據(jù)處理
return newValue
})
2）使用過濾器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
內(nèi)置指令與自定義指令
常用內(nèi)置指令
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果為 true, 當(dāng)前標(biāo)簽才會(huì)輸出到頁面
4）v-else: 如果為 false, 當(dāng)前標(biāo)簽才會(huì)輸出到頁面
5）v-show : 通過控制 display 樣式來控制顯示/隱藏
6）v-for : 遍歷數(shù)組/對(duì)象
7）v-on : 綁定事件監(jiān)聽, 一般簡(jiǎn)寫為@
8）v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind 簡(jiǎn)寫為:
9）v-model : 雙向數(shù)據(jù)綁定
10）ref : 指定唯一標(biāo)識(shí), vue 對(duì)象通過$refs 屬性訪問這個(gè)元素對(duì)象
11）v-cloak : 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none }
1.13.2. 自定義指令
1）注冊(cè)全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
或
// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
? // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
? inserted: function (el) {
? ? // 聚焦元素
? ? el.focus()
? }
})
2）注冊(cè)局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
自定義插件
說明
1）Vue 插件是一個(gè)包含 install 方法的對(duì)象
2）通過 install 方法給 Vue 或 Vue 實(shí)例添加方法, 定義全局指令等
使用 vue-cli 創(chuàng)建模板項(xiàng)目
說明
vue-cli 是 vue 官方提供的腳手架工具
github:https://github.com/vuejs/vue-cli
作用: 從 https://github.com/vuejs-templates 下載模板項(xiàng)目
創(chuàng)建 vue 項(xiàng)目
vue -V 顯示版本2時(shí)
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/
vue -V 顯示版本3時(shí)
npm install -g @vue/cli
vue create vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/
模板項(xiàng)目的結(jié)構(gòu)
|-- build : webpack 相關(guān)的配置文件夾(基本不需要修改)
|-- dev-server.js : 通過 express 啟動(dòng)后臺(tái)服務(wù)器
|-- config: webpack 相關(guān)的配置文件夾(基本不需要修改)
|-- index.js: 指定的后臺(tái)服務(wù)的端口號(hào)和靜態(tài)資源文件夾
|-- node_modules
|-- src : 源碼文件夾
|-- components: vue 組件及其相關(guān)資源文件夾
|-- App.vue: 應(yīng)用根主組件
|-- main.js: 應(yīng)用入口 js
|-- static: 靜態(tài)資源文件夾
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 檢查忽略的配置
|-- .eslintrc.js: eslint 檢查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主頁面文件
|-- package.json: 應(yīng)用包配置文件
|-- README.md: 應(yīng)用描述說明的 readme 文件
?項(xiàng)目的打包與發(fā)布
打包:
npm run build
發(fā)布 1: 使用靜態(tài)服務(wù)器工具包
npm install -g serve
serve dist
訪問: http://localhost:5000
發(fā)布 2: 使用動(dòng)態(tài) web 服務(wù)器(tomcat)
修改配置: webpack.prod.conf.js
output: {
???? publicPath: '/xxx/' //打包文件夾的名稱
}
重新打包:
npm run build
修改 dist 文件夾為項(xiàng)目名稱: xxx
將 xxx 拷貝到運(yùn)行的 tomcat 的 webapps 目錄下訪問: http://localhost:8080/xxx
?ESLint
說明
ESLint 是一個(gè)代碼規(guī)范檢查工具
它定義了很多特定的規(guī)則, 一旦你的代碼違背了某一規(guī)則, eslint 會(huì)作出非常有用的提示
官網(wǎng): http://eslint.org/
基本已替代以前的 JSLint
ESLint 提供以下支持
ES
JSX
style 檢查
自定義錯(cuò)誤和提示
ESLint 提供以下幾種校驗(yàn)
語法錯(cuò)誤校驗(yàn)
不重要或丟失的標(biāo)點(diǎn)符號(hào)，如分號(hào)
沒法運(yùn)行到的代碼塊
未被使用的參數(shù)提醒
確保樣式的統(tǒng)一規(guī)則，如 sass 或者 less
檢查變量的命名
規(guī)則的錯(cuò)誤等級(jí)有三種
0：關(guān)閉規(guī)則。
1：打開規(guī)則，并且作為一個(gè)警告（信息打印黃色字體）
2：打開規(guī)則，并且作為一個(gè)錯(cuò)誤（信息打印紅色字體）
?相關(guān)配置文件
.eslintrc.js : 全局規(guī)則配置文件
'rules': {
???? 'no-new': 1
}
在 js/vue 文件中修改局部規(guī)則
/* eslint-disable no-new */
new Vue({
???? el: 'body',
components: { App }
})
.eslintignore: 指令檢查忽略的文件
*.js
*.vue
組件定義與使用
?vue 文件的組成(3 個(gè)部分)
模板頁面
<template>
頁面模板
</template>
JS 模塊對(duì)象
<script>
???? export default {
???????? data() {return {}},
???????? methods: {},
???????? computed: {},
???????? components: {}
}
</script>
樣式
<style>
樣式定義
</style>
基本使用
引入組件
映射成標(biāo)簽
使用組件標(biāo)簽
<template>
???? <HelloWorld></HelloWorld>
???? <hello-world></hello-world>
</template>
<script>
???? import HelloWorld from './components/HelloWorld'
???? export default {
???????? components: {
???????????? HelloWorld
???????? }
???? }
</script>
關(guān)于標(biāo)簽名與標(biāo)簽屬性名書寫問題
寫法一：一模一樣
寫法二：大寫變小寫, 并用-連接
?組件間通信
組件間通信基本原則
不要在子組件中直接修改父組件的狀態(tài)數(shù)據(jù)
數(shù)據(jù)在哪, 更新數(shù)據(jù)的行為(函數(shù))就應(yīng)該定義在哪
vue 組件間通信方式
props
vue 的自定義事件
消息訂閱與發(fā)布(如: pubsub 庫)
slot
vuex
組件間通信 1: props
使用組件標(biāo)簽時(shí)
<my-component name = 'tom' :age = '3' :set-name = 'setName'></my-component>
定義 MyComponent 時(shí)
在組件內(nèi)聲明所有的 props
方式一: 只指定名稱
props: ['name', 'age', 'setName']
方式二: 指定名稱和類型
props: {
???? name: String, age: Number,
???? setNmae: Function
}
方式三: 指定名稱/類型/必要性/默認(rèn)值
props: {
???? name: {type: String, required: true, default:xxx},
}
?注意
此方式用于父組件向子組件傳遞數(shù)據(jù)
所有標(biāo)簽屬性都會(huì)成為組件對(duì)象的屬性, 模板頁面可以直接引用
問題:
a.如果需要向非子后代傳遞數(shù)據(jù)必須多層逐層傳遞
b.兄弟組件間也不能直接 props 通信, 必須借助父組件才可以
?組件間通信 2: vue 自定義事件
綁定事件監(jiān)聽
// 方式一：通過 v-on 綁定
@delete_todo="deleteTodo"
// 方式二：通過 $on()
this.$refs.xxx.$on('delete_todo', function (todo) {
???? this.deleteTodo(todo)
})
觸發(fā)事件
// 觸發(fā)事件(只能在父組件中接收)
this.$emit(eventName, data)
?注意:
此方式只用于子組件向父組件發(fā)送消息(數(shù)據(jù))
問題: 隔代組件或兄弟組件間通信此種方式不合適
?組件間通信 3: 消息訂閱與發(fā)布(PubSubJS 庫)
?訂閱消息
PubSub.subscribe('msg', function(msg, data){})
發(fā)布消息
PubSub.publish('msg', data)
注意
優(yōu)點(diǎn): 此方式可實(shí)現(xiàn)任意關(guān)系組件間通信(數(shù)據(jù))
事件的 2 個(gè)重要操作(總結(jié))
綁定事件監(jiān)聽 (訂閱消息)
目標(biāo): 標(biāo)簽元素 <button>
事件名(類型): click/focus
回調(diào)函數(shù): function(event){}
