Vue-指令、自定义过滤器

2019-07-14 本文已影响4人月上秦少

最近做的项目，一直用的Angular6.0框架，期间陆陆续续完成了三四个项目。业务知识有一定的提升，但是一直用一个框架，只会增加对该框架的熟练度，并不能得到技术上的突破。
也许，自己对Angular的认识也是浅尝辄止，但是前端技术日新月异，想要精通某一个框架，实在精力不够（最多熟练应用），说不定，某一天这个框架就凉凉了，而如今，国内Vue很是火热，招聘要求最多，这“究竟是人性的扭曲还是道德的沦丧”，让我们踏进Vue的世界，一探究竟。

Angular2+,用的是typescript，而vue3.0即将发布，也用的是typescript，期间也学过一遍vue2.0，这次温故而知新，等vue3.0发布，就可以直接上手了。

那么，现在从小白开始，重温Vue2.x吧！

一. Vue简介

Vue2.x中文官方文档

1. Vue.js初识

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

知乎解释：Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？

2.Vue起步

1. 安装

下载核心库文件

bower info vue
npm init --yes
cnpm install vue --save

像Jquery一样引入到你的html文档中

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>

这里将Vuejs当做一个js库来使用，也可以使用vue-cli,后续会用到。

2. 安装调试工具vue-devtools插件

安装调试工具vue-devtools插件，便于在浏览器中调试vue

3.牛刀小试

<!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>初识Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!--<script src="./node_modules/vue/dist/vue.min.js"></script>-->
    
    <script>
        window.onload = () => {
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
        }
    </script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
</body>
</html>

4.vue核心基础知识

1. 模板语法

{{data}}, 即Mustache语法

2. 指令

指令:用来扩展html标签的功能

angularjs中常用的指令：
    ng-model
    ng-repeat
    ng-click
    ng-show/ng-hide
    ng-if
    
angularTs中常用的指令：
    ([ngModel])
     *ngIf
     *ngFor
     [ngClass]
     [ngSwitch]
     [ngStyle]
     
vuejs中常用的指令:
    v-model
    v-if
    v-for
    v-on
    v-show
    v-bind
    v-once

vuejs中常用的指令介绍

v-model
- 类型：随表单控件类型不同而不同。
- 限制：
  - <input>
  - <select>
  - <textarea>
  - components
- 修饰符：
  - .lazy - 取代 input 监听 change 事件
  - .number - 输入字符串转为数字
  - .trim - 输入首尾空格过滤
在表单控件或者组件上创建双向绑定。
```
<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
```

v-for

类型： Array | Object | number | string

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

<!--也可以用for of-->
<div v-for="item of items">{{ item.text }}</div>

 <!--value 和 key 与 index-->
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in objects"></div>
<div v-for="(val, key, index) in objects"></div>

<!--整数迭代，结果：1 2 3 4 5 6 7 8 9 10-->
<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

<!--提供一个 key 的特殊属性：key的作用主要是为了高效的更新虚拟DOM-->
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-for中:key的作用主要是为了高效的更新虚拟DOM
Vue2.0 v-for 中 :key 到底有什么用？

v-on

用来绑定事件，用法：v-on:事件="函数"，缩写：@
如：v-on:click=""，简写方式 @click=""

修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .native - 监听组件根元素的原生事件。
用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性： v-on:click="handle('ok', $event)"。
```

<button v-on:click="doThis"></button>

<button v-on:click="doThat('hello', $event)"></button>

<button @click="doThis"></button>

<button @click.stop="doThis"></button>

<button @click.prevent="doThis"></button>

<form @submit.prevent></form>

<button @click.stop.prevent="doThis"></button>

<input @keyup.enter="onEnter">

<input @keyup.13="onEnter">
```
在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）：
```
<my-component @my-event="handleThis"></my-component>

<my-component @my-event="handleThis(123, $event)"></my-component>

<my-component @click.native="onClick"></my-component>
```
v-show
- 类型： any
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angularjs中类似
```
<div v-show="flag">如果flag=false我就不显示（display:none）</div>
```
v-if
- 类型： any
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。（删除重绘）
```
<div v-if="flag">如果flag=true我就显示（删除重绘）</div>
```

v-else
前一兄弟元素必须有 v-if。

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

v-bind

缩写： :
类型： any (with argument) | Object (without argument)
修饰符：
.prop - 被用于绑定 DOM 属性。

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-text
- 类型： string
更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。（相当于模板语法{{}}）
```
<span v-text="msg"></span>

<span>{{msg}}</span>
```
v-html
- 类型： string
更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板,可以重新考虑通过是否通过使用组件来替代。
```
<div v-html="html"></div>
```
v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
```
<span v-pre>{{ this will not be compiled }}</span>
```
v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
```
 [v-cloak] {
   display: none;
 }


 <div v-cloak>
   {{ message }}
 </div>
```

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

3. 过滤器

用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}

由于vue2.x中已经没有内置过滤器，所以我们需要自定义过滤器。

自定义全局过滤器

使用全局方法Vue.filter(过滤器ID,过滤器函数)

Vue.filters('lowercase', function(value){
          // 处理value值,比如：转为小写
          return value.toLowerCase()；
        })
Vue.filter('date',data => {
            let d=new Date(data);
            return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
        });
        
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter');

自定义局部过滤器

局部过滤器,如果和全局过滤器名称相同，会覆盖掉全局过滤器。

let vm=new Vue({
    el:'#app',
    data:{
        currentTime:Date.now()
    },
    filters:{ //局部过滤器
        number:(data,n) => {
            return data.toFixed(n);
        }，
        date: data => {
            let d=new Date(data);
            return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
        }
});

练习：英雄列表管理

英雄列表