推薦大家安裝的 VScode 中的 Vue 插件

Vue 3 Snippets Vue 3 Snippets - Visual Studio Marketplace

Vetur Vetur - Visual Studio Marketplace

什么是 vue

構建用戶界面

• 用 vue 往 html 頁面中填充數據，非常的方便

框架

• 框架是一套現成的解決方案，程序員只能遵守框架的規范，去編寫自己的業務功能！

• 要學習 vue，就是在學習 vue 框架中規定的用法！

• vue 的指令、組件（是對 UI 結構的復用）、路由、Vuex、vue 組件庫

• 只有把上面老師羅列的內容掌握以后，才有開發 vue 項目的能力！

vue 的兩個特性

數據驅動視圖：

• 數據的變化會驅動視圖自動更新

• 好處：程序員只管把數據維護好，那么頁面結構會被 vue 自動渲染出來！

雙向數據綁定：

在網頁中，form 表單負責采集數據，Ajax 負責提交數據。

• js 數據的變化，會被自動渲染到頁面上

• 頁面上表單采集的數據發生變化的時候，會被 vue 自動獲取到，并更新到 js 數據中

注意：數據驅動視圖和雙向數據綁定的底層原理是 MVVM（Mode 數據源、View 視圖、ViewModel 就是 vue 的實例）

vue 指令

1. 內容渲染指令 (用來輔助開發者渲染DOM元素的文本類容)

v-text 指令的缺點：會覆蓋元素內部原有的內容！

{{ }} 插值表達式：在實際開發中用的最多，只是內容的占位符，不會覆蓋原有的內容！

v-html 指令的作用：可以把帶有標簽的字符串，渲染成真正的 HTML 內容！

2. 屬性綁定指令

注意：插值表達式只能用在元素的內容節點中，不能用在元素的屬性節點中！

• 在 vue 中，可以使用 v-bind: 指令，為元素的屬性動態綁定值；

• 簡寫是英文的 :

• 在使用 v-bind 屬性綁定期間，如果綁定內容需要進行動態拼接，則字符串的外面應該包裹單引號，例如：

  <div :title="'box' + index">這是一個 div</div>

3. 事件綁定

v-on: 簡寫是 @

語法格式為：

