随笔分类 - vue
摘要：stop 修饰符的作用是阻止事件冒泡 self 修饰符的作用是只有当前的事件绑定的元素与当前元素一致时才触发 Stop： // 单击事件 clickRed(e){ console.log("click:red,eventId:"+e.target.id) }, clickGreen(e){ cons
阅读全文
摘要：Vue 允许我们自定义指令，可以通过 Vue.directive 定义全局指令，可以在组件 directives 钩子中定义局部自定义指令 全局自定义指令 Vue.directive('input', { inserted: function(el, binding) { ... } }) 参数如下
阅读全文
摘要：比如我们想做一个校验，会出现一个弹窗，填写校验信息，此时页面禁止滚动 可以绑定如下事件 change(){ // show 控制弹窗显隐 this.show = !this.show if(this.show){ // pc 端直接删掉滚动条 document.body.style.overflow
阅读全文
摘要：使用 Vue.component 可以用来注册全局组件 // main.js ... import School from "./components/School.vue" Vue.component("School", School) ... // .vue <template> <div> .
阅读全文
摘要：Mock 可以用来模拟服务端响应请求，让前端人员自己测试接口 直接上案例： Axios // request.js import Axios from 'axios' // 先创建一个 axios 实例，无需配置 baseURL，只是模拟后端 const http = Axios.create({
阅读全文
摘要：$attrs 用来保存给子组件绑定了，但子组件没有接收的数据，如下： // 父组件...<School v-bind="{a, b, c}"></School>... // 子组件 School...props: ['a', 'b']... 打印子组件的 $attrs，如下所示： 通常，此属性可以用
阅读全文
摘要：删除数组指定索引的元素可以采用 delete，Array.splice 和 vue.$delete 三种方法 如下所示： let a = [1,2,3,4,5] let b = [1,2,3,4,5] let c = [1,2,3,4,5] delete a[2] b.splice(2, 1) th
阅读全文
摘要：参考官方文档：Axios 中文文档 Axios 和 Fetch 类似，都是基于 Promise ，用来发送网络求请求的 不同的是，Axios 是基于 Ajax 封装的，而 Fetch 是 ES6 中的原生API（这也是Fetch目前来看唯一优于 Axios 的地方，方便测试） Fetch 请移步 F
阅读全文
摘要：vue 通过 provide/inject 钩子可以实现父子组件间通信，父 => 子 父组件通过 provide 向下层组件（子组件、子子组件等等都可以用）提供数据，下层组件使用 inject 注入到当前组件中。 注意： 1.对于基本数据类型，传递的数据不会携带响应式。（可采用函数返回值的方式，使传
阅读全文
摘要：安装及引入 // 安装 npm i vue-router // 引入 main.js ... import VueRouter from "vue-router" import router from './router'... Vue.use(VueRouter) ... new Vue({ ro
阅读全文
摘要：简介 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 搭建环境 创建主文件，通常为 src/store/index.js。 // src/store/index.js // 引入V
阅读全文
摘要：简述 在使用Axios时，在本地开发通常会出现跨域问题，解决方法也很简单。 在开发环境下，可以通过配置Vue.config.js中的module.exports中devServer来解决。 注：生产环境无效，没见dev打头么，生产环境给axios配置baseURL，打包完给后端解决去 简单配置 直接
阅读全文
摘要：语法 // 回调函数中 this 为当前组件 VueComponent this.$nextTick(回调函数) 作用 在下一次 DOM 更新结束后执行其指定的回调。 这样说其实有点难以理解，DOM更新结束后是什么时候？难道数据变了，DOM没变吗？ 先上代码 <template> <div id="
阅读全文
摘要：消息订阅与发布（pubsub） 一种组件间通信的方式，使用方法和全局事件总线$bus很相近，适用于任意组件间通信。 安装 // 安装 npm i pubsub-js // 引入 import pubsub from 'pubsub-js' 使用 在A组件中： pubsub参数上和$bus略有不同，回
阅读全文
摘要：组件的自定义事件 使用场景 A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中） 绑定自定义事件 在父组件中： <HelloWorld @customEvent="test1"/> 或 <HelloWorld v-on:customEvent="test1"/
阅读全文
摘要：Props 功能 让组件接收外部传过来的数据 传递数据 <Demo name="xxx"/> 接收数据 1. 第一种方式（只接收）： props:['name'] 2. 第二种方式（限制类型）： props:{ name: String } 3. 第三种方式（限制类型、限制必要性、指定默认值）： p
阅读全文
摘要：插件可用于扩展Vue，自定义插件应包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。 定义插件: // plugin.jsexport default { install(Vue, x, y, z){ // 传入的第一个参数是Vue, 可以
阅读全文
摘要：vue中的mixin可以实现组件中重复代码的高度复用，可以将不同组件中重复的组件选项（如，data、created、mounted、components、computed、watch等）都提取出来，形成一个mixin的js文件，在需要用到这些代码时，引入这个js文件即可。 用法 通过mixins属性
阅读全文
摘要：概述 Vue生命周期函数主要包含8个部分，按顺序分别是： 1. beforeCreate（创建前）2. created （创建后）3. beforeMount (载入前)4. mounted （载入后）5. beforeUpdate （更新前）6. updated （更新后）7. beforeDes
阅读全文
摘要：除了Vue的内置指令为，vue还支持自定义指令 简单的自定义指令 如下所示： 在directives中创建big方法，传入两个参数： 1 element: 绑定的Dom元素 2 binding: 绑定的对象，其value属性即为绑定变量的值 <div id="root"> <h1 v-big="n"
阅读全文
