Vue.js 建立一個 CNODE 社區(1)

使用 Vue.js 建立一個 CNODE 社區 (1) - 入門

終於學到了 Vue，選的畢設是用 Vue 建立一個相似 CNODE 的社區。

Vue 做爲一個主要運用了 MVVM 架構的框架，很值得咱們去學習，就先從 Vue 的官方網站教程中過一遍 demo，儘快熟悉關於 Vue 的各類基礎概念。

---

簡述MVVM

MVVM 和 MVC 同樣，也是一種代碼組織形式。

他把代碼分爲三個部分，分別是：

Model 表示對數據的操做

View 表示視圖

ViewModel 把 Model 的變化更新到 View 上，把 View 的修改同步到 Model

參考答案

MVVM是Model-View-ViewModel的縮寫。MVVM是一種設計思想。Model 層表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯；View 表明UI 組件，它負責將數據模型轉化成UI 展示出來，ViewModel 是一個同步View 和 Model的對象。

在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。

ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

ViewModel 把 Model 的變化更新到 View 上，把 View 的修改同步到 Model

---

Vue.js的優勢

1.學習曲線平緩

2.易上手

3.功能強大

4.使用範圍廣

---

建立 Vue 實例

一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的。經過構造函數 Vue 就能夠建立一個 Vue 的根實例，並啓動 Vue 應用---入口
必不可少的一個選項就是 el 。 el 用於指定一個頁面中己存在的 DOM 元素來掛載 Vue實例,能夠是標籤。也能夠是css語法
經過 Vue 實例的 data 選項，能夠聲明應用內須要雙向綁定的數據。建議全部會用到的數據都預先在 data 內 聲明，這樣不至於將數據散落在業務邏輯中，難以維護。也能夠指向一個已經有的變量

<div id="app">
    {{ msg }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{}
    })
</script>

---

Vue 文本插值

Vue .js 只支持單個表達式，不支持語句和流控制。如三元運算符也是支持的。

<div id="app">
    {{ msg }}
    {{ a }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'vue.js',
            a:2
        },
    })
    // 訪問 Vue 實例的屬性
    console.log(app.$data)
    console.log(app.$el)

    // 訪問data元素的屬性-- 直接app.屬性名，app.msg
    console.log(app.a)
</script>

---

Vue 初探生命週期

每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。

<div id="app">
    {{ msg }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'vue.js',
            a:2
        },
        created:function(){
            alert('Vue 實例建立完成，還未掛載到 DOM')
        },
        mounted:function(){
            alert('Vue 實例已經掛載到 DOM')
        }
    })
</script>

---

Vue 過濾器

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 「 | 」 對數據進行過濾，常常用於格式化文本，好比字母所有大寫、貨幣千位使用逗號分隔等。過濾的規則是自定義的， 經過給 Vue 實例添加選項 filters 來設置

div id="app">
    {{ msg }} <br>
    {{ a }} <br>
    {{ date }} <br>
    {{ date | formatDate}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var plusDate = function(value){
        return value<10?'0'+value:value
    }
    var app = new Vue({
        el:'#app',
        data:{
            msg:'vue.js',
            a:2,
            date:""
        },
        filters:{
            formatDate:function(value){
                var value = new Date(value)
                var years = value.getFullYear()
                var month = plusDate(value.getMonth() + 1)
                var day = plusDate(value.getDate())
                var hour = plusDate(value.getHours())
                var min = plusDate(value.getMinutes())
                var sec =plusDate(value.getSeconds())
                return years+'-'+month+'-'+day+'/'+hour+":"+min+':'+sec
            },
        },
        created:function(){
            // alert('Vue 實例建立完成，還未掛載到 DOM')
        },
        mounted:function(){
            var _this = this
            var timer = setInterval(function(){
                _this.date = new Date()
            },1000)
        }
    })
</script>

---

Vue 經常使用指令

指令（ Directives ）是 Vue 模板中最經常使用的一項功能，它帶有前綴 v－，能幫咱們快速完成DOM操做。循環渲染。顯示和隱藏。

v-text 解析文本，和 {{}} 做用同樣

v-html 解析 HTML

v-on 綁定事件監聽器

v-bind 動態更新 HTML 元素上的屬性

<div id="app">
    <hr>
    文本插值：
    {{ msg }} <br>
    {{ a }} <br>
    <hr>
    filter 過濾器: <br>
    {{ date }} <br>
    {{ date | formatDate}} <br>
    <hr>
    經常使用指令：<br>
    v-text: <br>
    <span v-text='apple'></span> <br>
    v-html: <br>
    <div v-html='banana'></div> <br>
    v-bind: <br>
    <span v-bind:class="className">here</span> <br>
    v-on: <br>
    <button v-on:click="cout">{{ num }}</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var plusDate = function(value){
        return value<10?'0'+value:value
    }
    var app = new Vue({
        el:'#app',
        data:{
            msg:'vue.js',
            a:2,
            date:"",
            apple:'apple',
            banana:'<span style="color:yellow">香蕉</span>',
            className:'transRed',
            num:0
        },
        filters:{
            formatDate:function(value){
                var value = new Date(value)
                var years = value.getFullYear()
                var month = plusDate(value.getMonth() + 1)
                var day = plusDate(value.getDate())
                var hour = plusDate(value.getHours())
                var min = plusDate(value.getMinutes())
                var sec =plusDate(value.getSeconds())
                return years+'-'+month+'-'+day+'/'+hour+":"+min+':'+sec
            },
        },
        methods:{
            cout:function(){
                this.num = this.num + 1
            }
        },
        created:function(){
            // alert('Vue 實例建立完成，還未掛載到 DOM')
        },
        mounted:function(){
            var _this = this
            var timer = setInterval(function(){
                _this.date = new Date()
            },1000)
        }
    })
</script>