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

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

視頻教程

因爲思否不能插入視頻，視頻請你們移步，http://www.henrongyi.topjavascript

什麼是VUE

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

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文件來進行學習。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}}
    </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 就寫好了。java

核心基礎 模板語法 數據綁定

上面代碼中咱們用了 {{message}}這樣一個東西，這是什麼呢？咱們管這兩個大括號叫插值表達式，插值表達式內部能夠是簡單的JS表達式，這裏的{{message}}則被替換爲了data內的message的數據。咱們接下來舉例一下簡單的JS表達式。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">
       {{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綁定到了一塊兒。二者的變化會相互影響。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>
       {{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纔會出現。

在咱們平常開發中，不少時候想要隱藏掉某些東西，只有在特定條件下才渲染出來，這裏咱們舉個例子，模擬一下管理員權限。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 ,敲敲代碼.祝你早日步入高級前端的行列.

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