vue 基礎(chǔ)指令以及過濾器

===

瀏覽器插件
VS Code插件
玩轉(zhuǎn)Vs code
為什么學(xué)習(xí)Vue
什么是MVVM
Vue初體驗(yàn)
Vue常用系統(tǒng)指令
- 插值表達(dá)式
- v-text
- v-html
- v-bind
- v-for
- v-model
- v-on
- v-on按鍵修飾符
- v-if
- v-show
- v-cloak
案例-利用系統(tǒng)指令實(shí)現(xiàn)品牌案例管理

瀏覽器插件

Vue.js devtools

VS Code插件

自動(dòng)補(bǔ)全標(biāo)簽

Auto Close Tag
Auto Complete Tag
Auto Rename Tag

開啟一個(gè)服務(wù)器瀏覽HTML網(wǎng)頁瓶您，第一次使用需要Ctrl + Shift + p輸入 live server選擇open

Live Server

路徑自動(dòng)補(bǔ)全

Path Intellisense

vue語法高亮和自動(dòng)補(bǔ)全代碼

Vetur
VueHelper

玩轉(zhuǎn)Vs code

Vs Code奇淫技巧
Vs Code設(shè)置

文件--->首選項(xiàng)--->設(shè)置，然后添加如下代碼：

  "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
  },
  "emmet.includeLanguages": {
      "vue-html": "html",
      "vue": "html"
  }

為什么學(xué)習(xí)Vue

為什么學(xué)習(xí)vue.png

什么是MVVM

- M => Model(數(shù)據(jù)模型)
- V => View(視圖模型,負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)出來，就是那些DOM結(jié)構(gòu))
- VM => ViewModel(一個(gè)同步View和Model的對(duì)象)

MVVM.png

Vue初體驗(yàn)

<!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>
  <!-- 1. 引入vue文件 -->
  <script src="./vue2.js"></script>
</head>
<body>
  <!-- 如果超過vue實(shí)例的管轄范圍，這個(gè){{}}作用就會(huì)失效 -->
  <div>{{msg}}</div>
  <div id="app">
    <!-- 5. 展示數(shù)據(jù)：通過插值表達(dá)式{{}} ，作用是專門用來渲染文本-->
    <h1>{{msg}}</h1>
  </div>
  <script>
    // 2. 創(chuàng)建vue實(shí)例犀被，作用：他會(huì)監(jiān)管我們的html代碼
    var vm = new Vue({
      // 3. 通過一個(gè)el屬性來指定vue實(shí)例的監(jiān)管范圍,后面跟一個(gè)id
      el: '#app',
      // 4. 用data屬性將要展示的變量存起來,data后面跟一個(gè)對(duì)象
      data: {
        msg: 'hello world'
      }
    })
  </script>
</body>
</html>

Vue常用系統(tǒng)指令

插值表達(dá)式

  數(shù)據(jù)綁定最常見的形式琢唾，其中最常見的是使用插值表達(dá)式楞件，寫法是{{}} 中寫表達(dá)式
  例如：<span>Message: {{ msg }}</span>
  Mustache 標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上 msg 屬性（msg定義在data對(duì)象中）的值兴蒸。
  無論何時(shí)，綁定的數(shù)據(jù)對(duì)象上 msg 屬性發(fā)生了改變细办，插值處的內(nèi)容都會(huì)更新橙凳。

  {{}}對(duì)JavaScript 表達(dá)式支持，例如：
  {{ number + 1 }}
  {{ ok ? 'YES' : 'NO' }}
  {{ message.split('').reverse().join('') }}

  但是有個(gè)限制就是笑撞，每個(gè)綁定都只能包含單個(gè)表達(dá)式岛啸，如下表達(dá)式無效：
  <!-- 這是語句，不是表達(dá)式 -->
  {{ var a = 1 }}

  <!-- 這也是語句茴肥，不是表達(dá)式 -->
  {{ number++ }} 會(huì)報(bào)警告：vue2.js:482 [Vue warn]: You may have an infinite update loop in a component render function.

  <!-- 流控制也不會(huì)生效坚踩，請(qǐng)使用三元表達(dá)式 -->
  {{ if (ok) { return message } }}

v-text

<!-- v-text可以將一段文本渲染到指定的元素中,例如： -->
<div v-text="msg"></div>
new Vue({
    data:{
        msg:'hello world'
    }
});

