快捷導(dǎo)航

小白教程|一小時上手最流行的前端框架vue（推薦）

更新時間：2019年04月10日 17:11:48 作者：全棧社區(qū)

這篇文章主要介紹了前端框架vue，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

vue是現(xiàn)在很火的一個前端MVVM框架，它以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建，與angular和react并稱前端三大框架。相比angular和react，vue更加輕巧、高性能、也很容易上手。大家也可以移步vue官網(wǎng)，看一下它的介紹和核心功能介紹。簡單粗暴的理解就是：用vue開發(fā)的時候，就是操作數(shù)據(jù)，然后vue就會處理，以數(shù)據(jù)驅(qū)動去改變DOM。使用vue，我們可以集中精力于如何處理數(shù)據(jù)上，數(shù)據(jù)改變后，頁面顯示也會隨之改變。相比jquery那種操作DOM元素的開發(fā)方式，能有效提高開發(fā)效率，個人覺得有接近兩三倍的提升。

一、安裝

我們可以通過npm或者直接引入script標(biāo)簽兩種方式來安裝vue。這里為了方便說明，采用第二種方式，我們只需要在html頁面引入標(biāo)簽即可。個人測試開發(fā)可以使用bootcdn的資源。

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

二、核心思想

“數(shù)據(jù)綁定”是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代碼里面設(shè)置了一個id為“app”的div，然后在javascript里面實例化了一個屬性el為“#app”的vue對象，表示這個vue對象用來處理該div的顯示。

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

這樣只要message字段改變，p元素的內(nèi)容就會改變。只要input的輸入內(nèi)容改變，message字段就會改變，從而導(dǎo)致p元素的內(nèi)容改變。所以我們改變頁面中輸入框的值，p元素里面的內(nèi)容也隨之改變。

三、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屬性里面存放頁面展示的數(shù)據(jù)，methods放置頁面調(diào)用的一些方法。

四、數(shù)據(jù)綁定

使用下面的語法可以將頁面元素的內(nèi)容和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" rel="external nofollow" >這是一個鏈接</a>
<img :src:href="imgUrl" rel="external nofollow" alt="這是一張圖片" />

6.表達(dá)式

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

五、事件綁定

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

1. 點擊事件

<button type="button" v-on:click="showMsg" >點擊調(diào)用showMsg方法</button>

2.選擇事件

<select v-on:change="showChangeMsg" >
<option value="1">選項一</option>
<option value="2">選項二</option>
</select>

六、綜合例子

html代碼

<div id="app">
  <h3>商品列表</h3>
  <hr/>
  <table>
    <th>
      <td>商品名</td><td>商品圖片</td><td>商品數(shù)量</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請求后端服務(wù)器得到商品列表數(shù)據(jù)賦值給vue實例數(shù)據(jù)的list字段，然后在頁面中使用vue模版語法循環(huán)渲染出來，并給每個商品綁定了一個刪除按鈕點擊事件，點擊后調(diào)用vue實例的deleteProduct執(zhí)行商品刪除操作。

以上就是vue框架的簡單入門介紹，大家可以到vue官網(wǎng)去學(xué)習(xí)更多高級應(yīng)用。

以上所述是小編給大家介紹的前端框架vue詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: