初識Vue.js

時間 2019-11-21

原文原文鏈接

一，什麼是Vue.js？

vue.js是一套構建用戶界面的漸進式框架，它採用自底向上增量開發的設計。（自底向上設計方法是根據系統功能要求，從具體的器件、邏輯部件或者類似系統開始，憑藉設計者熟練的技巧和豐富的經驗，經過對其進行相互鏈接、修改和擴大，構成所要求的系統。）Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與單文件組件和Vue生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供驅動。html

下面先簡單瞭解Vue.js中的幾個重要組成部分：聲明式渲染，條件與循環，處理用戶輸入和組件。vue

二，聲明式渲染。

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式的將數據渲染進 DOM,即便用雙大括號聲明包裹數據變量，實現聲明式渲染。這裏的聲明主要有兩大類，第一類，渲染元素內部的內容；第二類，渲染元素標籤裏的屬性。下面是演示：數據庫

html代碼：第一個div，message聲明起到填充文本的做用；第二個div，經過v-bind實現對元素title的操縱。跨域

　　　　　　 <div id="smsxr">{{message}}</div>
            <div id="bind-attr">
                <span v-bind:title="message">鼠標懸浮查看加載事件。使用v_bind指令。指令通常加v_前綴，會在渲染的dom上應用特殊的響應行爲，好比此處將title和message對應。</span>
            </div>

JavaScript代碼：先定義Vue對象，而後經過el，data等屬性將對象與dom節點綁定，從而實現dom和對象中數據及方法等的對應。數組

　　　　　　//聲明式渲染，調用時只要{{message}}，便可使用message的值來填充dom元素的內容。
            var smsxr=new Vue({
                el:'#smsxr',
                data:{
                    message:"聲明式渲染，經過雙大括號聲明指明數據來源！"
                }
            })
            //動態加載屬性，經過動態化屬性值變量來實現 v-bind:title="message".

　　　　　　 var dtjzsx=new Vue({ el:"#bind-attr", data:{ message:"文字加載於"+new Date() } })

三，條件與循環。

在JavaScript中咱們一般用if和for來實現條件和循環功能。Vue中咱們使用相似的v-if和v-for來實現條件和循環。使用方式是在對應標籤內部經過v-if=''和v-for=''這樣的指令。引號內能夠是變量也能夠是簡單的語句。下面分別來看條件和循環的實現：瀏覽器

經過v-if實現元素內容的顯示和隱藏：服務器

html代碼：v-if="seen」，seen爲true時元素顯示，爲false時元素隱藏，這樣經過重置seen的值就可實現對元素可見狀態的操縱。數據結構

　　　　 <div id="kztj">
            <p v-if="seen">如今你能夠看到我，當seen爲false時你將看不到我，Vue經過v_if來控制條件。此處演示也說明咱們利用Vue能夠將dom結構綁定到數據，即經過數據控制dom的顯示結構。</p>
        </div>

JavaScript代碼：這裏聲明元素id爲kztj的元素裏面seen的取值。框架

　　　　　　 //v-if控制條件，seen定義處。
            var kztj=new Vue({
                el:"#kztj",
                data:{
                    seen:true
                }
            })

經過v-for實現元素的循環生成：dom

html代碼：addListNew（）是一個自定義函數，用於實現單擊後添加新的子項。定義見本段末尾。

　　   <div id="xh">
            我是經過v-for循環生成的列表<button id="xh_btn" onclick="addListsNew()">單擊我添加新項</button>
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>

JavaScript代碼：定義元素數據源。data自己是一個對象，它的子元素能夠是對象或者特殊化的對象數組。調用時可經過v-for遍歷。

　　　　　　//v-for控制循環
            var xh=new Vue({
                el:"#xh",
                data:{
                    todos:[
                        {text:"聲明式渲染。"},
                        {text:"動態加載屬性。"},
                        {text:"v-if控制條件。"},
                        {text:"v-for控制循環。"}
                    ]
                }
            })

　　　　function addListsNew(){
                xh.todos.push({text:"xh.todos.push添加新項。O(∩_∩)O哈哈~"});
            }

四，處理用戶輸入

這裏的輸入包括行爲，操做，數據等等。例如單擊，傳入狀態等。本例中選擇的是用戶的單擊輸入。

html代碼：在標籤內用v-on:click="函數名"聲明click事件的響應函數。

　　　　<div id="clyhsr"><p>{{message}}</p>
            <button v-on:click="reverseMessage">逆轉消息</button>
        </div>

JavaScript代碼：經過Vue的methods屬性，定義響應函數reverseMessage（）。

