VueJS簡明教程(一)之基本使用方法

時間  2019-12-10
標籤 vuejs 簡明 教程 基本 使用方法 简体版
原文   原文鏈接

簡介：這是一篇超級簡單的入門文章javascript

若是說是JQuery是手工做坊，那麼Vue.js就像是一座工廠，雖然Vue.js作的任何事情JQuery均可以作，但不管是代碼量仍是流程規範性都是前者較優。css

Vue.js的官方中文教程其實也是一個不錯的教程，不過相比於一次性把全部概念掌握，我更傾向於先會用，以後再在實際應用中把未涉及到的知識點逐步補全。html

就像開車，不是非要知道發動機的工做原理才能上路的，甚至你可能一生也不用知道。前端

好了，開始吧vue

準備

首先，如下幾點但願你已經知道或者作到了:java

  • 你會用html+css+javascript 寫一些網頁
  • 你知道什麼是DOM和BOM(Browser Object Model)
  • 你知道Vue.js是一個框架而不是一個新語言
  • 你會用百度或者Google其中之一去查找答案

接着，我會圍繞如下幾個Vue.js的基本（核心）使用方法逐個作測試和使用說明：npm

  • 新建vue對象
  • 數據綁定
  • 事件綁定
  • 表單控件綁定

最後，根據上面的知識點結合起來寫出咱們的第一個vuejs前端頁面瀏覽器

新建Vue對象

  1. 引用vue.js
    在桌面創建一個 Vue.html文件, 而後引入 vue.js的CDN地址 
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  1. 新建Vue實例
    在Vue.html中插入一個id爲firstVue的<div> 
<div id="firstVue"></div>

在Vue.html中插入下面js代碼:框架

<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue"
    })
</script>

而後整個代碼看起來是這樣的:ide

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#firstVue"
    })
</script>
</html>

解釋一下代碼

js變量 myVue 就是Vue建立的一個對象，能夠理解成把<div id="firstVue></div>和這個標籤裏面包含的全部DOM都實例化成了一個JS對象， 這個對象就是myVue

el是Vue的保留字，用來指定實例化的DOM的ID號, #firstVue這句話就是標籤選擇器，告訴Vue要實例化ID=「firstVue」的這個標籤。

至此，Vue.js框架在html頁面的引入工做完成，可是若是咱們訪問這個頁面並不能看到任何效果,一篇空白

數據綁定

VUE這個框架的數據流向是單向的，不懂不要緊，記住就行了
因此數據綁定後的數據流向是從

vue實例——>DOM文檔的

咱們給上一步的<div>標籤添加下面一句話

{{ my_data }}

變成這樣

<div id="firstVue">
    {{my_data}}
</div>

這個雙大括號的語法叫作mustache 語法，大括號裏面的是做爲變量形式出現的。

而後在建立 vue實例的代碼中加入下面數據聲明:

data:{
    my_data: "test"
}

整個代碼看起來向下面這樣:

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
    {{my_data}}
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue",
        data:{
            my_data: "test"
        }
    })
</script>
</html>

data參數用來綁定VUE實例的數據變量，每一個不一樣變量之間用逗號分隔，上面咱們綁定了自定義變量my_data，並賦初值'test'

完成數據綁定工做，<div>標籤裏的{{myData}}數據會隨着myVue實例裏的myData數據的變更而變更，瀏覽器查看當前頁面,會出現'test'字符串，說明數據綁定成功

這是在HTML標籤內部的數據綁定，那麼若是想綁定某個HTML標籤的屬性值，就要用到v-bind:屬性了，好比我想綁定一個標籤是否可見的屬性(hidden)，那麼就應該這麼寫:

<div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>

v-bind:後面寫想要綁定的屬性，my_hidden也不須要用兩個大括號括起來了，直接寫就能夠了，而後在VUE實例中聲明這個綁定數據

var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    }
})

這時候再瀏覽這個網頁,又變成了空白，可是F12查看源代碼，發現實際上是div標籤的hidden屬性被激活了

固然，v-bind:不只能夠綁定hidden屬性，disabled屬性，style屬性, color屬性，凡是標籤有的屬性，均可以經過這個方法進行綁定

v-bind因爲常常會用到，因此也能夠縮寫成冒號:，好比上面的<div>標籤就徹底能夠這樣寫

<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>

這是和v-bind:hidden="my_hidden"徹底等價的一種寫法

至此，Vue.js兩種綁定數據的方法都寫完並進行了測試

事件綁定

v-bind:是用來綁定數據的，v-on:則是用來綁定事件的，好比我要綁定一個<button>的 click事件就這麼寫

<button v-on:click="clickButton()">Click Me</button>

固然這裏的click能夠換成任意一個html事件，好比load , doubleclick , mouseon , mousedown這些，不過click確定是咱們最經常使用的

將click動做綁定到clickButton()函數以後就須要實現這個函數了,咱們要在以前的vue實例中加入新字段methods

