Vue基礎

Vue簡介

Vue是數據驅動組件，為現代化的Web頁面而生，與ReactJS的中心思想一樣，都是一切皆是組件。他是MVVM模式的框架，這點又與AngularJS是一樣的

特點

<li>簡潔：HTML模板 + JSON數據 + Vue實例</li>
<li>數據驅動：自動追蹤依賴的模板表達式和機選屬性</li>
<li>組件化：用可解耦、可復用的組件來構造世界</li>
<li>輕量：~24kb min + zip，而且無依賴</li>
<li>快速：精確有效的異步批量DOM更新</li>
<li>模塊友好：通過NPM或Bower安裝，無縫融入你的工作流</li>

兼容性

Vue.js不支持IE8以下版本，Vue.js使用了IE8不支持的ECMAScript5特性

入門使用，簡單的Demo

以下是本人通過本地vue.js學習的，因為服務器上面運行慢，不利用學習使用，所以以下的Demo全部在本地實現。

首先要引入vue.js文件，在網上請求文件亦可。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

1.首先我們做一下最簡單的Demo--Hello world

html代碼

<div id="app">
    <p>{{message}}</p>
</div>

這里我需要解釋一下：p標簽之間的雙大括號是Mustache語法，與AngularJS使用規則一樣。內部不僅可以寫變量也可以寫一些表達式，如：1 + 2 ，Math.random()>0.5等等

js代碼

    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        }
    });

這里我也需要強調一下，

  • vm其實就是view model的縮寫 ，我們這里用vm來命名
  • el對應的是跟標簽，這里的跟標簽并不是html元素標簽，而是我們所對應的元素 <code> <div id='app'></div> </code>
  • data對應的是數據，而這里data作為vueJS的內部實例數據對象，所以我們這里不需要通過data這個對象來調用數據
    而是直接用其內部屬性名調用即可

2.接下來我要介紹一下vueJS中的綁定

一種是屬性綁定，通過v-bind來實現 。另一種是事件綁定，通過v-on來實現。而：是v-bind的縮寫，@是v-on的縮寫

html代碼

<div id="app-2">
   <span v-bind:title="message">
      Hover your mouse over me for a few seconds to see my dynamically bound title!
   </span>
</div>

<div id="app-3">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

js代碼

var app2 = new Vue({
    el: '#app-2',
    data: {
       message: 'You loaded this page on ' + new Date()
    }
})

var app3 = new Vue({
    el: '#app-3',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

這里面methods是對應函數，后續我們給大家詳細講解

3.接下來我們看一下vueJS的語法糖 --v-model雙向綁定

<div id="app-4">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

var app6 = new Vue({
    el: '#app-4',
    data: {
        message: 'Hello Vue!'
    }
})

其實這個完全可以用v-bind與v-on來實現

4.我們看一下vueJS是如何用for來渲染頁面的

<div id="app-5">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
     </ol>
</div>


var app4 = new Vue({
        el: '#app-5',
    data: {
            todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
        ]
        }
})

5.最后我們看一下，vue中的組件是如何運用的

html代碼

<div id="app-7">
    <ol>
        <!-- Now we provide each todo-item with the todo object    -->
        <!-- it's representing, so that its content can be dynamic -->
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
</div>

js代碼

// 用組建構建應用
// 在 Vue 里，一個組件實質上是一個擁有預定義選項的一個 Vue 實例：
// Define a new component called todo-item

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
    el: '#app-7',
    data: {
    groceryList: [
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
        ]
    }
})

是不是非常的簡單啊？這也就是我們vueJS基礎的全部內容了，接下來我要給大家介紹一下vueJS的常用指令

  • v-if 根據表達式的值來渲染元素
  • v-else 與v-if是相對的，但是v-else必須配合v-if或者v-if-else來使用，不然系統是解析不了的
  • v-show 根據表達式的值得真假切換display，實現隱藏

這里我不得不對 v-if以及v-show做一下對比了：

v-if實現切換隱藏是對DOM的徹底銷毀或重建，而v-show是切換的display屬性，
也就是說，v-if在條件為假時是不會對DOM進行渲染的，而v-show是始終會對DOM進行著渲染。
直白一點：v-if的初始DOM渲染損耗要低于v-show，而切換損耗要高于v-show

  • v-for基于源數據或模板重復次數

