原创 vue 字符串中 \n 不顯示 問題
將字符串的內容 顯示在span或其他標籤上時 \n不會正常顯示換行 解決辦法： 1.添加class white-space:pre 2.如果可以的話，使用<pre>標籤替換也可
2020-06-16 06:57:18
原创 v-html
代碼 <div id="app"> <h2 >{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="https://cdn.jsdelivr.net/npm/v
2020-06-16 06:57:18
原创 v-pre
使用場景 ： 用於對數據做原封不動的展示。 <div id="app"> <h2 >{{message}}</h2> <h2 v-pre>{{message}}</h2> </div> <script src="htt
2020-06-16 06:57:18
原创 vue 參數傳遞
傳遞參數主要有兩種類型：params和query params的類型： 配置路由格式：/router/:id 傳遞的方式：在path後面跟上對應的值 傳遞後形成的路徑：/router/123，/router/abc query的類型 （
2020-06-16 06:57:18
原创 vue 編譯作用域
能夠顯示出來 證明使用的是vue實例的變量值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>編譯作用域的概念</title>
2020-06-16 06:57:18
原创 vue 數組中的響應式方法
v-for 中 :key主要是爲了高效的更新虛擬DOM <ul> <li v-for="item in letters" :key="item">{{item}}</li> </ul> 數組中的響應式方法： p
2020-06-16 06:57:18
原创 v-on的參數問題
1.使用不帶（）的函數名@click='add'時，methods裏面add(event){} 默認傳遞了event事件，偶爾有些情況可能會使用到。 不需要參數時，可以直接使用函數名。 2.需要event對象和其他參數的情況： 手動獲取瀏
2020-06-16 06:57:18
原创 vue 具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插槽的基本使用 預備插槽 使組件更具拓展性</title> </head> <b
2020-06-16 06:57:18
原创 vue 組件的基本使用
1.vue.extend() 創建組件構造器對象 2.註冊組件 3.在el中使用組件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti
2020-02-21 22:50:06
原创 v-on修飾符 .stop
1.stop 事件冒泡的代碼 <div id="app"> <div @click="divClick"> <button @click="btnClick">按鈕</button>
2020-02-21 22:50:06
原创 v-model 結合radio的使用
使用value值 和 v-model="sex" 來實現互斥 sex的默認值 可以實現默認選中和不選中兩種效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
2020-02-21 22:50:06
原创 vue slot 插槽的基本使用
1.基本使用slot標籤 2.插槽帶默認值 3. 如果有多個值，同時放入到組件中進行替換時，一起作爲替換元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
2020-02-21 22:50:06
原创 vue 組件模板抽離
這裏用的是template標籤 還能使用script標籤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl
2020-02-21 22:50:06
原创 js 高級函數
1.filter filter中的回調函數有一個要求 必須返回一個boolean值， 返回true時，函數內部會自動將這次回調的n加入到新的數組中 返回false時，函數內部會過濾掉這個n 過濾出小於100的數字 const nums
2020-02-21 22:49:56
原创 v-model 修飾符
lazy number trim 1.lazy 用戶按下enter鍵之後纔會顯示在h2標籤中 不會像以前一樣同步顯示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
2020-02-21 22:49:56