<!-- 輸出結(jié)果：-->
<div>hello world</div>

v-html

差值表達(dá)式和v-text會(huì)將數(shù)據(jù)解釋為純文本，而非 HTML 瓤狐。
為了輸出真正的 HTML 瞬铸，你需要使用 v-html 指令：
例如：
<div v-html="rawHtml"></div>
    new Vue({
        data:{
            rawHtml:'<h1>hello world</h1>'
        }
})

被插入的內(nèi)容都會(huì)被當(dāng)做 HTML,但是對(duì)于沒有HTML標(biāo)簽的數(shù)據(jù)綁定時(shí)作用同v-text和{{}}

v-bind

1、作用：可以給html元素或者組件動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性础锐，例如動(dòng)態(tài)綁定style和class

2嗓节、舉例：
    1、img的src從imageSrc變量中取得
        <img v-bind:src="imageSrc" >

        2皆警、從classA, classB兩個(gè)變量的值作為class的值拦宣，
        結(jié)果是：<div class="A B">classA, classB</div>        
        <div v-bind:class="[classA, classB]">classA, classB</div>

        3、isRed變量如果為true信姓，則class的值為red鸵隧，否則沒有
        <div v-bind:class="{ red: isRed }">isred</div>

        4、div的class屬性值一定有classA變量的值意推，而是否有classB和classC變量的值取決于isB和isC是否為true豆瘫，二者一一對(duì)應(yīng)
        <div v-bind:class="[classA, { classB: isB, classC: isC }]">數(shù)組對(duì)象</div>

        5、變量加常量
        <div v-bind:style="{ fontSize: size + 'px' }">size22</div>

        6左痢、變量加常量的另一種寫法
        <img v-bind="{src:imageSrc+'?v=1.0'}" >

        7靡羡、對(duì)象數(shù)組
        <div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

3系洛、縮寫形式
    <img :src="imageSrc">
    <div :class="[classA, classB]">classA, classB</div>
    <div v-bind:class="{ red: isRed }">isred</div>
    <div v-bind:class="[classA, { classB: isB, classC: isC }]">數(shù)組對(duì)象</div>
    <div v-bind:style="{ fontSize: size + 'px' }">size22</div>
    <img v-bind="{src:imageSrc+'?v=1.0'}" >
    <div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>


  vue對(duì)象初始化
  <script>
    // 實(shí)例化vue對(duì)象（MVVM中的View Model）
    new Vue({
        // vm控制的區(qū)塊為id為app的div，此div中的所有vue指令均可以被vm解析
        el:'#app',
        data:{
        // 數(shù)據(jù) （MVVM中的Model）   
        imageSrc:'http://157.122.54.189:8998/vue/vuebase/chapter1/imgs/d1-11.png',
        isRed:true,
        classA:'A',
        classB:'B',
        isB:true,
        isC:true,
        size:22,
        styleObjectA:{color:'red'},
        styleObjectB:{fontSize:'30px'}
        },
        methods:{

        }
    })
</script>

v-for

<!-- 
  v-for用法：
    item in Array
    (item, index) in Array
    value in Object
    (value, key, index) in Object

  :key屬性具有唯一性略步，不能重復(fù)描扯，它能夠唯一標(biāo)識(shí)數(shù)組的每一項(xiàng)
  將來數(shù)據(jù)中的某一項(xiàng)的值發(fā)生了改變，則v-for只會(huì)更新當(dāng)前項(xiàng)對(duì)應(yīng)的這個(gè)dom元素的值趟薄，而不是更新整個(gè)數(shù)據(jù)绽诚，從而提高效率，參考https://www.zhihu.com/question/61064119/answer/183717717

  注意：以下變動(dòng)不會(huì)觸發(fā)視圖更新
    1. 通過索引給數(shù)組設(shè)置新值
    2. 通過length改變數(shù)組
  解決：
    1. Vue.set(arr, index, newValue)
    2. arr.splice(index, 1, newValue)
  -->
  <ul>
    <li v-for="item in user">{{item.name}}</li>
    <li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li>
    <li>---------------華麗的分割線---------------</li>
    <li v-for="value in boss">{{value}}</li>
    <li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>
  </ul>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      user: [
        {name: 'jack'},
        {name: 'neil'},
        {name: 'rose'}
      ],
      boss: {
        name: '馬云',
        age: 50,
        money: 1000000002030
      }
    }
  })
  </script>

