过滤器和自定义指令等...

Vue过滤器和自定义指令

Vue过滤器： 怎么理解：将后台返回的数据换一种形式输出，不改变原来的数据 应用场景:后台返回的状态码（性别，支付状态），商品价格

面试时：最后你再说如何使用，例如：有全局的，局部过虑器

1. 全局过滤器

Vue.filter('过滤器',对应的过滤器函数)

例如：

Vue.filer('currency' (v, type) {
console.log('返回值：', v)
const result = v && v.toFixed(2).replace(/(d)(?=(d{3})+.)/g, '$1,')
return type + result;
})

/**
* 支付状态处理
*/
Vue.filter('pay' (v) {
let payText = '';
switch (v) {
case 0: payText = '已支付'; break;
case 1: payText = '未支付'; break;
default: payText = '未知状态'; break;
}
return payText
})

最后可以通过单独创建过滤器文件并导出过滤器函数，最后通过Object.keys来集中处理

例如：

过滤器文件：filters.js

/**
* 货币格式
*/
export function currency (v, type) {
console.log('返回值：', v)
const result = v && v.toFixed(2).replace(/(d)(?=(d{3})+.)/g, '$1,')
return type + result;
}

/**
* 支付状态处理
*/
export function pay (v) {
let payText = '';
switch (v) {
case 0: payText = '已支付'; break;
case 1: payText = '未支付'; break;
default: payText = '未知状态'; break;
}

return payText
}

然后再main.js中导入并转换成过滤器函数
//引入过滤器函数
import * as filters from './filters'

//转换成过滤器函数
Object.keys(filters).forEach(key => {
Vue.filter(key,filters[key])
})

2. 局部过滤器

通过在Vue实例上挂载filers添加过滤器，只能在当前组件内部使用

​

自定义指令

Vue指令分类：

1. 内置指令：

   
   v-model
   v-for
   v-if
   v-on 简写：@
   v-bind 简写：:
   v-show
   v-cloak：解决网速加载慢，出现{{}} 号的问题
   
   [v-cloak] {
     display: none;
   }
   <div v-cloak>
     {{ message }}
   </div>
   

2. 自定义指令：

主要用于对DOM操作的封装，方便在组件中复用

Vue中有DOM操作相关的：

	ref:主要用于当前页面对DOM的操作
	
	自定义指令：封装成自定义指令，可以多个页面或组件中使用，复用性强

原生DOM有哪些方法

获取id:document.getElementById('')
获取类名：getElementsByClassName()
获取标签名：getElementsByTagName()
创建dom: createElment('span')
删除DOM:removeChild()

打开输入框获取到焦点？
focus()

实现拖拽：<div v-drag></div>

实现拖拽的原理：
   三大事件:mousedown（鼠标按下）,mousemove（鼠标移动）,mouseup（鼠标抬起）
   通过获取鼠标位置来动态改变dom样式
   
   

Vue自定义可复用的方案：

1. 自定义组件（.vue）

2. 自定义过滤器：转换和处理数据格式

3. 自定义指令：用于封装DOM的，方便复用

4. mixins:用于抽离组件间相同逻辑

5. 插件功能： 例如：vue-router,vuex,vue数据持久化插件

   可以发布到npm上
   npm install 安装插件
   本地使用
   
     例如：
     npm install vuex
     import Vuex from 'vuex'
     Vue.use(Vuex)

.native

<button @click.native="方法名"></button>

一个组件的根元素上直接监听一个JS原生事件

nextTick:

Vue.js 开发使用“数据驱动”的方式思考，避免直接接触 DOM
为了在数据变化之后等待完成DOM更新后，再操作DOM，这时就要用到this.$nextTick

注意：数据更新和DOM更新不是同步的，是异步的

例如：改变dom样式，针对第三方插件（就是针对dom，swiper,滚动插件）的集成

回答：nextTick主要用于获取dom更新后的操作,只是数据操作，不涉及DOM操作，不用使用nextTick

渲染函数 & JSX

通过JS渲染函数写法转换成了template和JSX的写法

渲染函数：就是通过JS来实现模板渲染，最终也是编译成虚拟DOM，但要求JS功底比较好
render:h=>{ 写JS实现模板渲染 }

JSX:类似于vue的template,最终也是编译成虚拟DOM

<div class='active'></div> 编译成虚拟DOM: { tag:'div' attrs:{clas:'active'} }

<label for='username'></label>

绑定事件：on事件名 例如：onClick 驼峰写法
类名：className='active'
<label htmlFor='username'></label>


 template 或 render写法（用户体验好的推荐用JSX）