VUE如何操作DOM
最近有些自閉，life is a shit，但是學習不能停，也開始繼續健身了，試圖讓自己好一點.
這是學習VUE的第一篇博客，先來說一下準備工作。我們需要在谷歌商店安裝vue-devtools插件，打不開的話，點擊這里，按照步驟操作后，就可以在谷歌商店下載插件了，下載插件的步驟：點擊谷歌瀏覽器的更多工具 -> 擴展程序 -> 打開chrome網上應用商店 -> 搜索vue devtools -> 添加至chrome，之后打開嗶哩嗶哩的官網，右上角出現這個圖標，則表示已經生效了
VUE是通過傳遞一些配置給Vue對象和頁面中引用插值表達式來操作DOM的，我們就從其安裝開始說明
1.VUE的使用
點擊這里進入VUE中文官網，點擊起步-->點擊安裝-->下載開發版本，然后在頁面中直接引入就好了。引入vue.js文件后，給我們提供了一個構造函數Vue，在js中，new Vue()會返回一個vue實例對象，我們用變量接收它，傳遞一個配置對象，代碼如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue文件 --><script src="./vue.js"></script> </head> <body><script>const vm = new Vue({//配置對象config});</script> </body> </html>2.配置對象
上面說到new Vue()中可以傳遞一個配置對象，下面就來康康配置中有些什么屬性吧
1.el
屬性el的數據類型是字符串，表示element(元素)，其作用是：配置控制的元素，表示Vue要控制的區域，其值支持css選擇器的篩選方式，舉個栗子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue文件 --><script src="./vue.js"></script> </head> <body><div id="app"></div><script>const vm = new Vue({//配置對象configel: "#app" //找到dom中id為app的元素});console.log("el:",vm.$el); //$el是vm內置的對象console.log("vm:",vm);</script> </body> </html>【結果】可以看到，能夠選取到id為app的div元素
圖12.$mount
這里要首先說明的是，$mount是vue的一個方法，并不是需要配置的對象，它的作用和el相同，例
const vm = new Vue({}); console.log("el",vm.$mount("#app").$el); //$el是vm內置的對象 console.log("vm:",vm);【結果】同圖1相同
3.data
屬性data的數據類型是對象，其作用是存放要用到的數據，且數據是響應式的，例子如下
【例2】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue文件 --><script src="./vue.js"></script> </head> <body><div id="app"><!-- 將data中msg對應的數據渲染到頁面 -->{{ msg }}</div><script>const vm = new Vue({//配置對象configel: "#app" , //找到dom中id為app的元素data: {msg: "你不用裝冷淡，我沒想糾纏"}});</script> </body> </html>【結果】頁面中出現msg中的字符串
?3.插值表達式
插值表達式的使用方法是用兩個花括號將需要渲染到頁面的數據括起來，如 {{ msg }}（例2所示），插值表達式中可以填寫Vue中的data，數據值，表達式
1）填寫data
<body><div id="app"><!-- 將data中msg對應的數據渲染到頁面 -->{{ name }}{{ msg }}</div><script>const vm = new Vue({//配置對象configel: "#app", //找到dom中id為app的元素data: {msg: "你不用裝冷淡，我沒想糾纏",name: '離岸'}});</script> </body>2）填寫數據值
包括數字、字符串、布爾值、undefined、null、數組、對象等
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script> </head> <body><div id="app"><p>Number:{{ 123 }}</p><p>String：{{ '寄給你全宇宙的愛和自太古至永劫的思念'}}</p><p>Boolean：{{ true }}</p><p>Array：{{ [1,2,3] }}</p><p>Object:{{ {name:'離岸', word:'你不用裝冷淡，我沒想糾纏'} }}</p></div><script>const vm = new Vue({//配置對象configel: "#app" //找到dom中id為app的元素});</script> </body> </html>【結果】
3）表達式
A.運算表達式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script> </head> <body><div id="app"><p>加法：{{ 'you' + 'me' }}</p><p>減法：{{ 10 - 5 }}</p><p>乘法：{{ 100 * 7 }}</p><p>除法：{{ 1000 / 12 }}</p></div><script>const vm = new Vue({//配置對象configel: "#app" //找到dom中id為app的元素});</script> </body> </html>【結果】
?B.邏輯表達式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script> </head> <body><div id="app"><!-- 邏輯表達式 --><p>或:{{ 0 || 1 }}</p><p>與:{{ 1 && 0 }}</p><p>非:{{ !0 }}</p></div><script>const vm = new Vue({//配置對象configel: "#app" //找到dom中id為app的元素});</script> </body> </html>【結果】
?C.三元表達式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script> </head> <body><div id="app"><!-- 三元表達式 -->{{ 1 + 1 === 2 ? '小明勝利' : '小紅勝利' }}</div><script>const vm = new Vue({//配置對象configel: "#app" //找到dom中id為app的元素});</script> </body> </html>【結果】
?D.函數表達式
【注意】
1）插值表達式不能填的內容：語句、流程控制
2）若在插值表達式中填入未在data中聲明的數據，則會報錯
3）若填入的數據在原型鏈上找不到，則值為undefined，例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script> </head> <body><div id="app">{{ edu.highSchool }}</div><script>const vm = new Vue({//配置對象configel: "#app" , //找到dom中id為app的元素data: {name: 'jwh',edu: {college: 'Xupt',undergraduate: 'Xupt'}}});</script> </body> </html>【結果】
內容就這些了?，還是不開心，但是這次我要一個人抗，加油吧
總結
以上是生活随笔為你收集整理的VUE如何操作DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何配置webpack的loader
- 下一篇： VUE指令篇_不常用指令