var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    },
    methods:{
        clickButton:function(){
            this.my_data = "Wow! I'm changed!"
        }
    }
})

咱們在methods關鍵字裏面定義了clickButton方法，並在方法內改變了以前定義的my_data變量的值

這裏涉及到如何在vue實例中引用data字段的變量，如上所示，須要加this後面直接寫要引用的變量就能夠了

若是不加this，系統會默認你想引用的是一個全局變量，但是這裏咱們須要引用的是這個vue實例裏的局部變量

如今總體代碼和以前有些變化，看起來是這樣的：

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <button v-on:click="clickButton">Click Me</button>
        <p>{\{my_data\}}</p>
    </div>
</body>
<script type="text/javascript">
var myVue = new Vue({
    el:'#firstVue',
    data:{
        my_data: "test",
        my_hidden: "hidden"
    },
    methods:{
        clickButton:function(){
            this.my_data = "Wow! I'm changed!"
        }
    }
})
</script>
</html>

好了，運行一下，點擊Click Me的時候"test"就會變成"Wow! I'm changed!"，這是由於變量my_data的改變。

另外，v-on:語法一樣有一個縮寫@，好比v-on:click="clickButton"就等價於@click="clickButton"

表單控件綁定

以前有說Vue這個框架是單向數據傳輸的，就是從vue實例傳送數據到DOM ，那麼咱們如何從DOM中實時獲取用戶輸入的數據賦值給vue實例呢

這用到了Vue.js提供給用戶的一個語法糖 v-model ,這個語法糖經過兩步實現了數據的反向傳遞，也就是從DOM傳送給vue實例數據。

下面說的原理看不懂能夠跳過，不會影響後續閱讀

v-model 經過兩步實現了數據反向傳遞

第一步，綁定了DOM標籤的input事件(好比叫tapInput())

第二步，當用戶進行輸入時候，觸發tapInput()函數，tapInput()函數內部讀取此DOM標籤的Value值，賦值給vue實例

經過以上兩步，v-model語法糖實現了vue數據的反向傳輸

好，直接寫一個例子吧

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <input type="text" v-model="my_data" />
        <button v-on:click="clickButton">Click Me</button>
        <p>{{my_data}}</p>
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_data: "test",
            my_hidden: "hidden"
        },
        methods:{
            clickButton:function(){
                this.my_data = "Wow! I'm changed!"
            }
        }
    })
</script>
</html>

能夠發現，咱們增長了一個<input>標籤，而且用v-model語法綁定了以前定義的變量my_data

這個時候，當咱們在<input>輸入框輸入值的時候，v-model會實時將最新值(value)賦值給vue實例的my_data變量，而my_data變量又將實時展示在<p>標籤中

這樣咱們看起來實現了這麼一個數據流:

DOM1(input標籤)——>VUE——>DOM2(p標籤)

先從用戶輸入的DOM1獲取輸入保存在VUE實例，用從VUE實例裏拿到數據輸出到DOM2

運行這個頁面，發現<p>標籤中的內容會隨着<input>標籤實時的變化，說明咱們利用v-model語法變相實現了數據的雙向傳遞

總結

看看咱們學到了什麼

  • 用 new Vue({})新建vue實例
  • 使用 v-bind:和{{}}雙大括號語法在html中綁定變量
  • 使用 v-on: 和 @ 語法綁定函數到標籤的事件
  • 使用 v-model: 語法使用戶的頁面輸入反向傳遞迴vue實例變量

如今簡單完善一下上面的代碼，作成一個計數器程序，用戶能夠在輸入框輸入任意數字，點擊按鈕進行總數累加

下面是對剛纔代碼進行了一些小的改動，相信你必定能夠看明白的

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
        <input type="number" v-model.number="my_step" />
        <button v-on:click="clickButton">Add</button>
        <p>{{my_total}}</p>
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_step: 1,
            my_total: 0
        },
        methods:{
            clickButton:function(){
                this.my_total = this.my_total + this.my_step
            }
        }
    })
</script>
</html>

上面v-model.number後面的這個.number的意思是說在返回my_step值的時候自動轉換成integer類型，由於默認是string類型，因此要多這麼一句。

本文算是vue的基礎內容，下一篇將會是vue的核心內容，組件。

前端的東西多且雜，東拼西湊總也不是進步的辦法，我認爲最好就是將主幹的一支學明白用在實際項目中，其餘的一些枝枝叉叉碰見了現看文檔也是來得及的，好比我每次FLEX佈局都要現查語法，甚至寫前端頁面的時候老是開着VUE的官方文檔隨時查看 -囧-

我會寫出一個用Vue.js構建SPA(Single Page Application)的系列文章, 但願可讓初學、轉學VUE的人少走彎路

最後的最後，轉載請註明出處，謝謝

原文連接：https://www.jianshu.com/p/5d0d913d2453

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