1.嘿，我們來認識一下vue吧!

逍遙俠發表於2018-06-14
Vue

你瞭解vue嗎?你又是從什麼地方開始聽到過這框架的呢?我是在接觸了laravel後才開始關注這麼一個框架的!沒辦法,在開發中我一直試用的是混編模式開發,嗯大概如果你也是這樣開發的話你也覺得很累吧.廢話少說,我們先來初步學習下吧,後期我儘量堅持一週寫篇技術文章進行分享.至於更新的時間只能聽天由命了. ps:我也不是什麼技術大牛,浮沉在技術圈兩年時間了.不求成為什麼厲害的人物,只有能做到不忘初心即可.撰寫的文章如果有錯漏,或者理解有誤,歡迎指正交流!

什麼是vue?

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層。

上手需要準備神馬?

最簡單的方式就是像引入JQ一樣,通過CDN引入載入吧.這樣你就可以好好地根據這篇文章進快樂的玩耍了.

對應的:CDN地址

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

//在我們的學習過程中,不用考慮了,你最好試用第一個CND的連結地址這樣你才可以在最短的時間最快的接觸

下面:我們將對vue的一些基礎應用和特性進行一下簡單的說明

宣告式渲染

<!--vue直接針對對應的元素節點進行繫結賦值-->
<div id="app">
    {{ message }}
</div>

<script>
//繫結對應ID號的資訊
var app = new Vue({
    //元素繫結
    el:"#app",
    data:{
        message:"這是一個演示的資訊"
    }
});
</script>
複製程式碼

看是吧!其實vue框架最簡單的應用就是如此,只需要按照官方所提供的例項化函式,只需要定位對應的元素標籤,並對進行指定的資料繫結.即可馬上顯示你所需的內容.我也難得去截圖給你執行的結果了.作為一個求學的你動手打一遍,或者直接cv好了!

#了文字插值，我們還可以像這樣來繫結元素特性

<!-- v-bind:繫結對應的屬相 可以對指定的元素裡對應的屬性進行繫結 -->
<div id="app2">
    <span v-bind:title="message">
        這裡通過另一種方式進行資料的繫結
    </span>
</div>

<script>
var app2=new Vue({
    el:"#app2",
    data:{
        message:"頁面載入於"+new Date().toLocaleString()
    }
});
</script>
複製程式碼

上面的例子其實就識展示了,通過V-bind繫結了span標籤的title元素,同樣地如果那你需要繫結不同的標籤你可以按照這個例子進行擴充套件.

條件與迴圈

很多時候我們在頁面渲染中,都會用到判斷控制一個元素是否展示,或者有一個列表表格需要你進行渲染.那麼這個時候我們在vue框架中就需要用到條件語句或者迴圈語句了.

#通過v-if指令我們可以對一個元素進行是否顯示的操作

<div id="app3">
     <p v-if="seen">這段文字是通過vue的條件屬性控制是否可以展示的</p>
 </div>
<script>
    var app3 = new Vue({
        el:"#app3",
        data:{
            seen:true,
        }
    });
</script>
複製程式碼

其實邏輯還是很簡單的,只不過識通過v-if元素控制的對應值的真假.控制顯示,真為顯示,假為隱藏!

#v-for 指令可以繫結陣列的資料來渲染一個專案列表：

 <div id="app4">
    <ul>
        <li v-for="todo in todos">
        {{todo.id}}  | {{ todo.text }}
        </li>
    </ul>
 </div>
 
<script>
var app4= new Vue({
    el:"#app4",
    data:{
        //這裡todos可以由後臺返回一個對應的JSON資料集合
        todos:[
            {
                id:"1",
                text:"這是第一行",
            },
            {
                id:"2",
                text:"這是第二行",
            },
            {
                id:"3",
                text:"這是第三行",
            }
        ]
    }
});
</script>
複製程式碼

