【Vue學習】基礎

韶音鄀逝發表於2020-11-05

一. Vue基礎

Vue是一個漸進式JavaScript國產框架。是由尤雨溪建立的。2014年2月Vue正式釋出。

官網：https://cn.vuejs.org/

漸進式

宣告式渲染—元件系統—客戶端路由----集中式狀態管理----專案構建

1. 基本使用

<body>
    <div id="test">
        {{msg}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#test',
            data:{
                msg:'hello world'
            }
        })
    </script>
</body>

引數：

el: 元素的掛載位置(值可以是CSS選擇器或DOM元素)
data：模型資料(值是一個物件)

差值表示式用法

將資料填充到HTML標籤中
插值表示式支援基本的計算操作

2. 模板語法

前端渲染：指把資料填充到HTML標籤中，前端渲染方式：

原生js拼接字串：把資料以字串的方式拼接到HTML標籤中，但不夠規範
使用前端模板引擎：引用一套新模板語法規則，比拼接字串更規範，但缺少事件機制
使用Vue特有的模板語法
- 差值表示式
- 指令
- 事件繫結
- 屬性繫結
- 樣式繫結
- 分支迴圈結構

3. 指令

指令的本質就是自定義屬性，格式以v-開始(如：v-cloak)

v-cloak指令

差值表示式存在‘閃動’問題，而v-cloak可以解決該問題。
解決原理：先通過樣式隱藏內容，然後在記憶體中進行替換，替換好值之後再顯示最終的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-cloak指令</title>
    <script src="../vue.js"></script>
    <style>
        /* 提供樣式 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="test">
        <!-- 在插值表示式所在標籤中新增v-cloak -->
        <div v-cloak>
            {{msg}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#test',
            data:{
                msg:'hello world'
            }
        })
    </script>
</body>
</html>

資料繫結指令

資料繫結: 指將資料填充到標籤中

v-text：填充純文字

沒有‘閃動’問題，且比差值表示式更簡潔。推薦使用

<div id="test">
<div v-text='msg'></div>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
    msg: 'hello world'
}
})
</script>

v-html：填充HTML片段
存在安全隱患，在網站上動態渲染HTML是非常危險的，容易導致XSS攻擊

使用原則：本站內部資料可以使用，來自第三方的資料不可以用
```
<div id="test">
<div v-html='msg'></div>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
    msg: '<h1>hello world</h1>'
}
})
</script>
```

v-pre：填充原始資訊

顯示原始資訊，跳過編譯過程

<div id="test">
<div v-pre>
{{msg}}
</div>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
    msg: '<h1>hello world</h1>'
}
})
</script>

資料響應式

在html5中的響應式：螢幕尺寸的變化導致樣式的變化

資料響應式：資料的變化導致頁面內容的變化

v-once指令：只編譯一次，顯示內容之後不再具有響應式功能

<div id="test">
    <div v-text='msg'></div>
    <div v-once>
        {{msg}}
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            msg: 'hello world'
        }
    })
</script>

如果顯示的資訊後續不需要修改，可以使用v-once，這樣能提高效能

雙向資料繫結

當使用者更改頁面內容時，資料會變化。當更改資料時，顯示頁面內容也變化

v-model指令：用於雙向繫結資料

<div id="test">
    <div v-text='msg'></div>
    <div>
        <input type="text" v-model='msg'>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            msg: 'hello world'
        }
    })
</script>

MVVM設計思想
- M(model) V(view) VM(View-Model)
- 把不同的業務程式碼放到不同的模組當中，然後再通過特定的邏輯組織到一起
- 從檢視到模型用的是事件監聽，從模型到檢視用的是事件繫結

v-model原理

<div id="cont">
    <div v-text='msg'></div>
    <input type="text" v-bind:value='msg' v-on:input='handel'>
    <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
    <input type="text" v-model='msg'>
</div>
<script>
    let vm = new Vue({
        el: '#cont',
        data: {
            msg: 'hello'
        },
        methods: {
            handel: function (event) {
                this.msg = event.target.value;
            }
        }
    })
</script>

4. 事件繫結

v-on指令：可以繫結標準事件

<div id="test">
    <div v-text='num'></div>
    <div>
        <button v-on:click='num++'>點選加1</button>
        <button @click='num--'>點選減1</button>
        <button @click='add'>點選加1</button>
        <button @click='add()'>點選加1</button>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            num:0
        },
        methods:{
            add:function(){
                // 這裡的this指vm
                this.num++
            }
        }
    })
</script>

v-on兩種語法：

<button v-on:click=''></button>
<button @click=''></button>

事件函式：

提供了methods來新增事件函式，值為一個物件，可以儲存多個事件

事件函式的呼叫
- 直接繫結函式名：<button @click='add'></button>
  - 預設攜帶事件物件
- 呼叫函式：<button @click='add()'></button>
  - 如果要傳遞引數只能用此方式

 <div id="test">
     <div v-text='msg'></div>
     <div>
         <button @click="pt('hello','world',$event)">按鈕一</button>
         <button @click='pt2'>按鈕二</button>
     </div>
 </div>
 <script>
     /*
         如果事件直接繫結事件名稱，會預設傳遞事件物件作為第一個引數
         如果事件繫結函式呼叫，事件物件必須作為最後一個物件顯示傳遞，且事件物件的名稱必須是$event
     */
     var vm = new Vue({
         el: '#test',
         data: {
             msg: ''
         },
         methods: {
             pt:function(x,y,event){
                 this.msg = x + y
                 console.log(event.target.innerHTML)
             },
             pt2:function(event){
                 console.log(event.target.innerHTML)
             }
         }
     })
 </script>