語法：v-for=“item in items”????v-for=“item of items”
這里使用for-in與for-of均可。

v-for擴展

  • v-for=“(item,index) of items” 當遍歷數組時，這里的item是元素index是數組的下標

  • v-for=“(value,key) of object” 當遍歷對象的時候，第一個參數是對象中的value，第二個參數是key

  • v-for=“num of 10” 當遍歷的是數字的時候，num是從1-10的數字

  • v-bind綁定

v-bind綁定也就是屬性綁定，這在上文中已經提到了

讓我們看一下它的語法：

  • v-bind:src='./vue.js' //簡寫： :src='./vue.js'

  • :class='{red:isRed}' //綁定class

  • :class='{classA,classB}' //可以綁定多個class

  • :style='{fontSize:size + "px"}' //綁定style

  • v-bind='{id:someProp,"other-attr":"other-value"}' //可以綁定多個屬性

  • v-model在表單上創建雙向綁定

最后我們來詳細介紹一下Vue實例吧

Vue實例中的選項

  • 1.data----Vue實例數據對象，這個在上文中已經講到，這里就不細說了
  • 2.methods----Vue實例的方法，實例可以直接訪問這些方法，方法中的this自動綁定到實例
  • 3.computed----實例計算屬性，1.同樣也是屬性，對應的不是值，而不是函數。2.getter和setter的this自動綁定到實例

實例計算屬性的栗子

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
                // `this` points to the vm instance
                return this.message.split('').reverse().join('')
            }
        },
    })
    console.log(vm.reversedMessage);
    vm.message = 'luoxue';
    console.log(vm.reversedMessage);
</script>

實例屬性

  • vm.$data--------Vue實例觀察的數據對象
  • vm.$el----------Vue實例掛在的元素
  • vm.$parent
  • vm.$root
  • vm.$children

實例方法vm.$watch

觀察Vue實例的一個表達式或計算函數

語法：

vm.$watch('msg',function(newValue,oldValue){
    console.log(newValue,oldValue);
});

vm.$unwatch返回一個取消觀察函數，用來停止觸發回調

var unwatch = vm.$watch('a',cb);
unwatch();

關于計算屬性與watch方法的對比Demo

<div id="demo">
    <p>{{ fullName }}</p>
    <input v-model="firstName">
    <input v-model="lastName">
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
            this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })
    // 上面代碼是命令式的和重復的。跟計算屬性對比：
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
        },
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

這里我們不難看出：使用計算屬性方法要比，watch方法簡單的多。但是有些時候計算屬性并不能解決我們遇到的問題，使用watch方法也是一個不錯的選擇。

Vue實例之生命周期

Vue的實例是Vue框架的入口，其實也就是前端的ViewModel，它包含了頁面中的業務邏輯處理、數據模型等，當然它也有自己的一系列的生命周期的事件鉤子，輔助我們進行對整個Vue實例生成、編譯、掛著、銷毀等過程進行js控制。

Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染更新、渲染卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到
銷毀的過程，就叫做生命周期。

  • created--------創建完成
  • mounted---------加載完成
  • updatad----------更新完成
  • destroyed---------已經釋放
Paste_Image.png

上面我已經說了，VueJS的中心思想是一切皆是組件，下篇我會針對VueJS中的組件進行詳解。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、模版指令 通過模版指令(寫在html中的)，即是html和vue對象的粘合劑。 數據渲染 v-text、v-h...
    EndEvent閱讀 2,413評論 3贊 56
  • VUE框架的核心理念：數據驅動、組件化 數據驅動就是當數據發生變化的時候，用戶界面發生相應的變化，開發者不需要手動...
    bob_python閱讀 360評論 0贊 0
  • Vue實例 每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例啟動的。 每個 Vue 實...
    Miss_麥兜閱讀 289評論 0贊 0
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容，還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,079評論 0贊 29
  • 提及毛姆，大部分人直接想到的，就是他的代表作——《月亮和六便士》。這部小說以其引人入勝的情節和令人印象深刻的文字，...
    洋芋絲絲閱讀 3,816評論 46贊 89