v-model

1杭煎、在表單控件或者組件上創(chuàng)建雙向綁定
2恩够、v-model僅能在如下元素中使用：
  input
  select
  textarea
  components（Vue中的組件）

3、舉例：
  <input type="text" v-model="uname" />

new Vue({
    data:{
        uname:'' //這個(gè)屬性值和input元素的值相互一一對(duì)應(yīng)羡铲，二者任何一個(gè)的改變都會(huì)聯(lián)動(dòng)的改變對(duì)方
      }
})

v-on

1蜂桶、作用：綁定事件監(jiān)聽，表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句也切，
如果沒有修飾符也可以省略扑媚，用在普通的html元素上時(shí)，只能監(jiān)聽 原生
DOM 事件雷恃。用在自定義元素組件上時(shí)疆股，也可以監(jiān)聽子組件觸發(fā)的自定義事件。

2倒槐、常用事件：
    v-on:click
    v-on:keydown
    v-on:keyup
    v-on:mousedown
    v-on:mouseover
    v-on:submit
    ....

3旬痹、示例：
  <!-- 方法處理器 -->
  <button v-on:click="doThis"></button>
  <!-- 內(nèi)聯(lián)語句 -->
  <button v-on:click="doThat('hello', $event)"></button>

  <!-- 阻止默認(rèn)行為，沒有表達(dá)式 -->
  <form v-on:submit.prevent></form>

 5讨越、v-on的縮寫形式：可以使用@替代 v-on:
  <button @click="doThis"></button>


6两残、按鍵修飾符
  觸發(fā)像keydown這樣的按鍵事件時(shí)，可以使用按鍵修飾符指定按下特殊的鍵后才觸發(fā)事件

  寫法：
    <input type="text" @keydown.enter="kd1">  當(dāng)按下回車鍵時(shí)才觸發(fā)kd1事件

    由于回車鍵對(duì)應(yīng)的keyCode是13把跨，也可以使用如下替代
    <input type="text" @keydown.13="kd1">  當(dāng)按下回車鍵時(shí)才觸發(fā)kd1事件

    但是如果需要按下字母a（對(duì)應(yīng)的keyCode=65）才觸發(fā)kd1事件磕昼，有兩種寫法：
    1、由于默認(rèn)不支持a這個(gè)按鍵修飾符节猿，需要Vue.config.keyCodes.a = 65 添加一個(gè)對(duì)應(yīng),所以這種寫法為：

    Vue.config.keyCodes.a = 65
    <input type="text" @keydown.a="kd1">  這樣即可觸發(fā)

    2票从、也可以之間加上a對(duì)應(yīng)的數(shù)字65作為按鍵修飾符
    <input type="text" @keydown.65="kd1">  這樣即可觸發(fā)

    鍵盤上對(duì)應(yīng)的每個(gè)按鍵可以通過 http://keycode.info/ 獲取到當(dāng)前按下鍵所對(duì)應(yīng)的數(shù)字

v-on按鍵修飾符

作用說明

  文檔地址：https://cn.vuejs.org/v2/guide/events.html#鍵值修飾符

  在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要監(jiān)測常見的鍵值滨嘱。 Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
  .enter
  .tab
  .delete (捕獲 “刪除” 和 “退格” 鍵)
  .esc
  .space
  .up
  .down
  .left
  .right

可以自定義按鍵別名

  // 在Vue2.0版本中擴(kuò)展一個(gè)f1的按鍵修飾符寫法：
  Vue.config.keyCodes.f1 = 112

  // 使用
  <button @keyup.f1="someFunc"></button>

v-if

1峰鄙、作用：根據(jù)表達(dá)式的值的真假條件來決定是否渲染元素，如果條件為false不渲染（達(dá)到隱藏元素的目的）太雨，為true則渲染吟榴。在切換時(shí)元素及它的數(shù)據(jù)綁定被銷毀并重建