事件修飾符

名稱	描述
`.stop`	阻止冒泡
`.prevent`	阻止預設行為
`.capture`	新增事件偵聽器時使用 capture 模式
`.self`	只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥
`.{keyCode\|keyAlias}`	只當事件是從特定鍵觸發時才觸發回撥
`.native`	監聽元件根元素的原生事件
`.once`	只觸發一次回撥
`.left`	(2.2.0)只當點選滑鼠左鍵時觸發
`.right`	(2.2.0)只當點選滑鼠右鍵時觸發
`.middle`	(2.2.0) 只當點選滑鼠中鍵時觸發
`.passive`	(2.3.0) 以 `{ passive: true }` 模式新增偵聽器

<div id="test">
    <div v-text='msg'></div>
    <div @click='pt2'>
        <button @click.stop="pt">按鈕</button>
        <a href="www.baidu.com" @click.prevent.stop>百度</a>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            msg: ''
        },
        methods: {
            pt: function (event) {},
            pt2: function (event) {
                this.msg = 'helloworld'
            }
        }
    })
</script>

使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。

用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 只會阻止對元素自身的點選。

按鍵修飾符

.enter : Enter鍵
.delete : 刪除鍵
.tab
.esc
.space
.up
.down
.left
.right

<div id="test">
    使用者名稱: <input type="text" v-model='uname' @keyup.delete='clear'>
    密碼: <input type="text" v-model='pwd' @keyup.enter='handleSubmit'>
    <button @click='handleSubmit'>提交</button>
</div>
<script>
    var vm = new Vue({
        el: '#test',
        data: {
            uname: '',
            pwd:''
        },
        methods: {
            handleSubmit: function () {
                console.log(this.uname,this.pwd)
            },
            clear:function(){
                this.uname = '';
            }
        }
    })
</script>

自定義按鍵修飾符

Vue提供了Config.keyCodes物件進行自定義按鍵修飾符

Vue.config.keyCodes.自定義名稱 = 112

這裡的112是鍵盤上按鍵的唯一識別符號, 通過keyCode可以獲取到

<div id="test">
<div v-text = 'msg'></div>
<input type="text" @keyup='Submit'>
</div>
<script>
var vm = new Vue({
   el: '#test',
   data: {
       msg:'顯示'
   },
   methods: {
       Submit: function (event) {
           this.msg = `按鍵: ${event.key} 按鍵唯一標識: ${event.keyCode}`
       }
   }
})
</script>

