Vue庫的使用

時間  2020-07-09
標籤 vue 使用 简体版
原文   原文鏈接

vue.js簡介

Vue.js讀音 /vjuː/, 相似於 viewjavascript

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和關注程度在三大框架中稍微勝出，而且它的熱度還在遞增。css

Vue.js能夠做爲一個js庫來使用，也能夠用它全套的工具來構建系統界面，這些能夠根據項目的須要靈活選擇，因此說，Vue.js是一套構建用戶界面的漸進式框架。html

Vue的核心庫只關注視圖層，Vue的目標是經過儘量簡單的 API 實現響應的數據綁定，在這一點上Vue.js相似於後臺的模板語言。前端

Vue也能夠將界面拆分紅一個個的組件，經過組件來構建界面，而後用自動化工具來生成單頁面(SPA - single page application)系統。vue

Vue.js使用文檔及下載Vue.js

Vue.js使用文檔已經寫的很完備和詳細了，經過如下地址能夠查看： https://cn.vuejs.org/v2/guide/
vue.js若是當成一個庫來使用，能夠經過下面地址下載： https://cn.vuejs.org/v2/guide/installation.htmljava

Vue.js基本概念

首先經過將vue.js做爲一個js庫來使用，來學習vue的一些基本概念，咱們下載了vue.js後，須要在頁面上經過script標籤引入vue.js，開發中可使用開發版本vue.js，產品上線要換成vue.min.js。ios

<script type="text/javascript" src="js/vue.min.js"></script>

Vue實例

每一個 Vue 應用都是經過實例化一個新的 Vue對象開始的：git

window.onload = function(){
    var vm = new Vue({
        el:'#app',
        data:{message:'hello world!'}
    });
}    
......

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

其中，el屬性對應一個標籤，當vue對象建立後，這個標籤內的區域就被vue對象接管，在這個區域內就可使用vue對象中定義的屬性和方法。github

數據與方法

當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其data對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。還能夠在Vue實例中定義方法，經過方法來改變實例中data對象中的數據，數據改變了，視圖中的數據也改變。ajax



window.onload = function(){
    var vm = new Vue({
        el:'#app',
        data:{message:'hello world!'},
        methods:{
            fnChangeMsg:function(){
                this.message = 'hello Vue.js!';
            }
        }
    });
}    
......

<div id="app">
    <p>{{ message }}</p>
    <button @click="fnChangeMsg">改變數據和視圖</button>
</div>

Vue.js模板語法

模板語法指的是如何將數據放入html中，Vue.js使用了基於 HTML的模板語法，容許開發者聲明式地將DOM綁定至底層 Vue 實例的數據。全部 Vue.js的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。

插入值

數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值：

<span>Message: {{ msg }}</span>

若是是標籤的屬性要使用值，就不能使用「Mustache」語法，須要寫成使用v-bind指令：

<a v-bind:href="url" v-bind:title='tip'>百度網</a>

插入的值當中還能夠寫表達式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">連接文字</a>

指令

指令 (Directives) 是帶有「v-」前綴的特殊屬性。指令屬性的值預期是單個JavaScript表達式，指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於DOM。常見的指令有v-bind、v-if、v-on。

<!-- 根據ok的布爾值來插入/移除 <p> 元素 -->
<p v-if="ok">是否顯示這一段</p>

<!-- 監聽按鈕的click事件來執行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按鈕</button>

縮寫

v-bind和v-on事件這兩個指令會常常用，因此有簡寫方式：



<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>


<!-- 完整語法 -->
<button v-on:click="fnChangeMsg">按鈕</button>

<!-- 縮寫 -->
<button @click="fnChangeMsg">按鈕</button>

Class 與 Style 綁定

使用v-bind指令來設置元素的class屬性或者sytle屬性，它們的屬性值能夠是表達式，vue.js在這一塊作了加強，表達式結果除了是字符串以外，還能夠是對象或者數組。

Class綁定

對象語法

能夠給v-bind:class傳一個對象，以動態的切換class

<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>

data屬性值以下：

data: {
  isActive: true,
  hasError: false
}

最終渲染的效果：

<div class="static active"></div>

也能夠給v-bind:class傳一個對象引用

