vue難學？1小時就能上手的教程

vue是如今很火的一個前端MVVM框架，它以數據驅動和組件化的思想構建，與angular和react並稱前端三大框架。

相比angular和react，vue更加輕巧、高性能、也很容易上手。你們也能夠移步vue官網，看一下它的介紹和核心功能介紹。簡單粗暴的理解就是：用vue開發的時候，就是操做數據，而後vue就會處理，以數據驅動去改變DOM。使用vue，咱們能夠集中精力於如何處理數據上，數據改變後，頁面顯示也會隨之改變。

相比jquery那種操做DOM元素的開發方式，能有效提升開發效率，我的以爲有接近兩三倍的提高。

1、 安裝

咱們能夠經過npm或者直接引入script標籤兩種方式來安裝vue。這裏爲了方便說明，採用第二種方式，咱們只須要在html頁面引入標籤便可。我的測試開發可使用bootcdn的資源。

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

2、核心思想

「數據綁定」是vue的核心思想，這裏筆者舉一個hello world例子來講明這種思想。

html代碼

<div id="app">

  <p>{{ message }}</p>

  <input v-model="message">

</div>

javascript代碼

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})

頁面效果

咱們在html代碼裏面設置了一個id爲「app」的div，而後在javascript裏面實例化了一個屬性el爲「#app」的vue對象，表示這個vue對象用來處理該div的顯示。

接着在vue對象的data屬性裏面設置了一個message字段，把這個字段和頁面的p元素和input元素雙向綁定起來。

這樣只要message字段改變，p元素的內容就會改變。只要input的輸入內容改變，message字段就會改變，從而致使p元素的內容改變。因此咱們改變頁面中輸入框的值，p元素裏面的內容也隨之改變。

3、vue實例基本組成

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    url: 'www.salasolo.com'
  },
  methods:{
      showMsg: function(){
          alert(this.message)
      },
      jumpUrl: function(){
          location.href = this.url
      }
  },
})

能夠看到，一個vue實例有三個基本的屬性，el屬性用來指定綁定的頁面容器，data屬性裏面存放頁面展現的數據，methods放置頁面調用的一些方法。

4、數據綁定

使用下面的語法能夠將頁面元素的內容和vue實例的data屬性裏面的字段綁定起來。

1.文本

<span>消息: {{ message }}</span>

2.原始html

<span v-html="htmlCode"></span>

3.列表

<span v-for="item in list">{{item}}</span>

4.條件

<span v-if="isHuman">我是人類</span>

<span v-else>我不是人類</span>

5.屬性

<a v-bind:href="url">這是一個連接</a>

<img :src:href="imgUrl" alt="這是一張圖片" />

6.表達式

<span>1+1=: {{ 1+1 }}</span>

5、事件綁定

使用下面的語法能夠將頁面元素的交互事件和vue實例的methods屬性裏面的方法綁定起來。

1. 點擊事件

<button type="button" v-on:click="showMsg" >點擊調用showMsg方法

</button>

2.選擇事件

<select v-on:change="showChangeMsg" >

<option value="1">選項一</option>

<option value="2">選項二</option>

</select>

6、綜合例子

html代碼

<div id="app">
    <h3>商品列表</h3>
    <hr/>
    <table>
        <th>
            <td>商品名</td><td>商品圖片</td><td>商品數量</td><td>操做</td>
        </th>
        <tr v-for="(item,index) in list">
            <td>{{item.name}}</td>
            <td><img src="item.imgUrl" /></td>
            <td>{{item.quantity}}</td>
            <td>
                <button type="button" v-on:click="delete(index)">刪除此商品</button>
            </td>
        </tr>
    </table>
</div>

javascript代碼

new Vue({
    el: '#app',
    data: {
        list:[]
    },
    created:function(){
        this.loadProductList();
    },
    methods:{
        loadProductList:function(){
            $.post('/product/apiGetList',function(data){
                this.list = data.data.list;
            });
        },
        deleteProduct:function(index){
            var _this = this;
            $.post('/product/apiDelete',{productId:_this.list[index]['productId']},function(){
                alert('刪除成功');
            });
        }
    },
})

上面這段代碼表示，在頁面初始化時，經過ajax請求後端服務器獲得商品列表數據賦值給vue實例數據的list字段，而後在頁面中使用vue模版語法循環渲染出來，並給每一個商品綁定了一個刪除按鈕點擊事件，點擊後調用vue實例的deleteProduct執行商品刪除操做。

以上就是vue框架的簡單入門教程，你們能夠到vue官網去學習更多高級應用。