上面的例子,其實就是一個簡單的列表迴圈.todos就是需要迴圈的列表資料,然後通過v-for進行資料的渲染,具體例子就參考我給出的示例程式碼吧~

處理使用者輸入

呃,這個概念其實就是可以通過vue處理下使用者輸入的資料.簡單地舉個例子吧~通過點選事件把使用者的輸入反轉~

#v-on 通過新增一個事件監聽器 例如:下面的程式碼通過對button繫結一個click事件

<!--處理使用者輸入-->
<!-- 為了讓使用者和你的應用進行互動，我們可以用 v-on 指令新增一個事件監聽器，通過它呼叫在 Vue 例項中定義的方法： -->
   <div id="app5">
    <p>{{message}}</p>
    <button v-on:click="rm">訊息反轉</button>
   </div>
   
 <script>
    var app5=new Vue({
    el:"#app5",
    data:{
        message:"這個是待反轉的資訊",
    },
    //methods封裝對應需要觸發的方法
    methods:{
        rm:function () {
            //當前的元素下的messag
            this.message=this.message.split('').reverse().join('');
        }
    }
});
</script>
複製程式碼

如例項程式碼一樣,通過methods方法可以回撥觸發的函式.接著在函式中去做你想做的事情吧!jsust do it!

#雙向繫結v-model

什麼是雙向繫結?其實就是表單輸入和應用狀態之間的雙向繫結,其中一者的改變另一者都回進行改變!

<!--雙向繫結-->
<!-- v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向繫結 -->
<div id="app6">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<script>
    var app6=new Vue({
    el:"#app6",
    data:{
        message:"這是資料雙向繫結的演示"
    }
})
});
</script>
複製程式碼

嗯,其實雙向繫結的程式碼簡單例項就是如此,如果不能好好理解那就執行一遍吧~你會發現有些東西只能意會不能言傳~

元件化應用構建

在 Vue 裡，一個元件本質上是一個擁有預定義選項的一個 Vue 例項。在 Vue 中註冊元件很簡單：

<script>
//註冊一個組建例項
Vue.component('todo-item',{
    // "prop"，類似於一個自定義特性。
    props:['todo'],
    template:'<li></li>'
});
</script>
複製程式碼

解析下吧: Vue.component,這個函式其實就是對應的註冊元件,props:可以定義自定義不同元件的特性. template,其實就是對應的html元件模板.

接下來我們看一個完整的元件例子吧!

<!--元件化的構建-->
<!--元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹：-->
<div id="app7">
    <!--
      現在我們為每個 todo-item 提供 todo 物件
      todo 物件是變數，即其內容可以是動態的。
      我們也需要為每個元件提供一個“key”，稍後再
      作詳細解釋。
    -->
    <ol>
        <!-- 建立一個 todo-item標籤組建-->
    <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id">
    </todo-item>
    </ol>
</div>
    <script>
    //註冊一個組建例項
    Vue.component('todo-item',{
        // "prop"，類似於一個自定義特性。
        props:['todo'],
        template:'<li>{{todo.text}}</li>'
    });
    
    var app7=new Vue({
        el:"#app7",
        data:{
            list:[
                {id:1,text:'蘋果'},
                {id:2,text:'雪梨'},
                {id:3,text:'西瓜'}
            ]
        },
    })
    </script>
複製程式碼

上面就是一個簡單的元件模組.可能現在你會有一個疑問,vue的元件模組有什麼用處呢?我們且看下官方的回覆:

在一個大型應用中，有必要將整個應用程式劃分為元件，以使開發更易管理.其實簡單來說,就像我們在模組化開發的時候,對於一些公共的模組,如果要複用我們就會封裝,在其他需要用的地方再引入呼叫.也使得不同模組之間的邏輯修改互不影響.

總結

其實vue的基礎認識,我們剛剛已經大致瞭解.大概下一篇文章我們會簡單講解下vue的安裝教程和試用,畢竟如果在開發一些特別的元件和應用這部份的知識還是需要擁有的.

相關文章