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

時間  2019-12-05
標籤 手挽手 vue 簡介 以及 經常 使用 內部 指令 简体版
原文   原文鏈接

視頻教程

因爲掘金不支持插入視頻 視頻請移步 www.henrongyi.top

什麼是VUE

VUE是一套用於構建用戶界面的漸進式框架,VUE並非一個真正意義上的mvvm框架,它更傾向是一種數據驅動框架.因此咱們在學習VUE以前,不管你是傳統JS開發者,仍是後端開發人員,都須要把思惟進行一次轉化,在VUE裏,數據就是一切,你所看見的全部東西,都是數據.javascript

VUE基礎入門

在咱們平常的開發中,咱們常常會使用VUE-CLI腳手架來搭建VUE項目,可是若是咱們學習VUE,最好不要直接上手腳手架,這樣對於你在VUE的進階上會增長難度,咱們如今採用傳統的引入js的方法來開始VUE的講解
複製代碼

開始HelloWord

國際慣例，在學習一個新的東西以前，必定要先開始一個HelloWord，這裏咱們先從官網引入vue的js文件。css

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

這兩個JS文件對應了咱們的不一樣環境，學習過程當中咱們將選擇上面的JS文件來進行學習。html

<!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表達式。vue

<!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標籤內的規則是相似的。java

接下來就是VUE的精髓，雙向數據綁定。 v-model這個指令是vue中用來進行雙向數據綁定的重要指令。你們須要注意，只有在表單元素中才可使用v-model。而且v-model把dom中的value和vue實例中的data綁定到了一塊兒。二者的變化會相互影響。npm

<!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纔會出現。
複製代碼

在咱們平常開發中，不少時候想要隱藏掉某些東西，只有在特定條件下才渲染出來，這裏咱們舉個例子，模擬一下管理員權限。app

<!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 ,敲敲代碼.祝你早日步入高級前端的行列.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程