Vue2.x學習一：基礎入門

WUJYAN發表於2018-05-31
Vue

基礎簡介

Vue屬於資料驅動框架。
與jquery不同 ( jquery是對dom的封裝，屬於模型驅動框架)。
資料驅動框架：即資料–驅動–模型。
也就是說，資料的改變會影響檢視的改變，而這樣的過程由框架來完成。

Vue採用MVVM模式。
M——Modal———-資料模型—–表示在data屬性中定義的內容
V——-View———–檢視———–html標籤顯示的內容
VM—-ViewModal—-中介軟體——–將模型中的資料轉換為檢視

相容性

Vue 不支援 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支援所有相容 ECMAScript 5 的瀏覽器。
—-事實上，在MVVM框架興起之後，大家對相容性的要求就不是這麼高了。而現在相容IE8 及以下版本的公司（技術更新比較慢的公司），不會用到vue框架，也不會招用vue框架的人。因此，我們的市場是中小型公司和先進的公司。

安裝

①直接用 <script> 引入
將檔案直接下載到本地，放到要引入檔案的資料夾中，通過<script src=” “></script>引入。
此時，Vue 會被註冊為一個全域性變數。
一般在教學中使用。

②cdn 線上引入
連結到一個你可以手動更新的指定版本號，如：
<script src=”https://cdn.jsdelivr.net/npm/…;></script>

③npm
$ npm install vue
一般在開發專案時使用，需要用到vue-cli腳手架。

Vue例項

1）在建立vue例項之前，我們先建立一個html文件，然後引入vue.js檔案。

需要注意的是：當我們引入vue.js後，（就像引入jquery.js,它為我們提供了一個全域性變數$）,它併不併不影響全域性變數。我們使用了框架之後，它只會影響一個變數，那就是Vue變數，以供我們的程式碼直接呼叫。

我們可以簡單的測試一下：

<script type="text/javascript">
    //vue框架提供的全域性變數Vue,它是構建Vue物件的建構函式
    console.log(Vue);
    /*列印結果為：function mn(e){this._init(e)}*/    
</script>

如果你引入js檔案了，並且成功地在控制檯列印出了結果，那麼你就可以進行接下來的操作了。

2）在<body></body>中編寫檢視程式碼

以下面程式碼為例：

<div class="container">
    <div class="header">
        <h3>第一個Vue例項</h3>
    </div>
    <div class="content">
        <table class="table table-bordered table-hover">
            <caption class="text-center" style="caption-side: top;">
                <h4>學生資訊</h4>
            </caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>            
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

需要注意的是：
在寫程式碼的時候最好要用一個根標籤包裹。例如：<div class=”container”></div>
我們要注意程式碼規範，並且在寫程式碼的時候可以活用bootstrap框架，這樣可以簡化我們的程式碼開發。

寫完我們要顯示的內容之後，接下來就要，開始我們的主要部分了。

3）構建Vue物件的建構函式

①通過用Vue函式建立一個新的Vue例項。

<script type="text/javascript">
    var vm = new Vue({ 傳遞物件/選項 });
</script>

②傳遞選項 el,data

在物件中，我們可以傳遞以下選項：

el
提供一個在頁面上已存在的DOM元素作為Vue例項的 掛載目標(作用物件)。
例如：

<script type="text/javascript">
    var vm=new Vue({
        el:`.container`
    });
</script>

當然，如果Vue例項在例項化時沒有收到el選項，則它處於“未掛載”狀態。
此時，我們可以通過vm.$mount()進行手動掛載。
例如：

<script type="text/javascript">
    var vm=new Vue({
        //選項
    });
    vm.$mount(`.container`);
</script>

或者直接這樣寫：

<script type="text/javascript">
    new Vue({
        //選項
    }).$mount(`.container`);
</script>

data
它是一個物件，頁面中的所有資料都定義在data:{}中。
此時，我們需要知道在vue中，資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號)，即{{}}。
我們先進行一個測試：

<div class="container">
    {{msg}}
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:`.container`,
        data:{
            msg:`hello world`
        }
    });
</script>
<!-- 在頁面中列印出的結果就是 hello world -->

由此，我們可知雙大括號中的語法可被vue解析，而這個被解析的值就是在data中尋找。

③遍歷 v-for
我們要遍歷資訊，要用到一個命令，v-for，它是根據一組陣列的選項列表進行渲染。
它的語法形式是：v-for=”item in items”
其中，item是陣列元素迭代的別名，items 是源資料陣列(也就是要放在data物件中，供item來尋找，每找到一次就要進行for-of迴圈)。
因此，之前寫的程式碼例項，能夠被修改成這樣：

<tr v-for=`student in studentList`>
    <td>{{student.name}}</td><!-- 將學生中的name取出 -->
    <td>{{student.age}}</td><!-- 將學生中的age取出 -->
</tr>
data:{
    //studentLsit是陣列，因此用中括號
    //目前由於沒有與後臺資料庫進行繫結，因此在這裡為了學習，直接賦值
    studentList:[{
        name:`terry`,
        age:`12`
    },{
        name:`larry`,
        age:`13`
    }]
}

完整程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一個Vue例項</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="header"><h3>第一個Vue例項</h3></div>
        <div class="content">
            <table class="table table-bordered table-hover">
                <caption class="text-center" style="caption-side:top">
                    <h4>學生資訊</h4>
                </caption>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年齡</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for=`student in studentList`>
                        <td>{{student.name}}</td>
                        <td>{{student.age}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el:`.container`,
            data:{
                studentList:[{
                    name:`terry`,
                    age:`12`
                },{
                    name:`larry`,
                    age:`13`
                }]
            }
        });
    </script>
</body>
</html>

以上就是對Vue2.x的簡單瞭解及學習，後續的學習內容會慢慢更新……

相關文章