5. 屬性繫結

v-bind指令: 動態處理屬性

<div id="cont">
    <a v-bind:href='url' v-text='msg'></a>
    <a :href='url' v-text='msg'></a>
    <button @click='center'>切換</button>
</div>
<script>
    let vm = new Vue({
        el:'#cont',
        data:{
            url:'www.baidu.com',
            msg:'百度'
        },
        methods:{
            center:function(){
                this.url = 'www.tx.com',
                this.msg = '騰訊'
            }
        }
    })
</script>

v-bind指令語法：

<a v-bind:href="url"></a>

簡寫

<a :href="url"></a>

6. 樣式繫結

class樣式處理

物件語法

<!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>
    <style>
        .active{
            border: 2px solid aqua;
            width: 100px;
            height: 100px;
        }
        .back{
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id="cont">
        <div v-bind:class="{active: isActive,back: isColor}">樣式測試</div>
        <button @click='down'>切換</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#cont',
            data: {
                isActive: true,
                isColor:true
            },
            methods: {
                down: function () {
                    // 取反  !this.isActive;
                    this.isActive = !this.isActive;
                    this.isColor = !this.isColor;
                }
            }
        })
    </script>
</body>

</html>

通過v-bind給class新增樣式，新增多箇中間用逗號隔開

陣列語法

<!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>
    <style>
        .active {
            border: 2px solid aqua;
            width: 100px;
            height: 100px;
        }

        .back {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id="cont">
        <div :class='[activeClass, handleClass]'></div>
        <button @click='down'>切換</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#cont',
            data: {
                activeClass: 'active',
                handleClass: 'back'
            },
            methods: {
                down: function () {
                    this.activeClass = '';
                    this.handleClass = '';
                }
            }
        })
    </script>
</body>

</html>

樣式繫結相關細節

<!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>
    <style>
        .active {
            border: 2px solid aqua;
            width: 100px;
            height: 100px;
        }

        .back {
            background-color: gray;
        }

        .color{
            color: red;
        }

        .base{
            font-size: 28px;
        }
    </style>
</head>

<body>
    <div id="cont">
        <div :class='[activeClass, handleClass, {color: isTest }]'>樣式測試</div>
        <div :class='arrClasses'>樣式測試</div>
        <div :class='objClasses'>樣式測試</div>
        <div class="base" :class='arrClasses'>樣式測試</div>
        <button @click='down'>切換</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#cont',
            data: {
                activeClass: 'active',
                handleClass: 'back',
                isTest: true,
                arrClasses:['active','back'],
                objClasses:{
                    active: true,
                    back: true
                }
            },
            methods: {
                down: function () {
                    // 取反  !this.isActive;
                    this.isTest = !this.isTest;
                    this.objClasses.back = false;
                }
            }
        })
    </script>
</body>

</html>

物件繫結和陣列繫結可以結合使用
class繫結的值可以簡化操作
預設的class會保留

style樣式處理

<!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="cont">
        <div v-bind:style='{border: borderStyle, width: widthSytle, height: heightStyle}'></div>
        <div v-bind:style='objStyles'></div>
        <div v-bind:style='[objStyles,overrideStyles]'></div>
        <button @click='down'>切換</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#cont',
            data: {
                borderStyle: '1px solid aqua',
                widthSytle: '100px',
                heightStyle: '200px',
                objStyles: {
                    border:'1px solid black',
                    width: '200px',
                    height:'100px'
                },
                overrideStyles:{
                    background: 'gray'
                }
                
            },
            methods: {
                down: function () {
                    this.heightStyle = '100px';
                    this.objStyles.width = '100px';
                }
            }
        })
    </script>
</body>

</html>

7. 分支迴圈結構

分支結構

v-if、v-else、v-else-if、v-show