　　　　//處理用戶輸入
            var clyhsu=new Vue({
                el:"#clyhsr",
                data:{
                    message:"處理用戶輸入,這個輸入泛指，包括輸入的操做，狀態等等，好比單擊，某個動做"
                },
                methods:{
                    reverseMessage:function(){
                        this.message=this.message.split(',').reverse().join(',')
                    }
                }
            })

這是經過v-model雙向綁定用戶輸入和應用狀態：

html代碼：v-model='message'將用戶輸入內容綁定到message變量上，須要時進行調用。

　　　　 <div id="sxbd">
            v-model使應用狀態和用戶輸入之間的雙向綁定變得容易。
            <p>{{message}}</p>
            <input v-model="message" />
        </div>

JavaScript代碼：初始化變量。

　　　　　　//用戶輸入和應用狀態的雙向綁定
            var sxbd=new Vue({
                el:"#sxbd",
                data:{
                    message:"用戶輸入和應用狀態的雙向綁定。"
                }
            })

五，組件化應用的構建

組件系統是 Vue 的另外一個重要概念，由於它是一種抽象，容許咱們使用小型、自包含和一般可複用的組件構建大型應用。也就是容許咱們「工廠化」生產咱們的應用吧。

html代碼：組件調用時，在頁面中添加組件標籤名稱，併爲之添加上相應的指令。v-for遍歷數據源，取得每個元素放在item裏面；v-bind:todo="item"，將遍歷得到的每一個元素傳給組件的todo屬性，用於經過模板生成元素。兩個指令結合，實現了組件的實例化。（能夠理解爲todo屬性使得todo-item組件能夠實現多態吧。）

　　　　　　<div id="component">
                <ol>
                    <todo-item v-for="item in lists" v-bind:todo="item"></todo-item>
                </ol>
            </div>

JavaScript代碼：註冊組件，經過組件的props屬性，實現數據的跨域傳遞（實例化）。如，todo對於不一樣的Vue對象表明不一樣的數據，相應的todo.text也就不一樣，最終生成的組件也就不同.

　　　　　　//註冊組件
            Vue.component('todo-item',{
                props:['todo'],
                template:"<li>{{todo.text}}</li>"
            })
            //調用組件,每個todo都是lists裏的一個元素，v-for實現循環
            var component=new Vue({
                el:"#component",
                data:{
                    lists:[
                        {text:"第一，註冊組件。"},
                        {text:"第二，像使用原始標籤同樣，在頁面中使用組件。"},
                        {text:"第三，經過定義原始數據，個性化調用組件。"},
                        {text:"組件能夠有屬性，用來將數據從父域傳到子域，如本例中的prop"},
                        {text:"組件能夠利用v-for,v-bind，實現循環和綁定事件監聽。"}
                    ]
                }
            })

組件和自定義元素的區別：

Vue 組件很是相似於自定義元素——它是 Web 組件規範的一部分，這是由於 Vue 的組件語法部分參考了該規範。例如 Vue 組件實現了 Slot API 與 is 特性。可是，仍是有幾個關鍵差異：
1,Web 組件規範仍然處於草案階段，而且尚無瀏覽器原生實現。相比之下，Vue 組件不須要任何補丁，而且在全部支持的瀏覽器（IE9 及更高版本）之下表現一致。必要時，Vue 組件也能夠包裝於原生自定義元素以內。
2,Vue 組件提供了純自定義元素所不具有的一些重要功能，最突出的是跨組件數據流，自定義事件通訊以及構建工具集成。

作個小總結，就目前認知而言，我以爲，聲明式渲染主要是數據相關，數據是一個應用的核心組成部分，是一個應用的靈魂，聲明式渲染就是經過一個個聲明來渲染應用的各個小框架，讓應用有生命，例子中的聲明只簡單的發生在js腳本里，若是是複雜的應用則確定少不了服務器語言，數據庫，數據來源和數據結構也會相對複雜，可是最基本的東西萬變不離其宗，因此必定要掌握聲明式渲染的基本原理和實現；條件與循環，判斷和遍歷，可理解爲對聲明的數據進行分析必不可少的工具，固然，通常狀況下循環對數據進行遍歷的同時會進行相應的操做；處理用戶輸入，狹義的用戶輸入是單純的文本輸入，廣義的輸入可指代用戶的任何輸入，也就是用戶對應用的任意操做，包括單擊某個按鈕，刷新頁面等等，這裏的輸入即指廣義的用戶輸入，處理的前提是辨識輸入類型分類處理，好比經過v-on:click=‘’，來辨識單擊操做並指定對應的處理函數。另外一種處理輸入的方式是使用v-model=''，來記錄用戶輸入，而後在須要的地方經過變量名調用；最後說說組件，Vue裏的組件在理解上能夠類比於html元素，可是，它又優於html元素，由於Vue組件可以實現不少複雜的功能，例如跨組件數據流，使得父子組件的解耦成爲可能。