文章目錄
Vue基礎相關內容
1.0 Vue的模板相關語法
1 插值
Vue 中通過插值語法來顯示數據
插值語法是在html標籤中, 使用
{{表達式}}的方式顯示數據. 如:<p>{{message}}</p> // {{}} 兩對大括號的形式, 是Vue中的插值.
2. 強制數據綁定
v-bind 指令, 是一個標籤的屬性, 在Vue中叫指令, 是用來強制綁定數據的.(只要是在html 標籤屬性上的值想要成爲動態的值, 就需要使用 v-bind 指令強制數據綁定.) 如下:
<a v-bind:href="url">訪問百度</a> # 簡寫如下: // 可以只寫冒號的形式簡寫. <a :href="url">訪問百度</a>
3. 事件監聽
v-on指令是事件指令, 是用來綁定事件的時候使用的指令.# 給button 綁定一個事件 <button v-on:click="showMessage">按鈕1</button> # 簡寫形式可以通過 @ 符號簡寫事件監聽的指令 <button @click="showMessage2">按鈕1</button>
4. 計算屬性
計算屬性 : 當某個屬性的值改變, 和其相關聯的屬性的值也會自動的發生改變
🏴 : 計算屬性寫法一
計算屬性的 方法形式的寫法
// 計算屬性 computed: { // 屬性名字(方法) -- 在內部操作相關聯的屬性的值就會發生變化 fullName1() { // 被計算出來的屬性值. return this.firstName + "-" + this.lastName; }, },🏴 : 計算屬性寫法二
計算屬性的 對象形式的寫法
fullName3: { get() { return this.firstName + "-" + this.lastName; }, set(val) { // val 就是 fullName3 的值 const name = val.split('-') this.firstName = name[0] this.lastName = name[1] }, },
5. 監視
監視通常是監視已有數據的改變
// 監視 已有屬性的改變 watch: { firstName(val) { // val 就是 firstName 屬性的值 this.fullName2 = val + '-' + this.lastName }, },
6. Vue中class樣式的操作
Vue中class類樣式的操作綁定. 如下:
<head> <title>title</title> <script type="text/javascript" src="../js/vue.js"></script> <style type="text/css"> #app { width: 600px; border: 1px solid red; margin: 0 auto; } .cls { color: green; } .cls1 { color: deeppink; } .cls2 { font-size: 30px; } .cls3 { font-family: "全新硬筆行書簡"; } </style> </head> <body> <div id="app"> #// 直接設置class 的值 <fieldset> <legend>class綁定:直接設置class值</legend> <p :class="myClass">這是一個P</p> <button @click="changeClass1">改變樣式</button> </fieldset> #// 使用對象的方式設置class樣式, 對象的屬性是類名, 屬性的值是 布爾值, 表示是否應用這個樣式 <fieldset> <legend> class綁定:使用對象的方式(cls是類名,固定的寫法(寫的肯定是類名,後面跟的是布爾值)) </legend> <p :class="{cls:isCls, cls2:isCls2}">不亂於心,不困於情</p> <button @click="changeClass2">改變樣式</button> </fieldset> #// 使用數組的方式給class綁定類樣式, 類樣式需要在 data 中定義 <fieldset> <legend> class綁定:使用數組方式([]裏面是動態的屬性,需要在data中定義) </legend> <p :class="[class1,class2,class3]">不念過去,不畏將來</p> <button @click="changeClass3">改變樣式</button> </fieldset> #// 也可以既直接靜態使用類樣式 和 動態綁定類樣式結合的方式綁定 class <fieldset> <legend>class綁定:動態綁定和靜態綁定結合</legend> <p class="cls2" :class="myClass">不念過去,不畏將來</p> </fieldset> #// 使用動態綁定class 的方式, 但是寫死類名.(少用, 基本不用, 無意義) <fieldset> <legend> class綁定:靜態綁定,使用動態的方式綁定數據,同時內部使用靜態值 </legend> <p :class="['cls1','cls2','cls3']">不念過去,不畏將來</p> </fieldset> </div> <p id="p1"></p> <script type="text/javascript"> // 實例化Vue對象 const vm = new Vue({ el: "#app", data: { myClass: "cls", isCls: true, isCls2: true, class1: "cls1", class2: "cls2", class3: "cls3", }, methods: { changeClass1() { this.myClass = "cls1"; // 修改類樣式 }, changeClass2() { this.isCls = !this.isCls; }, changeClass3() { this.class1 = ""; this.class2 = ""; this.class3 = ""; }, }, }); </script> </body>
7. Vue中 style 樣式的操作
Vue 中通過style的方式操作樣式
<head> <title>title</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> #// style 中書寫的時候, 有多個值, 採用對象寫法. <fieldset> <legend>style操作:style中書寫的時候有多個值,採用對象寫法</legend> <p :style="{color: fontColor, fontSize: size}">堅持不懈</p> <button @click="changeStyle">修改style</button> </fieldset> #// style 書寫的時候, 採用數組寫法, 數組中每個元素是一個對象的寫法. <fieldset> <legend>style操作:動態操作設置鍵值,採用數組寫法</legend> <p :style="[styleColor, styleSize]">努力拼搏</p> <button @click="changeStyle2">添加style樣式</button> </fieldset> </div> <script type="text/javascript"> // 實例化 Vue 對象 const vm = new Vue({ el: "#app", data: { fontColor: "green", size: "50px", styleColor: { color: "cyan", }, styleSize: { fontSize: "40px", }, }, methods: { changeStyle() { this.fontColor = "red"; this.size = "20px"; }, changeStyle2() { this.styleColor = { color: "gold", }; this.styleSize = { fontSize: "20px", }; }, }, }); </script> </body>
8. v-if 和 v-show 指令
v-if 和 v-show 指令,用來動態控制 頁面中元素是否顯示
v-if 和 v-show指令的區別
用v-if指令控制的元素, 這個標籤在頁面中要麼有, 要麼沒有. 而用 v-show 指令是設置標籤的 display 屬性是否顯示. # v-if v-if 指令,有更高的切換開銷, 因此, 如果頻繁切換dom, 一般使用 v-show指令 # v-show v-show指令, 有更高的初始化開銷, 如果運行條件很少改變, 一般使用v-show指令比較合適.
9. v-for 指令
v-for 指令循環遍歷顯示多個頁面內容.
10.0 事件參數對象傳遞
在Vue中, 函數如果要傳遞事件參數對象, 必須在調用時函數參數裏, 以
$event的方式傳遞參數.<button @click="showMessage2('我要傳事件參數', $event)">按鈕2</button> showMessage2(text, e){ console.log(text,e); }
11.0 事件修飾符和按鍵修飾符
事件的修飾符
// 阻止瀏覽器默認行爲 @click.prevent // 阻止事件冒泡 @click.stop按鍵修飾符
12.0 Vue的生命週期相關的方法
Vue官網一共有十一個生命週期函數, 常用的有 8 個生命週期函數
// 初始化之前 beforeCreate // 初始化之後 created // 界面顯示前 beforeMount // 界面顯示後 mounted // 數據更新前 beforeUpdate // 數據更新後 updated // 實例銷燬前 beforeDestroy // 實例銷燬之後 destroyed
13.0 過濾器
/** * Vue1.0中有自己的過濾器:filter * Vue2.0中所有過濾器全部被幹掉,如果需要則自己定義 * 過濾器:對要顯示的數據進行特定格式化再顯示 * 1.定義 過濾器: * Vue.Filter(filterName,function(value,[arg1,arg2,...]){ * return newValue * }) * 2.使用 過濾器: * <div>{{myData|filterName}}</div> * <div>{{myData|filterName(arg)}}</div> */Vue中過濾器主要是用來對一些數據進行格式化的操作
<h3>開始時間:{{time | formatTime}}</h3> // 定義過濾器 Vue.filter('formatTime',function (value) { return moment(value).format('YYYY-MM-DD hh:mm:ss') }) const vm = new Vue({ el: "#app", data: { time: Date.now() - 1000, }, });
自定義指令
關於自定義指令我們可以查看官網, 自行學習.理解會用即可
自定義插件
關於自定義插件我們可以查看官網, 自行學習. 理解會用即可
總結
交流學習加WeChat:
Gene199302(備註技術交流):
