Vue2.x學習一：基礎入門

時間 2019-11-08

標籤 vue2.x vue 學習基礎入門简体版

原文原文鏈接

基礎簡介

Vue屬於數據驅動框架。
與jquery不一樣 ( jquery是對dom的封裝，屬於模型驅動框架)。
數據驅動框架：即數據--驅動--模型。
也就是說，數據的改變會影響視圖的改變，而這樣的過程由框架來完成。javascript

Vue採用MVVM模式。
M------Modal----------數據模型-----表示在data屬性中定義的內容
V-------View-----------視圖-----------html標籤顯示的內容
VM----ViewModal----中間件--------將模型中的數據轉換爲視圖css

兼容性

Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的瀏覽器。
----事實上，在MVVM框架興起以後，你們對兼容性的要求就不是這麼高了。而如今兼容IE8 及如下版本的公司（技術更新比較慢的公司），不會用到vue框架，也不會招用vue框架的人。所以，咱們的市場是中小型公司和先進的公司。html

安裝

①直接用 <script> 引入
將文件直接下載到本地，放到要引入文件的文件夾中，經過<script src=" "></script>引入。
此時，Vue 會被註冊爲一個全局變量。
通常在教學中使用。vue

②cdn 在線引入
連接到一個你能夠手動更新的指定版本號，如：
<script src="https://cdn.jsdelivr.net/npm/...;></script>java

③npm
$ npm install vue
通常在開發項目時使用，須要用到vue-cli腳手架。jquery

Vue實例

1）在建立vue實例以前，咱們先建立一個html文檔，而後引入vue.js文件。

須要注意的是：當咱們引入vue.js後，（就像引入jquery.js,它爲咱們提供了一個全局變量$）,它併不併不影響全局變量。咱們使用了框架以後，它只會影響一個變量，那就是Vue變量，以供咱們的代碼直接調用。vue-cli

咱們能夠簡單的測試一下：數據庫

<script type="text/javascript">
    //vue框架提供的全局變量Vue,它是構建Vue對象的構造函數
    console.log(Vue);
    /*打印結果爲：function mn(e){this._init(e)}*/    
</script>

若是你引入js文件了，而且成功地在控制檯打印出告終果，那麼你就能夠進行接下來的操做了。npm

2）在<body></body>中編寫視圖代碼

如下面代碼爲例：bootstrap

<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的簡單瞭解及學習，後續的學習內容會慢慢更新......

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。