2、示例：
  <!-- Handlebars 模板 -->
  {{#if isShow}}
    <h1>Yes</h1>
  {{/if}}

  通常我們使用寫法居多：
  <h1 v-if="isShow">Yes</h1>

  也可以用 v-else 添加一個(gè) “else” 塊：
  <h1 v-if="isShow">Yes</h1>
  <h1 v-else>No</h1>

  注意：v-else 元素必須緊跟在 v-if 元素否則它不能被識(shí)別囊扳。

  new Vue({
      data:{
        isShow:true
      }
  });

v-show

1吩翻、根據(jù)表達(dá)式的真假值兜看，切換元素的 display CSS 屬性，如果為false狭瞎，則在元素上添加 display:none來隱藏元素细移，否則移除display:none實(shí)現(xiàn)顯示元素

2、示例：
    <h1 v-show="isShow">Yes</h1>

    new Vue({
        data:{
          isShow:true
            }
    });

3熊锭、v-if和v-show的總結(jié)：
    v-if和v-show 都能夠?qū)崿F(xiàn)對(duì)一個(gè)元素的隱藏和顯示操作,但是v-if是將這個(gè)元素添加或者移除到dom中弧轧，而v-show
    是在這個(gè)元素上添加 style="display:none"和移除它來控制元素的顯示和隱藏的

v-cloak

v-cloak指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯后自動(dòng)移除，v-cloak和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)碗殷，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢精绎。
通常用來防止{{}}表達(dá)式閃爍問題
例如：
<style>
[v-cloak] { display: none }
</style>

<!-- 在span上加上 v-cloak和css樣式控制以后，瀏覽器在加載的時(shí)候會(huì)先把span隱藏起來锌妻，知道 Vue實(shí)例化完畢以后代乃，才會(huì)將v-cloak從span上移除，那么css就會(huì)失去作用而將span中的內(nèi)容呈現(xiàn)給用戶 -->
<span v-cloak>{{msg}}</span>    

new Vue({
    data:{
        msg:'hello ivan'
      }
})

案例-利用系統(tǒng)指令實(shí)現(xiàn)品牌案例管理

資源準(zhǔn)備

效果圖

案例效果圖.png

案例html結(jié)構(gòu)

  <body>
  <div id="app">
  <div class="add">
      編號(hào):<input type="text">
      品牌名稱:<input type="text">
      <input type="button" value="添加">
  </div>

  <div class="add">
      品牌名稱:<input type="text" placeholder="請(qǐng)輸入搜索條件">
  </div>

  <div>
      <table class="tb">
          <tr>
              <th>編號(hào)</th>
              <th>品牌名稱</th>
              <th>創(chuàng)立時(shí)間</th>
              <th>操作</th>
          </tr>
          <tr >
              <td colspan="4">沒有品牌數(shù)據(jù)</td>
          </tr>
      <!-- 動(dòng)態(tài)生成內(nèi)容tr -->
      </table>
  </div>
  </div>
  </body>

案例css樣式

  <style>

    #app{
        width:600px;
            margin:10px auto;
    }
      .tb{
          border-collapse:collapse;
          width: 100%;
      }
      .tb th{
          background-color: #0094ff;
          color:white;
      }

      .tb td,.tb th{
          padding:5px;
          border:1px solid black;
          text-align: center;
      }

      .add{
          padding: 5px;
          border:1px solid black;
          margin-bottom: 10px;
      }
  </style>

功能-數(shù)據(jù)展示實(shí)現(xiàn)

1. 在 data 中添加 一個(gè)名稱為 list的變量仿粹，類型為數(shù)組,存放品牌數(shù)據(jù)的對(duì)象,格式為:{id:1,name:'寶馬',ctime:Date()}

var vm = new Vue({
  el: '#app',
  data: {
    list: [
      {id: 1, title: 'LV', ctime: new Date()},
      {id: 2, title: 'CC', ctime: new Date()},
      {id: 3, title: 'CK', ctime: new Date()},
    ]
  }
})

2. 在table中的“動(dòng)態(tài)生成內(nèi)容tr”位置使用v-for指令遍歷list數(shù)組數(shù)據(jù)生成表格內(nèi)容行襟己，注意要寫`:key`

      <tr v-for="(item, index) in list" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
        <td>{{item.ctime}}</td>
        <td>
          <a href="javascript:void(0)">刪除</a>
        </td>
      </tr>

3. 處理 “沒有品牌數(shù)據(jù)” 提示問題,代碼如下

利用：v-if進(jìn)行判斷，當(dāng)list為空時(shí)牍陌，才顯示沒有品牌數(shù)據(jù)

