Vue有什麼特性，相對於其餘框架都有那些優點！

時間 2020-02-07

標籤 vue 什麼特性相對於其餘框架都有那些優點简体版

原文原文鏈接

（給達達前端加星標，提高前端技能）javascript

Vue所提供的一些相對高級的特性，表單操做，自定義指令，計算屬性，過濾器，偵聽器，生命週期。css

表單操做的做用，用於用戶的交互，經過表單來進行數據的交互。html

基於Vue的表單操做，input單行文本，textarea多行文本，select下拉多選，radio單選框，checkbox多選框。前端

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 form div {
  height: 40px;
  line-height: 40px;
 }
 form div span:first-child{
  display: inline-block;
  width: 100px;
 }
  </style>
 </head>
 <body>
 <div id="app">
 <form>
 <div>
 <span>姓名：</span>
 <span>
 <input type="text">
 </span>
 </div>
 <div>
 <span>性別：</span>
 <span>
 <input type="radio" id="male">
 <label for="male">男</label>
 <input type="radio" id="female">
 <label for="female">女</label>
 </span>
 </div>
 <div>
 <span>愛好：</span>
 <input type="checkbox" id="ball">
 <label for="ball">籃球</label>
 <input type="checkbox" id="sing">
 <label for="sing">唱歌</label>
 <input type="checkbox" id="code">
 <label for="code">寫代碼</label>
 </div>
 <div>
 <span>工做</span>
 <select>
 <option>請選擇工做</option>
 <option>教師</option>
 <option>老師</option>
 </select>
 </div>
 <div>
 <span>我的簡介</span>
 <textarea></textarea>
 </div>
 </form>
 </div>
 <script type="text/javascript" src="js/vue.js"></script>

表單操做，雙向數據綁定v-model。表單修飾符，number轉化爲數值，trim去掉開頭和結尾的空格，lazy將input事件切換change事件vue

<input v-model.number="phone" type="number">

自定義指令，爲什麼有自定義指令，就是內置指令不知足須要。java

如何自定義指令nginx

Vue.directive('focus' {
 inserted: function(el){
 // 獲取元素的焦點
 el.focus();
 }
})


如何使用


<input type="text" v-focus>

鉤子函數，一個指令定義對象能夠提供如下函數。面試

bind只調用一次，指令第一次綁定到元素時調用，在這裏能夠進行一次性的初始化設置，inserted被綁定元素插入父節點時調用，update所在組件的VNode更新時調用，可是可能發生在其子VNode更新以前，apache

componentUpdated指令所在組件的VNode以及其子VNode所有更新後調用，unbind只調用一次，指令與元素解綁時調用。npm

自定義指令的用法

<input type="text" v-color="msgColor">