<button @click="add"></button> ? methods: {add() {// 如果在方法中要修改 data 中的數據，可以通過 this 訪問到this.count += 1} }

$event 的應用場景：如果默認的事件對象 e 被覆蓋了，則可以手動傳遞一個 $event。例如：

<button @click="add(3, $event)"></button> ? methods: {add(n, e) {// 如果在方法中要修改 data 中的數據，可以通過 this 訪問到this.count += 1} }

事件修飾符：

• .prevent 阻止事件默認行為

  <a @click.prevent="xxx">鏈接</a>

• .stop 阻止冒泡

  <button @click.stop="xxx">按鈕</button>

4. v-model 指令（雙向綁定指令）

input 輸入框

• type="radio"

• type="checkbox"

• type="xxxx"

textarea

select

v-model指令的修飾符

• .number 自動將用戶的輸入值轉換為數值類型

  <input v-model.number="age" />

• .trim 自動過濾用戶輸入的首尾空白字符

  <input v-model.trim="msg" />

• .lazy 在“ change ” 時而非“ input ” 時更新

  <input v-model.lazy="msg" />

5. 條件渲染指令

v-show 的原理是：動態為元素添加或移除 display: none 樣式，來實現元素的顯示和隱藏

• 如果要頻繁的切換元素的顯示狀態，用 v-show 性能會更好

v-if 的原理是：每次動態創建或移除元素，實現元素的顯示和隱藏

• 如果剛進入頁面的時候，某些元素默認不需要被展示，而且后期這個元素很可能也不需要被展示出來，此時 v-if 性能更好

在實際開發中，絕大多數情況，不用考慮性能問題，直接使用 v-if 就好了！！！

v-if 指令在使用的時候，有兩種方式：

直接給定一個布爾值 true 或 false

<p v-if="true">被 v-if 控制的元素</p>

給 v-if 提供一個判斷條件，根據判斷的結果是 true 或 false，來控制元素的顯示和隱藏

<p v-if="type === 'A'">良好</p>

6.列表渲染指令

v-for指令需要使用 item in items 的形式的特殊語法

items是待循環的數組 item是被循環的每一項

data:{list:[{id:1,name:'zs'},{id:2,name:'ls'} ] } ? <ul><li v-for="item in list">姓名是:{{item.name}}</li> </ul>

v-for指令還支持一個可選的第二個參數，即當前項的索引。 語法格式為(item,index)in items.

3.官方建議：只要用到了v-for指令，那么一定要綁定一個：key屬性，而且盡量把Id作為key的值

4.官方對于key的類型是有要求的：字符串或數字類型。 key值不能重復，必須具有唯一性

過濾器

過濾器的注意點

要定義到 filters 節點下，本質是一個函數

在過濾器函數中，一定要有 return 值

在過濾器的形參中，可以獲取到“管道符”(|)前面待處理的那個值

如果全局過濾器和私有過濾器名字一致，此時按照“就近原則”，調用的是”私有過濾器“

watch 偵聽器

偵聽器的格式

方法格式的偵聽器

• 缺點1：無法在剛進入頁面的時候，自動觸發！！！

• 缺點2：如果偵聽的是一個對象，如果對象中的屬性發生了變化，不會觸發偵聽器！！！

對象格式的偵聽器

• 好處1：可以通過 immediate 選項，讓偵聽器自動觸發！！！

• 好處2：可以通過 deep 選項，讓偵聽器深度監聽對象中每個屬性的變化！！！

watch偵聽器允許開發者監視數據的變化，從而針對數據的變化做特定的操作

<div id="app"><input type="text" v-model="username"></div><script>const vm = new Vue({el: '#app',data: {username: 'admin'},// 所有的偵聽器，都應該被定義到 watch 節點下watch: {// 偵聽器本質上是一個函數，要監視哪個數據的變化，就把數據名作為方法名即可// 新值在前，舊值在后username(newVal,oldVal) {console.log(newVal,oldVal)}}})</script>

計算屬性

定義到computed中

特點：

定義的時候，要被定義為“方法”

在使用計算屬性的時候，當普通的屬性使用即可

好處：

實現了代碼的復用

只要計算屬性中依賴的數據源變化了，則計算屬性會自動重新求值！

axios

axios 是一個專注于網絡請求的庫！

axios 的基本使用

發起 GET 請求：

axios({// 請求方式method: 'GET',// 請求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查詢參數params: {id: 1} }).then(function (result) {console.log(result) })

發起 POST 請求：

document.querySelector('#btnPost').addEventListener('click', async function () {// 如果調用某個方法的返回值是 Promise 實例，則前面可以添加 await！// await 只能用在被 async “修飾”的方法中const { data: res } = await axios({method: 'POST', url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}}) ?console.log(res) })

vue-cli 的使用

在終端下運行如下的命令，創建指定名稱的項目：

vue cerate 項目的名稱

vue 項目中 src 目錄的構成：

? assets 文件夾：存放項目中用到的靜態資源文件，例如：css 樣式表、圖片資源 components 文件夾：程序員封裝的、可復用的組件，都要放到 components 目錄下 main.js 是項目的入口文件。整個項目的運行，要先執行 main.js App.vue 是項目的根組件。

vue組件

---

1.介紹與使用

• 組件在被封裝好之后，彼此之間是相互獨立的，不存在父子關系。

• 在使用組件的時候，根據彼此的嵌套關系，形成父子關系，兄弟關系。

• 使用組件的三個步驟

• 使用import語法導入需要的組件

  import left from '@/components/left.vue'

• 使用components節點注冊組件 （通過components注冊的是私有組件）

  export default{compoments:{left} }

• 以標簽形式使用剛才注冊的組件

  <div class="box"><left></left> </div>

2.注冊全局組件

在vue項目的 main.js 入口文件中，通過 vue.components() 方法，可以注冊全局組件。如下

//導入需要被注冊的組件 import Count from '@/components/Count.vue'//參數1：字符串格式，表示組件的“注冊名稱” //參數2：需要被全局注冊的那個組件Vue.components('MyCount','Count')

3.組件中的props

• props是組件的自定義屬性，在封裝通用組件的時候，合理地使用props可以極大地提高組件的復用性！

  export default{//組件的自定義屬性props:['自定義屬性A','自定義屬性B','其他自定義屬性...'],//組件的私有數據data(){return{}} }

• props中的數據，可以直接在模板結構中使用

• props是只讀的，不能直接修改props的值,想要修改props的值，可以吧props的值轉存到data中(data中的數據都是可讀可寫的！)

  export default{//組件的自定義屬性props:['自定義屬性A','自定義屬性B','其他自定義屬性...'],//組件的私有數據data(){return{count:this.init}} }

• 在聲明自定義屬性時，可以通過default來定義屬性的默認值。例如：

  export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認值default:0}} }

4.props的type值類型

• 在聲明自定義屬性時，可以通過type來定義屬性的值類型

  export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認值default:0,//如果傳遞過來的值不符合此類型，則會在終端報錯type:Number}} }

5.required必填項

export default{//組件的自定義屬性props:{init:{//用default 屬性定義屬性的默認值default:0,//如果傳遞過來的值不符合此類型，則會在終端報錯type:Number,//必填校驗項,如果不傳init 則終端報錯 required:true}} }

6.組件之間的樣式沖突問題

默認情況下，寫在.vue組件中的樣式會全局生效,因此會造成多個組件之間的樣式沖突問題.

根本原因：

單頁面應用程序中，所有組件的DOM結構，都是基于唯一的index.html頁面進行呈現的

每個組件中的樣式，都會影響整個index.html頁面中的DOM元素

組件的生命周期

---

1.生命周期&生命周期函數

• 生命周期（Life Cycle）是指一個組件從創建->運行->銷毀的整個階段，強調的是一個時間段。

• 生命周期函數：是由Vue框架提供的內置韓式，會伴隨著組件的生命周期，自動按次序執行。

• ?

  ?

• <template><div class="test-container"><h3 id="myh3">Test.vue 組件 --- {{ books.length }} 本圖書</h3><p id="pppp">message 的值是：{{ message }}</p><button @click="message += '~'">修改 message 的值</button></div> </template><script> export default {props: ["info"],data() {return {message: "hello vue.js",// 定義 books 數組，存儲的是所有圖書的列表數據。默認為空數組！books: [],};},watch: {message(newVal) {console.log("監視到了 message 的變化：" + newVal);},},methods: {show() {console.log("調用了 Test 組件的 show 方法！");},// 使用 Ajax 請求圖書列表的數據initBookList() {const xhr = new XMLHttpRequest();xhr.addEventListener("load", () => {const result = JSON.parse(xhr.responseText);console.log(result);this.books = result.data;});xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");xhr.send();},},// 創建階段的第1個生命周期函數beforeCreate() {// console.log(this.info)// console.log(this.message)// this.show()},created() {// created 生命周期函數，非常常用。// 經常在它里面，調用 methods 中的方法，請求服務器的數據。// 并且，把請求到的數據，轉存到 data 中，供 template 模板渲染的時候使用！this.initBookList();},beforeMount() {// console.log('beforeMount')// const dom = document.querySelector('#myh3')// console.log(dom)},// 如果要操作當前組件的 DOM，最早，只能在 mounted 階段執行mounted() {// console.log(this.$el)// const dom = document.querySelector('#myh3')// console.log(dom)},beforeUpdate() {// console.log('beforeUpdate')// console.log(this.message)// const dom = document.querySelector('#pppp')// console.log(dom.innerHTML)},// 當數據變化之后，為了能夠操作到最新的 DOM 結構，必須把代碼寫到 updated 生命周期函數中updated() {// console.log('updated')// console.log(this.message)// const dom = document.querySelector('#pppp')// console.log(dom.innerHTML)},beforeDestroy() {console.log("beforeDestroy");this.message = "aaa";console.log(this.message);},destroyed() {console.log("destroyed");// this.message = 'aaa'}, }; </script><style lang="less" scoped> .test-container {background-color: pink;height: 200px; } </style>

2.組件之間的數據共享

• 組件之間的關系（常見關系）

• 父子關系

• 兄弟關系

• 組件之間的數據共享

  1.父組件向子組件共享數據需要使用自定義屬性。

  2.子組件向父組件共享數據需要使用自定義事件。

• 兄弟組件之間的數據共享

  在vue.2x中，兄弟組件之間數據共享的方案是EventBus

  EventBus 的使用步驟

• 創建eventBus.js模塊，并向外共享一個Vue的實力對象

• 在數據發送方，調用 bus.$emit 方法觸發自定義事件

• 在數據接收方，調用 bus.$on 方法注冊一個自定義事件

?

ref引用

1.ref引用DOM

ref用來輔助開發者在不依賴jQuery的情況下，獲取DOM元素或組件的引用

<p ref="myp"></p>export default{methods:{this.$refs.myp.style.color = 'red'} }

2.ref引用組件實例

可以用this.$refs.引用的名稱 來引用組件的實例

3.this.$nextTick(cb)方法

組件的$nextTick(cb) 方法，會把cb回調推遲到下一個DOM更新周期之后執行。

通俗的理解是：等組件的DOM更新完成之后，在執行cb回調函數。從而能保證cb 回調函數可以操作到最新的DOM元素。

動態組件

1.實現動態組件渲染

vue提供了一個內置的<component>組件，專門用來渲染實現動態組件的渲染

<template><div class="app-container"><h1>App 根組件</h1><hr /><button @click="comName = 'Left'">left</button><button @click="comName = 'Right'">right</button><div class="box"><!-- 渲染 Left 組件和 Right 組件 --><component :is="comName"></component></div></div> </template><script> import Left from "@/components/Left.vue"; import Right from "@/components/Right.vue"; export default {data() {return {comName: "",};},components: {Left,Right,}, }; </script>

2.使用keep-alive 保持狀態

keep-alive 可以把內部的組件進行緩存，而不是銷毀組件

<keep-alive><component :is="comName"></component> </keep-alive>

3. keep-alive 對應的生命周期函數

當組件被緩存時，會自動觸發組件的deactivated 生命周期函數

當組件被激活時，對自動觸發組件的activated 生命周期函數

4. keep-alive 的include屬性

<keep-alive include="Left,Right"> //指定哪些組件需要被緩存 <component :is="comName"></component> </keep-alive>

插槽

1.什么是插槽

插槽（slot）是vue為組件的封裝者提供的能力。允許開發者在封裝組件時，把不確定的、希望用戶指定的部分定義為插槽。

?

vue官方規定：每一個 slot 插槽，都要有一個 name 名稱

如果省略了 slot 的 name 屬性，則有一個默認名稱叫做 default

2.v-slot指令

1. 如果要把內容填充到指定名稱的插槽中，需要使用 v-slot：這個指令 2. v-slot：后面要跟上插槽的名字 3. v-slot：指令不能用在元素身上，必須用在template標簽上 4. template這個標簽，它是一個虛擬標簽，只起到包裹性的作用 5. v-slot的簡寫是#

3.后備內容

封裝組件時，可以為預留的<slot>插槽提供后備內容。如果組件的使用者沒有為插槽提供任何內容，則后備內容會生效。

4.作用域插槽

在封裝組件時，為預留的<slot>提供屬性對應的值，這種用法，叫做 “ 作用域插槽 ”。

<Left><template #con="obj"><h3>pppppp</h3><p>{{ obj.msg }}</p></template></Left><slot name="con" msg="hello"> </slot>

自定義指令

1.vue中的自定義指令分為兩類

• 私有自定義指令

• 全局自定義指令

2.私有自定義指令

在每個vue組件中，可以在directives節點下聲明私有自定義指令。

//私有指令節點directives: {color: {bind(el) {el.style.color = "red";// console.log(111);},},}

3.鉤子函數

指令定義函數提供了幾個鉤子函數（可選）：

• bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。

• inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于 document 中）。

• update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。

• componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。

• unbind: 只調用一次， 指令與元素解綁時調用。

接下來我們來看一下鉤子函數的參數 (包括 el，binding，vnode，oldVnode) 。

鉤子函數被賦予了以下參數：

• el: 指令所綁定的元素，可以用來直接操作 DOM 。

• binding

  : 一個對象，包含以下屬性：

  • name: 指令名，不包括 v- 前綴。

  • value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。

  • oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

  • expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

  • arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。

  • modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。

• vnode: Vue 編譯生成的虛擬節點，查閱 VNode API 了解更多詳情。

• oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 之外，其它參數都應該是只讀的，盡量不要修改他們。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行。

一個使用了這些參數的自定義鉤子樣例：

<div id="hook-arguments-example" v-demo:hello.a.b="message"></div> Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')} })new Vue({el: '#hook-arguments-example',data: {message: 'hello!'} })

name: "demo" value: "hello!" expression: "message" argument: "hello" modifiers: {"a":true,"b":true} vnode keys: tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, child, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce

4.函數簡寫

大多數情況下，我們可能想在 bind 和 update 鉤子上做重復動作，并且不想關心其它的鉤子函數。可以這樣寫:

Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value })

5.對象字面量

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法類型的 Javascript 表達式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!" })

路由

1.前端路由的工作方式

用戶點擊了頁面上的路由鏈接

導致URl地址欄中的Hash值發生了變化

前端路由監聽到了Hash地址變化

前端路由把當前的 Hash 地址對應的組件渲染到瀏覽器中

?

2.底層原理

利用 windows.onhashchange 來監聽hash地址的變化，綁定動態組件實現路由效果

3.路由配置安裝

//導入Vue和 VueRouter 的包 import Vue from 'vue' import VueRouter from 'vue-router' //調用Vue.use()函數，把VueRouter 安裝為 Vue 的插件 Vue.use(VueRouter)//創建路由的實例對象 const rooter = new VueRouter()//向外共享 export default rooter //main.js import Vue from 'vue' import App from './App.vue' //導入路由模塊，拿到實例對象//在進行模塊導入的時候，如果給定的是文件夾，則默認導入這個文件夾下，名字叫做index.js的文件import router from '@/router/index.js'// 導入 bootstrap 樣式 import 'bootstrap/dist/css/bootstrap.min.css' // 全局樣式 import '@/assets/global.css'Vue.config.productionTip = falsenew Vue({render: h => h(App),//把路由實例對象掛載router: router }).$mount('#app')

4.路由的重定向

路由的重定向指的是：用戶在訪問地址A的時候，強制用戶跳轉到地址C，從而展示特定的組件頁面。通過路由規則的redirect屬性，指定一個新的路由地址，可以很方便地設置路由的重定向。

const router = new VueRouter({routes: [//當用戶訪問 / 的時候，通過redirect 屬性跳轉到 /home 對應的路由規則{path:'/',redirect:'/home'},{ path: '/home', component: Home },{ path: '/movie', component: Movie },{ path: '/about', component: About }] })

5.嵌套路由

通過children 屬性聲明子路由規則

//index.js{path: '/about',component: About,redirect: '/about/tab1',//子路由規則children: [{ path: 'tab1', component: Tab1 },{ path: 'tab2', component: Tab2 }]} //about.vue<router-link to="/about/tab1">Tab1</router-link><router-link to="/about/tab2">Tab2</router-link><hr /><router-view></router-view>

默認子路由：如果 children 數組中，某個路由規則的 path 值為空字符串，則這條路由規則，叫做 “ 默認子路由 ”

6.動態路由匹配

動態路由匹配 | Vue Router

{ path: 'userinfo/:id', component: UserDetail, props: true } //動態參數項 props傳值

7.聲明式導航&編程式導航

1.在瀏覽器中，點擊鏈接實現導航的方式，叫做聲明式導航。

2.在瀏覽器中，調用API方法實現的導航的方式，叫做編程式導航。例如

在普通網頁中調用location.href跳轉到新頁面的方式，屬于編程式導航。

vue-router 中的編程式導航API

this.$router.push('hash地址')

跳轉到指定的地址，并增加一條瀏覽記錄

this.$router.replace('hash地址')

跳轉到指定的地址，并替換掉當前的瀏覽記錄

this.$router.go(數值n)

可以在瀏覽歷史中前進和后退

如果前進、后退的層數超過最大限制，則原地不動

this.$router 的簡化用法

$router.back() $router.forward()

導航守衛

1.全局前置守衛

每次發生路由的導航跳轉時，都會觸發全局前置守衛。因此，在全局前置守衛中，程序員可以對每個路由進行訪問權限的控制：

const router = new VueRouter({...})//調用路由實例對象的 beforeEach 方法，即可聲明“全局前置守衛” //每次發生路由跳轉的時候，都會自動觸發 fn 這個“回調函數” router.beforeEach(fn)

2.回調函數中接受的三個實參

router.beforeEach((to,from,next)=>{//to 是將要訪問的路由的信息對象//from 是將要離開的路由的信息對象//next 是一個函數，調用next()表示放行，允許這次路由導航 })

?

總結

以上是生活随笔為你收集整理的Vue2学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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