手挽手帶你學VUE：一檔 VUE簡介以及常用內部指令

Mr.奇淼發表於2019-01-03
Vue

視訊教程

由於掘金不支援插入視訊 視訊請移步 www.henrongyi.top

什麼是VUE

VUE是一套用於構建使用者介面的漸進式框架,VUE並不是一個真正意義上的mvvm框架,它更傾向是一種資料驅動框架.所以我們在學習VUE之前,無論你是傳統JS開發者,還是後端開發人員,都需要把思維進行一次轉化,在VUE裡,資料就是一切,你所看見的所有東西,都是資料.

VUE基礎入門

在我們日常的開發中,我們經常會使用VUE-CLI腳手架來搭建VUE專案,但是如果我們學習VUE,最好不要直接上手腳手架,這樣對於你在VUE的進階上會增加難度,我們現在採用傳統的引入js的方法來開始VUE的講解
複製程式碼

開始HelloWord

國際慣例，在學習一個新的東西之前，一定要先開始一個HelloWord，這裡我們先從官網引入vue的js檔案。

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
複製程式碼

這兩個JS檔案對應了我們的不同環境，學習過程中我們將選擇上面的JS檔案來進行學習。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
       {{message}}
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word'
            }
        })
    </script>
</body>
</html>
複製程式碼

這樣，我們用VUE寫的Hello Word 就寫好了。

核心基礎 模板語法 資料繫結

上面程式碼中我們用了 {{message}}這樣一個東西，這是什麼呢？我們管這兩個大括號叫插值表示式，插值表示式內部可以是簡單的JS表示式，這裡的{{message}}則被替換為了data內的message的資料。我們接下來舉例一下簡單的JS表示式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
       {{message}}
       {{1 + 1}}
       {{isTrue?"真的":"假的"}}
       {{message.split('').reverse().join('')}}
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word',
                isTrue:true,
            }
        })
    </script>
</body>
</html>
複製程式碼

大家可以看到，這些在插值表示式內的JS表示式直接返回了執行完成的結果，值得一提的是，差值表示式內的規則和script標籤內的規則是類似的。

接下來就是VUE的精髓，雙向資料繫結。 v-model這個指令是vue中用來進行雙向資料繫結的重要指令。大家需要注意，只有在表單元素中才可以使用v-model。並且v-model把dom中的value和vue例項中的data繫結到了一起。兩者的變化會相互影響。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
	    <input v-model="message" placeholder="我是v-model繫結的資料"></input>
       {{message}}
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word',
                isTrue:true,
            }
        })
    </script>
</body>
</html>
複製程式碼

上述程式碼中，我們改變input中的value值，會發現，message資料也在同時發生著變化。

常用指令 v-if v-show v-for

v-if v-else 根據表示式的值的真假條件渲染元素。
v-show 和v-if 差不多 但是 v-show會渲染dom只是隱藏掉了，而v-if則連dom都不會渲染，當滿足條件的時候，dom才會出現。
複製程式碼

在我們日常開發中，很多時候想要隱藏掉某些東西，只有在特定條件下才渲染出來，這裡我們舉個例子，模擬一下管理員許可權。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="message" placeholder="我是v-model繫結的資料"></input>
        <div v-if="message=='admin'">原來你是尊貴的管理員大大啊！</div>
    </div>
    <div v-else>告訴我你是誰</div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:'Hello Word'
            }
        })
    </script>
</body>
</html>
複製程式碼
 v-for顧名思義就是迴圈，迴圈渲染我們需要的東西
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
	    <ul>
		    <li v-for="(key,item) in list" :key="key">{{item.name}}</li>
	    </ul>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
               list:[{name:"奇妙"},{name:"奇淼"},{name:"QM"}]
            }
        })
    </script>
</body>
</html>
複製程式碼

這樣我們通過v-for 渲染出了一個列表。

資料繫結和事件繫結

v-bind資料繫結 v-bind我們稱之為資料繫結，我們想要在標籤內使用我們data中的資料怎麼辦？通過v-bin就可以實現。我們下面來看例子。v-bind:xxxx可以簡寫為:xxxx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
		.active{
			color:red
		}
	</style>
</head>
<body>
    <div id="app">
	    <div v-bind:class="myClass">
		    我是v-bind影響的資料
		</div>
		<div :style="bindColor">
		    我是v-bind影響的資料
		</div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               myClass:'active',
               bindColor:{
                   color:'red'
               }
            }
        })
    </script>
</body>
</html>
複製程式碼

v-on事件繫結

我們可以通過v-on來繫結事件，同樣v-on可以簡寫為@，這裡還需要提到在VUE示例中註冊事件的地方，methods
方法我們都寫在這個裡面，廢話不說，上程式碼。
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
		.active{
			color:red
		}
	</style>
</head>
<body>
    <div id="app">
	    <button v-on:click="add">+</button>{{num}}<button @click="minus">-</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               num:1
            },
            methods:{
	            add(){
		            this.num++
	            },
	            minus(){
		             this.num--
	            }
			}
        })
    </script>
</body>
</html>
複製程式碼

總結

現在這些是VUE中最簡單的指令部分,學會他們,你已經基本可以寫簡單的VUE頁面了,但是距離真正在工作中使用還有距離,這是VUE的第一步,看完視訊後多多熟悉API ,敲敲程式碼.祝你早日步入高階前端的行列.

相關文章