<div id="main">
<div v-if='score>=90'>優秀</div>
<div v-else-if='score < 90 && score >= 80'>良好</div>
<div v-else-if='score < 80 && score >= 60'>一般</div>
<div v-else>差</div>
<div v-show='flag'>測試v-show</div>
<button @click='cent'>切換</button>
</div>
<script>
let vm = new Vue({
    el:'#main',
    data:{
        score:'50',
        flag:true
    },
    methods:{
        cent:function(){
            this.flag = !this.flag
        }
    }
})
</script>

v-fi控制元素是否渲染到頁面
v-show控制元素是否顯示(已經渲染到頁面)

迴圈結構

v-for遍歷陣列：

<div id="main">
<div>水果列表</div>
<ul>
   <li v-for='item in fruits'>{{item}}</li>
   <li v-for='(item,index) in fruits'>{{item + '---' + index}}</li>
   <li :key='item.id' v-for='item in myFruits'>
       <span>{{item.ename}}</span>
       <span>{{item.cname}}</span>
   </li>
</ul>
</div>
<script>
let vm = new Vue({
   el: '#main',
   data: {
       fruits:['apple','banana','orange'],
       myFruits:[{
           id:1,
           ename:'apple',
           cname:'蘋果'
       }, {
           id: 2,
           ename: 'orange',
           cname: '橘子'
       }, {
           id: 3,
           ename: 'banana',
           cname: '香蕉'
       }
       ]
   }
})
</script>

key的作用是幫Vue區分不同的元素，從而提高效能。在開發時最好加上

v-for結合v-if

<div id="main">
<div>水果列表</div>
<ul>
<li v-if='value == 12' v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#main',
data: {
    obj:{
        name:'zhansan',
        age:12,
        code:456
    }
}
})
</script>

重新學習vue基礎
2018-02-01
Vue
Vue學習基礎day-3
2020-12-19
Vue
Vue學習計劃基礎筆記(六) – 元件基礎
2018-07-18
Vue筆記元件
Vue-Router基礎學習筆記
2018-10-14
Vue筆記
vue學習筆記【基礎篇一】
2017-08-28
Vue筆記
Vue.js 學習筆記之四：Vue 元件基礎
2020-10-12
Vue.js筆記元件
Vue2.x學習一：基礎入門
2018-05-31
Vue
[今日白記]Vue基礎的學習筆記（一）
2019-04-04
Vue筆記
免殺學習-基礎學習
2020-12-15
Docker 基礎學習
2019-09-10
Docker
Flume基礎學習
2019-09-28
Redis 基礎學習
2019-03-06
Redis
Pandas基礎學習
2021-05-10
Scala基礎學習
2019-01-31
jQuery基礎學習
2020-09-29
jQuery
HTML基礎學習
2017-03-28
HTML
Java基礎學習
2014-01-20
Java
JVM基礎學習
2015-03-08
JVM
Hashtable基礎學習
2009-04-08
Vue學習路徑-輕鬆從基礎到實戰
2018-08-27
Vue
vue2.0學習筆記（八）：vue-router 路由配置（1）–基礎篇
2018-04-23
Vue筆記路由
Linux基礎學習——檔案基礎
2018-11-04
Linux
Blazor和Vue對比學習（基礎1.5）：雙向繫結
2022-05-10
BlazorVue
redis學習——基礎指令
2019-09-15
Redis
Zookeeper學習——基礎框架
2019-04-15
框架
YII-基礎學習
2019-06-27
python基礎學習
2019-02-16
Python
opencv學習之基礎
2022-05-11
OpenCV
Linux基礎學習
2018-09-24
Linux
SQL學習___01：基礎
2020-12-11
SQL
[pwn基礎]Pwntools學習
2022-06-21
深度學習--RNN基礎
2023-04-25
深度學習RNN
學習linux基礎
2020-12-23
Linux
遙感基礎學習
2021-01-03
基礎學習問題
2017-08-26
swift基礎學習(十六)
2017-12-13
Swift
[JavaScript基礎]學習①⑨--generator
2017-04-19
JavaScript
Android基礎學習
2017-11-18
Android