<tr v-if="list.length==0">
  <td colspan="4">沒有品牌數(shù)據(jù)</td>
</tr>

功能-數(shù)據(jù)刪除

1. 給按鈕綁定刪除方法，并傳入一個(gè)id

<a href="javascript:void(0)" @click="deleteData(item.id)">刪除</a>

2. Vue實(shí)例中定義刪除的方法

  methods: {
    deleteData(id) {
      // 返回滿足函數(shù)條件的數(shù)組的項(xiàng)的index
      var index = this.list.findIndex(item => {
        return item.id === id
      })
      // 刪除該索引對(duì)應(yīng)的值
      this.list.splice(index, 1)
    }
  }

功能-數(shù)據(jù)添加

效果圖</br>

添加數(shù)據(jù).png

1. 實(shí)現(xiàn)步驟1：在Vue對(duì)象實(shí)例的data中添加一個(gè)product對(duì)象{id:0,name:'',ctime:Date()}

new Vue({
  el: '#app',
  data: {
      product:{id:0,name:'',ctime:Date()},        
      list:[
          {id:1,name:'寶馬',ctime:Date()},
          {id:2,name:'奔馳',ctime:Date()}
      ]
  },
  methods: {      
  }
})

2. 實(shí)現(xiàn)步驟2：在編號(hào)和品牌名稱文本框中利用v-model對(duì)product對(duì)象中的id和name屬性進(jìn)行一一綁定 同時(shí)在添加按鈕上利用 v-on:click注冊(cè)事件addData

編號(hào):<input type="text" v-model="product.id">
品牌名稱: <input type="text" v-model="product.name">
<input type="button" value="添加" @click="addData">

3. 實(shí)現(xiàn)步驟3：在Vue對(duì)象實(shí)例的methods中添加一個(gè) addData的方法實(shí)現(xiàn)添加邏輯即可完成

new Vue({
    // vm控制的區(qū)塊為id為app的div员咽，此div中的所有vue指令均可以被vm解析
    el: '#app',
    data: {
        product:{id:0,name:'',ctime:Date()},
        list:[
            {id:1,name:'寶馬',ctime:Date()},
            {id:2,name:'奔馳',ctime:Date()}
        ]
    },
    methods: {
        addData(){
            // 修改品牌添加時(shí)間為當(dāng)前時(shí)間
            this.product.ctime = Date();

            // 添加數(shù)據(jù)到品牌列表中
            this.list.push(this.product);

            // 清空product
            this.product = {id:0,name:'',ctime:Date()};
        }
    }
})

功能-按回車鍵添加數(shù)據(jù)

關(guān)鍵點(diǎn)：利用v-on的.enter按鍵修飾符實(shí)現(xiàn)毒涧，回車鍵的keycode=13</br>

回車添加數(shù)據(jù).png

品牌名稱: <input type="text" v-model="product.name" @keydown.13="addData">

<!-- 或者 -->
品牌名稱: <input type="text" v-model="product.name" @keydown.enter="addData">

功能-輸入框自動(dòng)聚焦

在vue中實(shí)現(xiàn)這個(gè)需求有三種方式：

可以使用document.getElementById()獲取到文本框元素對(duì)象后調(diào)用其focus()方法和設(shè)置style屬性
可以在文本框上元素上增加一個(gè) ref="自定義名稱"，再使用this. $refs.自定義名稱.focus()和 this.$ refs.自定義名稱.style="color:red" 設(shè)置style屬性
使用自定義指令實(shí)現(xiàn)封裝

注意：前兩種方式的代碼需要寫到生命周期事件：mounted(){}中

1. 原生js操作DOM實(shí)現(xiàn)

  // html代碼
  編號(hào):<input type="text" v-model="product.id" id="id">

  // vue對(duì)象mounted(){}中代碼
  mounted(){
      document.getElementById('id').focus();
      document.getElementById('id').style="color:red";
  }

2. ref方式實(shí)現(xiàn)

  // html代碼：
  編號(hào):<input type="text" v-model="product.id" ref="id">

  // vue對(duì)象mounted(){}中代碼
  mounted(){
      this.$refs.id.focus();
      this.$refs.id.style="color:red";
    }

3. 使用自定義指令