<div v-bind:class="classObject"></div>

data屬性值能夠寫成：

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

數組語法

能夠給v-bind:class傳一個數組，以應用一個 class 列表

<div v-bind:class="[activeClass, errorClass]"></div>
......

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

最終渲染爲：

<div class="active text-danger"></div>

若是你也想根據條件切換列表中的 class，能夠用三元表達式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

不過，當有多個條件class時這樣寫有些繁瑣。因此在數組語法中也可使用對象語法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

style綁定

對象語法

v-bind:style 的對象語法十分直觀——看着很是像 CSS，但實際上是一個JavaScript 對象。CSS 屬性名能夠用駝峯式 (camelCase) 來命名：

<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div>

data數據以下：

data: {
  activeColor: 'red',
  fontSize: 30
}

也能夠給v-bind:style傳一個對象引用

<div v-bind:style="styleObject"></div>

data數據以下：

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

數組語法

v-bind:style 的數組語法能夠將多個樣式對象應用到同一個元素上：



<div v-bind:style="[baseStyles, overridingStyles]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab_con{
            margin: 50px auto;
            width: 500px;
            height: 350px;
            

        }
        .tab_btns{
            height: 50px;
        }
        .active{
            background: gold;
        }
        input{
            width: 100px;
            height: 50px;
            background: #ddd;
            border: 0;
            outline: none;
        }
        .tab_cons{
            
            height: 300px;
            background:gold;

        }
        
        /* 在css中要特別注意權重的問題,否則會致使css樣式出現錯誤 */
        .tab_cons div{
            height: 300px;
            line-height: 300px;
            text-align:center;
            
            display: none;
            font-size: 30px;
        }
        .tab_cons .current{
            display: block;
        }
    
    
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
               el : ".tab_con",
            
               data:{
                   iNum:0,
               },
            });
            
        }
    
    
    
    </script>

   
</head>
<body>

    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按鈕一" v-bind:class="[(iNum==0)?'active':'']" v-on:click="iNum=0">
            <input type="button" value="按鈕二" v-bind:class="[(iNum==1)?'active':'']" v-on:click="iNum=1">
            <input type="button" value="按鈕三" v-bind:class="[(iNum==2)?'active':'']" v-on:click="iNum=2">
        </div>
        <div class="tab_cons">
            <div v-bind:class="[(iNum==0)?'current':'']">按鈕一對應的內容</div>
            <div v-bind:class="[(iNum==1)?'current':'']">按鈕二對應的內容</div>
            <div v-bind:class="[(iNum==2)?'current':'']">按鈕三對應的內容</div>
        </div>
    </div>

</body>
</html>

條件渲染

經過條件指令能夠控制元素的建立(顯示)或者銷燬(隱藏)，經常使用的條件指令以下：

v-if

v-if能夠控制元素的建立或者銷燬

<h1 v-if="ok">Yes</h1>

v-else

v-else指令來表示 v-if 的「else 塊」，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

v-else-if，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

另外一個用於根據條件展現元素的選項是 v-show 指令。用法和v-if大體同樣，可是它不支持v-else,它和v-if的區別是，它製做元素樣式的顯示和隱藏，元素一直是存在的：



<h1 v-show="ok">Hello!</h1>

表渲染

經過v-for指令能夠將一組數據渲染到頁面中，數據能夠是數組或者對象，v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名。

遍歷數組

<ul id="example-1">
  <li v-for="item in items">
    {{ item}}
  </li>
</ul>

vue對象建立以下：

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: ['foo','bar']
  }
})

若是想加上索引值，能夠加上第二個參數

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

遍歷對象

也能夠用 v-for 經過一個對象的屬性來迭代

<ul id="v-for-object">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

若是想加上對象屬性名，能夠加上第二個參數

<ul id="v-for-object">
  <li v-for="(value,key) in object">
    {{ key }}-{{ value }}
  </li>
</ul>

事件處理

事件綁定方法

能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼，事件的處理，簡單的邏輯能夠寫在指令中，複雜的須要在vue對象的methods屬性中指定處理函數。

<div id="example-1">
  <!-- 在指令中寫處理邏輯 -->
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
......
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

methods屬性中指定處理函數：

