第1 章：Vue 核心

1.1. Vue 的基本認識

1.1.1. 官網

英文官網: https://vuejs.org/

中文官網: https://cn.vuejs.org/

1.1.2. 介紹描述

漸進式JavaScript 框架

作者: 尤雨溪(一位華裔前Google 工程師)

作用: 動態構建用戶界面

1.1.3. Vue 的特點

遵循MVVM 模式

編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發

它本身只關注UI, 可以輕松引入vue 插件或其它第三庫開發項目

1.1.4. 與其它前端JS 框架的關聯

借鑒angular 的模板和數據綁定技術

借鑒react 的組件化和虛擬DOM 技術

1.1.5. Vue 擴展插件

vue-cli: vue 腳手架

vue-resource(axios): ajax 請求

vue-router: 路由

vuex: 狀態管理

vue-lazyload: 圖片懶加載

vue-scroller: 頁面滑動相關

mint-ui: 基于vue 的UI 組件庫(移動端)

element-ui: 基于vue 的UI 組件庫(PC 端)

1.2. Vue 的基本使用

理解Vue的MVVM模式：

M：model，模型，數據對象（data）
V：view，視圖，模板頁面
VM：viewModel：視圖模型（Vue的實例）

聲明式開發：Vue。
命令式開發：jQuery。

1.3. 模板語法

1. 模板的理解

動態的html頁面
包含了一些JS語法代碼
雙大括號表達式
指令(以v-開頭的自定義標簽屬性)

2. 雙大括號表達式

語法: {{exp}} 或 {{{exp}}}
功能: 向頁面輸出數據
可以調用對象的方法

附加：兩個屬性：v-text和v-html，相當于textContent和innerHTML。后者可以識別鏈接樣式的字符串。

3. 指令一: 強制數據綁定

功能: 指定變化的屬性值
完整寫法:
v-bind:xxx=‘yyy’ //yyy會作為表達式解析執行
簡潔寫法:
:xxx=‘yyy’

4. 指令二: 綁定事件監聽

功能: 綁定指定事件名的回調函數
完整寫法:
v-on:click=‘xxx’
v-on:keyup=‘xxx(參數)’
v-on:keyup.enter=‘xxx’
簡潔寫法:
@keyup=‘xxx’
@keyup.enter=‘xxx’

編碼

<div id="app"><h2>1. 雙大括號表達式</h2><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p><h2>2. 指令一: 強制數據綁定</h2><a href="url">訪問指定站點</a><br><!--不能使用--><a v-bind:href="url">訪問指定站點2</a><br><a :href="url">訪問指定站點3</a><br><h2>3. 指令二: 綁定事件監聽</h2><button v-on:click="handleClick">點我</button><button @click="handleClick">點我2</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript">new Vue({el: '#app',data: {// data 的所有屬性都會成功vm 對象的屬性, 而模板頁面中可以直接訪問msg: 'NBA I Love This Game!',url: 'http://www.baidu.com'},methods: {handleClick () {alert('處理點擊')}}}) </script>

1.4. 計算屬性和監視

計算屬性

在computed 屬性對象中定義計算屬性的方法

在頁面中使用{{方法名}}來顯示計算的結果

監視屬性

通過通過vm 對象的$watch()或watch 配置來監視指定的屬性

當屬性變化時, 回調函數自動調用, 在函數內部進行計算

計算屬性高級

通過getter/setter 實現對屬性數據的顯示和監視

getter：屬性的get方法
setter：屬性的set方法

計算屬性存在緩存, 多次讀取只執行一次getter 計算（效率優化）

回調函數滿足的三個條件：

你定義的

你沒有調用

但最終它執行了

1.5. class 與style 綁定

理解

在應用界面中, 某個(些)元素的樣式是變化的

class/style 綁定就是專門用來實現動態樣式效果的技術

class 綁定

:class=‘xxx’

表達式是字符串: ‘classA’

表達式是對象: {classA:isA, classB: isB}

表達式是數組: [‘classA’, ‘classB’]

style 綁定

:style="{ color: activeColor, fontSize: fontSize + ‘px’ }"

其中activeColor/fontSize 是data 屬性

1.6. 條件渲染

條件渲染指令

v-if 與v-else

v-show

比較v-if 與v-show

如果需要頻繁切換v-show 較好

當條件不成立時, v-if 的所有子節點不會解析(項目中使用)

v-show是將display設置為none，而v-if是創建DOM元素后插入，性能不一樣。

1.7. 列表渲染

列表顯示指令
數組: v-for / index
對象: v-for / key

列表的更新顯示
刪除item
替換item

列表的高級處理
列表過濾
列表排序