使用說明
- 利用Vue.directive('指令id',{inserted:function(el,binding){}})
- 參數(shù)說明
  - 指令id可由程序員自行定義贝室，注意和系統(tǒng)指令名稱有所區(qū)別契讲，例如：
    focus,在某個(gè)元素上具體使用的時(shí)候請(qǐng)?jiān)?指令id前面再加上v-,例如
    <input v-focus>
  - 第二個(gè)參數(shù)是一個(gè)對(duì)象，其中inserted是一個(gè)函數(shù)滑频，表示 “被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用”
    - inserted的參數(shù)：
      - el參數(shù)：表示使用此自定義指令的dom對(duì)象
      - binding參數(shù)：一個(gè)對(duì)象捡偏，包含以下屬性：
        
        name：指令名，不包括 v- 前綴峡迷。
        
        value：指令的綁定值银伟，例如：v-focus="colorvalue", value 的值是colorvalue這個(gè)變量的值，colorvalue定義在data(){}中
        
        expression：綁定值的字符串形式绘搞。例如 v-focus="colorvalue" 彤避，expression 的值是 "colorvalue"
開始使用Vue.directive()封裝自定義指令v-focus實(shí)現(xiàn)光標(biāo)自動(dòng)定位

1、定義指令color
  Vue.directive('color',{
      inserted:function(el,binding){
        //將顏色設(shè)置給使用v-color指令的元素上
        el.style.color=binding.value;
      }
  });


2夯辖、 在dom元素上使用指令琉预，注意加上前綴 v-
編號(hào):<input type="text" v-model="product.id" v-color="colorvalue">

3、在Vue對(duì)象實(shí)例中的data(){}中定義colorvalue
  new Vue({
    data: {
        colorvalue:'red'
    }
  });

ref

ref的作用類似于document.getElementByID,在vue中想要獲取一個(gè)dom對(duì)象或者組件對(duì)象蒿褂，則只需要在此元素上添加一個(gè) ref="自定義名稱" 圆米，再使用 this.$refs.自定義名稱即可獲取

<html>
<head>
  <script src="vue2.js"></script>
</head>
  <body>
    <div id="app">
    <span ref="sp"></span>
    </div>
  </body>
  <script>
    new Vue({
      el:'#app',
      methods:{
        getobj:function(){
          //獲取到span元素的dom對(duì)象卒暂，類似于使用document.getElementByID('sp')
          // spanobj就是span的dom對(duì)象，可以調(diào)用 style,innerHTML,innerText等進(jìn)行操作
            var spanobj =  this.$refs.sp;              
        }
      }
      })
  </script>
</html>

功能-時(shí)間格式化

// 定義全局過濾器datefmt
Vue.filter('datefmt',function(input){
    var date = new Date(input);
    var year = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();            
    var fmtStr = year+'-'+m +'-'+d;
    return fmtStr; //返回輸出結(jié)果
});

// 調(diào)用, 注意datefmt的第一個(gè)參數(shù)默認(rèn)就是管道符左邊的值
<td>{{item.ctime | datefmt }}</td>

過濾器

1. 私有過濾器

定義方式

可以在 new Vue({filters：{}})中的filters中注冊(cè)一個(gè)私有過濾器

定義格式：
new Vue({
  el:'#app',
  filters:{        
      '過濾器名稱':function(管道符號(hào)|左邊對(duì)象的值,參數(shù)1,參數(shù)2,....) {
        return 對(duì)管道符號(hào)|左邊參數(shù)的值做處理以后的值
      })    
  }
  });

Vue2.0 調(diào)用過濾器傳參寫法：
<span>{{ msg | 過濾器id('參數(shù)1','參數(shù)2' ....) }}</span>

(應(yīng)用示例)自定義私有過濾器實(shí)現(xiàn)日期格式化

  1娄帖、 定義私有的日期格式化過濾器：
  new Vue({
      el:'#app',
      data:{
          time:new Date()
      },
      filters:{
          //定義在 VM中的filters對(duì)象中的所有過濾器都是私有過濾器
          datefmt:function(input,splicchar){
              var date = new Date(input);
              var year = date.getFullYear();
              var m = date.getMonth() + 1;
              var d = date.getDate();            
              var fmtStr = year+splicchar+m +splicchar+d;
              return fmtStr; //返回輸出結(jié)果
          }
      }
  });
  2也祠、使用
  <div id="app">
    {{ time | datefmt('-') }} //Vue2.0傳參寫法
  </div>

全局過濾器