// 自定義指令
Vue.directive('color', {
 bind: function(el, binding) {
  el.style.backgroundColor = binding.value.color;
 }
});
var vm = new Vue({
 el: '#app',
 data: {
  msg: {
   color: 'red'
  }
 },
 methods: {
  handle: function() {
  }
 }
}

局部指令

directives: {
 focus: {
  // 指令的定義
  inserted: function(el) {
   el.focus()
  }
 }
}

局部指令的示例：

directives: {
 color: {
  bind: function(el, binding) {
   el.style.backgroundColor = binding.value.color;
  }
 }
}

局部指令只能在本組件中使用，局部指令的應用範圍是有限制的。

計算屬性，爲何須要計算屬性呢，表達式的計算邏輯可能會比較複雜，使用計算屬性能夠是模板內容更加簡潔。

如何使用計算屬性呢？

computed: {
 msgDa: function() {
  return this.msg.split('').reverse().join('')
 }
}


<div>{{msgDa}}</div>
// 直接調用函數名

計算屬性和方法的區別

方法是不存在緩存的，計算屬性是基於它們的依賴進行緩存的。只要值不變就不從新計算。方法不存在緩存的機制。

比較耗時的計算能夠節省性能，一樣的結果沒有比較計算兩次，用了兩次，只執行一次，緩存的問題，計算屬性計算的結果緩存起來了，再次訪問，就訪問計算後的結果。

<div> {{msgDa}} </div>
<div> {{msgDa}} </div>


computed: {
 msgDa: function() {
  console.log('只會打印一次');
  return this.msg.split('').reserse().join('');
 }
}

方法

methods: {
 msgDa: function() {
  console.log('ddd');
  return this.msg.split('').reverse().join('');
 }
}


<div>{{msgDa()}}</div>

偵聽器，是用來偵聽數據的變化，數據一旦發生變化就會通知偵聽器所綁定的方法，偵聽器綁定方法，數據變化時執行異步或開銷較大的操做。計算屬性只能用於一些簡單的操做。

使用方法

watch: {
 firstName: function(val) {
  // val表示變化以後的值
  this.fullName = val + this.lastName;
 },
 lastName: function(val) {
  this.fullName = this.firstName + val; 
 }
}

驗證用戶名的例子，經過v-model實現數據綁定，須要提供提示信息，須要偵聽器監聽輸入信息的變化。採用偵聽器監聽用戶名的變化，調用後臺接口進行驗證，根據驗證的結果調整提示信息，須要修改觸發的事件。

表單域的修飾符

<input type="text" v-model.lazy="uname">

Vue中的數據渲染

{{}}

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


var vm = new Vue({
  el: '#app',
  data:{
        message:"達達前端"
    }
})

v-html是能夠解讀html標籤渲染

<div id="app" v-html='message'>
    <input type="text"/>
    <div >{{ message }}</div>
 </div>
 
 var vm = new Vue({
  el: '#app',
  data:{
        message:"<div style='background:red;width:60px;height:60px'></div>"
    }
})

v-text

v-text是用於操做純文本，它會替代顯示對應的數據對象上的值。

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


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

過濾器，什麼是過濾器，它的做用是什麼呢？

用來格式化數據，好比把字符串格式變爲大寫，將日期格式變化爲指定的格式等。

自定義過濾器

Vue.filter('過濾器名稱', function(value) {
 // 過濾器業務邏輯
})


// 過濾器的使用
<div> {{msg | upper}} </div>

Vue.filter('upper', function(val) {
 return val.chatAt(0).toUpperCase() + val.slice(1);
})

局部過濾器

filters: {
 capitalize；function() {}
}

Vue.filter('format', function(value, arg1){
})


使用
<div>{{date | format('yyyy-MM-dd')}}</div>

日期格式，y表示年，M表示年中的月份1-12，d表示月份中的天1-31，h表示小時0-23，m表示分0-59，s表示秒0-59等。

指令是用來操做dom，什麼是組件，組件是html css js等的一個聚合體。組件化，能夠加速項目的進度，能夠在項目中複用，將一個完整功能的一部分能夠多處使用。

Vue.component的主要功能是註冊組件，不是建立組件。

全部的 Vue.js 組件都是被擴展的 Vue 實例，使用Vue.component註冊組件時，建立Vue實例必須在註冊組件的代碼的後面，不然註冊的組件不會被顯示。

註冊：

<div id="app">
    <Father></Father>
    <gd-da></gd-da>
  </div>
</body>
<script>


  Vue.component('Father',{
    template: '<div> 這裏是全局註冊 </div>'
  })




  new Vue({
    el: '#app',
    components: {
      'GdDa': {
        template: '<div> 這裏是局部註冊 </div>'
      }
    }
  })
</script>

template

類型：string

說明：

一個字符串模板做爲 Vue 實例的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。

CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

NPM安裝

npm install vue

完整代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入門之Helloworld</title>
    <!--引入Vue庫-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--建立一個Div-->
    <div id="app">
        <!--Vue的模板的綁定數據的方法，用兩對花括號進行綁定Vue中的數據對象的屬性 -->
        {{message}}
    </div>


    <!--建立Vue的對象-->
    <script type="text/javascript">
        var app=new Vue({ // 建立Vue對象。Vue的核心對象。
            el:'#app', // el屬性：把當前Vue對象掛載到 div標籤上，#app是id選擇器
            data:{    // Vue對象中綁定的數據
                message:'hello Vue!' // 自定義的數據
            }
        })
</script>
</body>
</html>

輸出結果：

hello Vue!

內部指令

v-if 、v-else、 v-show、v-else-if

<div v-if="isLogin">你好</div>
<div v-else>請登陸後操做</div>
<div v-show="isLogin">你好</div>

<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-if與v-show的區別

v-if：開銷較高，在運行時條件不多改變時使用。

v-show：開銷較小，在常頻繁地切換時使用。

v-for

<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>


<!--JS代碼 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[1,2,3,4]
        }
    })
</script>

對象遍歷

<!-- 模板 -->
<div id="app">
    <ul>
        <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }} - {{ value }}
        </li>
    </ul>
</div>


<!--JS代碼 -->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object: {
                firstName: 'da',
                lastName: 'dada'
            }
        }
    })
</script>

v-text，{{xxx}}取值有個弊端

當網速很慢或javascript出錯時，會在頁面顯示{{xxx}}，Vue提供的v-text能夠解決這個

v-html

用於輸出html代碼