【Vue】指令使用总结，未完待续

目录

一、watch监听及深度监听

 二、directive自定义指令详解+实例

说明

实例1

实例2

三、vue父子组件中数据双向绑定的几种方法

一、.sync（支持多个双向绑定值）

二、待续

四、Message消息提示每次只d出一个 + 设置全局messaged框的格式

问题描述

Message消息提示每次只d出一个 + 设置全局messaged框的格式

Message距离窗口顶部的偏移量

五、什么是重定向

六、为什么要进行重定向？什么时候需要重定向？

七、HTTP协议详解之响应篇

八、export与export default区别

九、路由传参-使用encodeURI加密参数

十、base64格式的加密与解密

十一、vite

---

一、watch监听及深度监听

watch:{
     a(val, oldVal){//普通的watch监听
         console.log("a: "+val, oldVal);
     },
     b:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
             console.log("b.c: "+val.c, oldVal.c);
         },
         deep:true //true 深度监听
     }
 }

 二、directive自定义指令详解+实例 说明

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层 *** 作，这时候就会用到自定义指令。

实例1

拖拽:

Drag.js:

export default function(el){
  let oDiv=el;
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
}

Vue引用:

我可以拖拽

import drag from 'drag.js'
Vue.directive('drag',drag)

实例2

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

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

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

三、vue父子组件中数据双向绑定的几种方法 一、.sync（支持多个双向绑定值）

大致说明：

绑定值加上 .sync $emit 去触发 update:prop名，实现修改父组件的变量值实现双向数据流:startDate.sync="startDate"  等价于  :startDate="startDate"  @updata:startDate="startDate= $event"   （这里的$event就是子组件$emit传递的参数）

例：

父组件

子组件

二、待续

四、Message消息提示每次只d出一个 + 设置全局messaged框的格式 问题描述

 - Element UI的Message消息提示是点击一次触发一次的,如果一直点，然后就会出现打开多个的情况。
 - 在后台d消息的时候，也会同时出现
 - 设置全局messaged框的格式
 - Message距离窗口顶部的偏移量
 

Message消息提示每次只d出一个 + 设置全局messaged框的格式

 在main.js平级建立文件夹，其中新建message.js

message.js:

/**防止重复点击重复d出messaged框 */
import {
  Message
} from 'element-ui';
let messageInstance = null;
const resetMessage = (options) => {
  if (messageInstance) {
    messageInstance.close()
  }
  messageInstance = Message(options)
};
/**设置messaged框的格式 */
['error', 'success', 'info', 'warning'].forEach((item) => {
  resetMessage[item] = (msg) => {
    return Message({
      showClose: true,
      duration:2000,
      type: item,
      message: msg
    })
  }
})
export const message = resetMessage
 

main.js：

import {message} from './request/message.js';
Vue.prototype.$message = message;
```

Message距离窗口顶部的偏移量

public.css:

```
.el-message {
  top: 48%!important
}
```

注意
因为使用了new DonMessage()的原因，所以导致this.$message(options)的方式无法使用。所以推荐使用this.$message.success('成功提示')或者this.$message.success(options)的方式进行调用。具体参数可以查看官方文档。

五、什么是重定向

就是地址A跳转到地址B啦。百度百科的解释：重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置（如：网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向）。

六、为什么要进行重定向？什么时候需要重定向？

1）网站调整（如改变网页目录结构）；
2）网页被移到一个新地址；
3）网页扩展名改变(如应用需要把.php改成.Html或.shtml)。
这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

七、HTTP协议详解之响应篇

状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息–表示请求已接收，继续处理
2xx：成功–表示请求已被成功接收、理解、接受
3xx：重定向–要完成请求必须进行更进一步的 *** 作
4xx：客户端错误–请求有语法错误或请求无法实现
5xx：服务器端错误–服务器未能实现合法的请求
常见状态代码、状态描述、说明：
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
eg：HTTP/1.1 200 OK （CRLF）

八、export与export default区别

1.export default 和export都可以用于导出常量，函数，文件，模块等；

2.可以在模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用。

3.在一个文件或者模块中，export,import可以有多个，但是export default只能有一个。

4.通过export方式导出，在导入的时候需要加{}，export default不需要在导入的时候加{}

使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

九、路由传参-使用encodeURI加密参数

在路由切换时页面需要使用地址栏传参，但地址栏会暴露参数的值，然后想到了encodeURI加密参数

比如参数是一个对象obj

obj：{
	id: 1,
	name: 'Tom'
}

那么需要将参数转换为JSON字符串，在使用encodeURI加密，需要注意的是通过路由跳转的时候会自动解密一次，所以需要加两次密。

JSON.stringify是日常开发中经常用到的 JSON 对象中的一个方法。JSON 对象包含两个方法：一是用于解析成 JSON 对象的 parse()；二是用于将对象转换为 JSON 字符串方法的 stringify()encodeURI 加密函数decodeURI 解密函数

 let param = {
     	id: 1,
		name: 'Tom'
      }
      param = encodeURI(JSON.stringify(param))
      param = encodeURI(param) // 第二次加密
      this.$router.push({path: `/record-index-city/${param}`,})

解密方式是使用decodeURI

 let param = this.$route.params.param
 param = JSON.parse(decodeURI(param))

加密后效果：

十、base64格式的加密与解密

window.atob() 与window.btoa()可以实现对base64格式的数据进行解码和编码，其兼容性是主流浏览器，IE10及以上。

window.atob(encodedStr)只可以解码用btoa方法编码的字符串。

window.btoa()：将ascii字符串或二进制数据转换成一个base64编码过的字符串,但该方法不能直接作用于Unicode字符串

当遇到中文时，需要先对中文转码否则会乱码。

var str = btoa(encodeURIComponent("中文汉字"));
//还可以解码回来
decodeURIComponent(atob(enc)) =>  中文汉字

十一、vite

1、给一个入口文件，通过路口文件找依赖，然后就找到很多模块出来，模块中有js,css和图片总之包含了一大堆文件
2、然后webpack打包，通过loader,plugin等等进行打包；
3、打包完过后就变成非常少量的打包之后的文件，可能是一个也可能是多个，但肯定不是原始的模块文件；
4、打包完后，在开发阶段还要启动一个开发服务器，然后配置服务器，然后启动开发服务器，
5、最终通过访问开发服务器，他就会把打包后的结果给我们
 
这些过程在vue的开发过程运行项目时的打包其实是在内存中完成的，所以经过这一系列的方式会
使得在开发阶段每次修改代码都会运行打包，如果依赖太多运行就会很慢

 

1、vite在开发阶段没有打包过程，他是直接启动一个服务器，启动后就啥事也没有做
2、请求一个模块到开发服务器；
3、开发服务器编译模块，根据页面用所需要的依赖去加载文件
4、加载完成后，开发服务器把编译的结果返回给页面
 
这使得提高了我们在开发阶段运行的效率

 总结

在vue运行项目时，其内部会执行webpack打包命令，打包完后把项目放入开发服务器中然后启动开发服务器，请求服务器是直接给予打包结果。
 
而vite是直接启动开发服务器，请求那个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Moudule，会自动向依赖的Module发出请求。
 
vite成分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
 
由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖，不需要编译，因此启动速度非常块
 
当浏览器请求某个模块时，在根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂，模块越多vite的优势越明显。
 
在HMR方面，当改动一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的
相关依赖模块全部编译一次，效率更高
 
当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的时ES Module，因此在代码中不可以使用CommonJS