<div id="example-2">
  <!-- greet 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
......

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 對象中定義方法
  methods: {
    greet: function () {
      // `this` 在方法裏指向當前 Vue 實例
      alert('Hello ' + this.name + '!')
    }
  }
})

事件修飾符

實際開發中，事件綁定有時候牽涉到阻止事件冒泡以及阻止默認行爲，在vue.js能夠加上事件修飾符



<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main2.css">
    <title>Document</title>
   <script src="vue.js"></script>
   <script>
       window.onload = function(){
           var vm = new Vue({

            el: "#tankuang",
            data:{
                isShow : false,
            }

           })

       }
  
   
   </script>
</head>
<body>
    <div id ="tankuang" @click="isShow=false">
        <input type="button" value="彈出彈框" id="btn01" @click.stop ="isShow=true">
        <div class="pop_main" id="pop" @click ="isShow=false" >

            <div class="pop_con" v-show="isShow" @click.stop>
                <div class="pop_title" >
                    <h3>系統提示</h3>
                    <a href="#" id="shutoff" @click.stop="isShow=false">×</a>
                </div>
                <div class="pop_detail" >
                    <p class="pop_text">親！請關注近期的優惠活動！</p>
                </div>
                <div class="pop_footer">
                                
                </div>
            </div>
            <div class="mask" v-show="isShow"></div>
        </div>
    </div>
    
</body>
</html>

表單輸入綁定

能夠用 v-model 指令在表單 <input> 及 <textarea> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素

單行文本框

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本框

<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

複選框

單個複選框，綁定到布爾值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多個複選框，綁定到同一個數組：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

......

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

單選框

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

......
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

下拉框




<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
......

new Vue({
  el: '...',
  data: {
    selected:''
  }
})

計算屬性和偵聽屬性

計算屬性

模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

這個表達式的功能是將message字符串進行反轉，這種帶有複雜邏輯的表達式，咱們可使用計算屬性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

......

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

偵聽屬性

偵聽屬性的做用是偵聽某屬性值的變化，從而作相應的操做，偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值通常是函數,當你偵聽的元素髮生變化時，須要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。




window.onload = function(){
    var vm = new Vue({
        el:'#app',
        data:{
            iNum:1
        },
        watch:{
            iNum:function(newval,oldval){
                console.log(newval + ' | ' + oldval) 
            }
        },
        methods:{
            fnAdd:function(){
                this.iNum += 1;
            }
        }
    });
}

過濾器

Vue.js容許你自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式

<!-- 在雙花括號中 -->
{{ prize | RMB }}

<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>

過濾器其實是一個函數，能夠在一個組件的選項中定義組件內部過濾器：

filters:{
  RMB:function(value){
    if(value=='')
    {
      return;
    }
    return '¥ '+value;
  }
}

或者在建立 Vue 實例以前全局定義過濾器：

Vue.filter('Yuan',function(value){
  if(value=='')
  {
    return;
  }
  return value+'元';
});

此時過濾器'RMB'只能在定義它的對象接管標籤內使用，而'Yuan'能夠全局使用.

實例生命週期

每一個Vue實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到DOM並在數據變化時更新 DOM 等。同時在這個過程當中會自動運行一些叫作生命週期鉤子的函數，咱們可使用這些函數，在實例的不一樣階段加上咱們須要的代碼，實現特定的功能。

beforeCreate

在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

created

在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始

beforeMount

在掛載開始以前被調用：相關的 render 函數首次被調用。

mounted

實例掛載到dom以後被調用，能夠當成是vue對象的ready方法來使用，通常用它來作dom的初始化操做。

beforeUpdate

數據發生變化前調用

updated

數據發生變化後調用.

 

數據交互

vue.js沒有集成ajax功能，要使用ajax功能，可使用vue官方推薦的axios.js庫來作ajax的交互。 axios庫的下載地址：https://github.com/axios/axios/releases

axios完整寫法：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios請求的寫法也寫成get方式後post方式。

執行get請求

// 爲給定 ID 的 user 建立請求
// then是請求成功時的響應，catch是請求失敗時的響應

axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});


// 可選地，上面的請求能夠這樣作
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

執行post請求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程