注：
1.vue本身只是監視了data里面數組對象的變化，并沒有監視數組內部數據的變化。
2.vue重寫了數組中的一系列改變數組內部數據的方法，對其進行包裝（1.調用原生，2.更新界面）。——>數組內部改變，界面自動變化。

變異方法

Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

1.8. 事件處理

綁定監聽

v-on:xxx=“fun”

@xxx=“fun”

@xxx=“fun(參數)”

默認事件形參: event

隱含屬性對象: $event

事件修飾符

.prevent : 阻止事件的默認行為event.preventDefault()

.stop : 停止事件冒泡event.stopPropagation()

按鍵修飾符

.keycode : 操作的是某個keycode 值的鍵

.keyName : 操作的某個按鍵名的鍵(少部分)

1.9. 表單輸入綁定

使用v-model 對表單數據自動收集

text/textarea

checkbox

radio

select

1.10. Vue 實例生命周期

生命周期流程圖

vue 生命周期分析

初始化顯示

• beforeCreate()
• created()
• beforeMount()
• mounted()

更新狀態: this.xxx = value

• beforeUpdate()
• updated()

銷毀vue 實例: vm.$destory()

• beforeDestory()
• destoryed()

常用的生命周期方法

created()/mounted(): 發送ajax 請求, 啟動定時器等異步任務

beforeDestory(): 做收尾工作, 如: 清除定時器

1.11. 過渡&動畫

vue 動畫的理解

操作css 的trasition 或animation

vue 會給目標元素添加/移除特定的class

過渡的相關類名
xxx-enter-active: 指定顯示的transition
xxx-leave-active: 指定隱藏的transition
xxx-enter/xxx-leave-to: 指定隱藏時的樣式

基本過渡動畫的編碼

在目標元素外包裹<transition name="xxx">

定義class 樣式
指定過渡樣式: transition
指定隱藏時的樣式: opacity/其它

1.12. 過濾器

理解過濾器

功能: 對要顯示的數據進行特定格式化后再顯示

注意: 并沒有改變原本的數據, 可是產生新的對應的數據

定義和使用過濾器

定義過濾器

Vue.filter(filterName, function(value[,arg1,arg2,...]){// 進行一定的數據處理return newValue})

使用過濾器

<div>{{myData | filterName}}</div> <div>{{myData | filterName(arg)}}</div>

1.13. 內置指令與自定義指令

常用內置指令

v:text : 更新元素的textContent

v-html : 更新元素的innerHTML

v-if : 如果為true, 當前標簽才會輸出到頁面

v-else: 如果為false, 當前標簽才會輸出到頁面

v-show : 通過控制display 樣式來控制顯示/隱藏

v-for : 遍歷數組/對象

v-on : 綁定事件監聽, 一般簡寫為@

v-bind : 強制綁定解析表達式, 可以省略v-bind

v-model : 雙向數據綁定

ref : 指定唯一標識, vue 對象通過$els 屬性訪問這個元素對象

v-cloak : 防止閃現, 與css 配合: [v-cloak] { display: none }

自定義指令

注冊全局指令

Vue.directive('my-directive', function(el, binding){el.innerHTML = binding.value.toupperCase() })

el: 指令所在的標簽對象
binding: 包含指令相關數據的容器對象

注冊局部指令

directives : {'my-directive' : {bind (el, binding) {el.innerHTML = binding.value.toupperCase()}} }

使用指令

v-my-directive='xxx'

自定義插件

說明

Vue 插件是一個包含install 方法的對象

通過install 方法給Vue 或Vue 實例添加方法, 定義全局指令等

編碼

/** * 自定義Vue 插件 */ (function () {const MyPlugin = {}MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或屬性Vue.myGlobalMethod = function () {alert('Vue 函數對象方法執行')}// 2. 添加全局資源Vue.directive('my-directive', function (el, binding) {el.innerHTML = "MyPlugin my-directive " + binding.value})// 3. 添加實例方法Vue.prototype.$myMethod = function () {alert('vue 實例對象方法執行')}}window.MyPlugin = MyPlugin })()

頁面使用插件

<div id="demo"> <!--使用自定義指令--> <p v-my-directive="msg"></p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="vue-myPlugin.js"></script> <script type="text/javascript">//使用自定義插件Vue.use(MyPlugin)var vm = new Vue({el: '#demo',data: {msg: 'atguigu'}})//調用自定義的靜態方法Vue.myGlobalMethod()//調用自定義的對象方法vm.$myMethod() </script>

注意：
1.匿名函數自調用。
2.實例方法放原型上面，一般函數名前面有個$。
3.插件庫應該在Vuejs下面引入。

內容大部分來自尚硅谷課件

總結

以上是生活随笔為你收集整理的Vue.js尚硅谷视频学习笔记(第一章：Vue 核心)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。