随笔分类 - 笔记-Vue
Vue学习之路
摘要：Vue脚手架的基本使用 基于3.x版本的脚手架创建Vue项目 1. 基于交互式命令行的方式，创建Vue项目 vue create my-project 2. 基于图像化界面的方式创建Vue项目 vue ui 3. 基于2.x的旧版本，创建旧Vue项目 npm install -g @vue/cli-
阅读全文
摘要：ES6模块化 ES6模块化规范 ES6模块化规范中定义： 每个js文件都是一个独立的模块 导入模块成员使用import关键字 暴露模块成员使用export关键字 ES6模块化的基本语法 默认导出与默认导入 默认导出语法exprot default 默认导出成员 //当前文件模块为m1.js //定义
阅读全文
摘要：接口调用async/await async/await是ES7引入的新语法，可以更加方便的进行异步操作 async关键字用于函数上（async函数的返回值是Promise实例对象) await关键字用于async函数中(await可以得到异步的结果) async/await基本使用 async fu
阅读全文
摘要：接口调用-axios axios(官网：https://github.com/axios/axios)是一个基于Promise的Http客户端。 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 axios基本用法 //1. 引入axios.js <script
阅读全文
摘要：接口调用fetch fetch基本用法 fetch('/abc').then(data=>{ //这里返回的其实是一个Promise对象，text()方法属于fetchAPI的一部分 return data.text(); }).then(ret=>{ //注意这里得到的才是最终的数据 consol
阅读全文
摘要：Promise 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列 Promise 基本用法 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务 resolve和reject 两个参
阅读全文
摘要：生产环境配置 1. 创建文件 2. 修改配置文件 3. 修改package.json 4. 运行指令: webpack
阅读全文
摘要：需要的依赖 1. Node.js 2. webpack 3. 各种loader 4. html webpack plugin 插件 5. dev server webpack开发环境配置 1. 创建文件 2. 修改配置文件(webpack.config.js) 3. 运行指令: npx webpac
阅读全文
摘要："计算属性" 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。 所以，对
阅读全文
摘要：Vue 的路由 前端路由:对于单页面应用程序来说,主要通过URL中的hash( 号)来实现不同页面之间的切换,同时hash有一个特点: HTTP请求中不会包含hash相关的内容;所以，单页面程序中的页面跳转主要用hash实现。 Vue Router的基本使用 路由传参 1. 通过query方式传参
阅读全文
摘要：Vue 通过ref获取DOM元素 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 当 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。通过this,$r
阅读全文
摘要：Vue组件 组件的出现就是为了拆分Vue实例的代码量的，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么样的功能就去调用相应的组件即可。 创建组件 方式1：使用Vue.extend创建组件对象，使用Vue.component注册组件 方式二：直接使用Vue.component(组件名,{
阅读全文
摘要：Vue动画 使用过度类名实现动画 1. 将要使用过度动画的标签用transition包裹 2. 定义两组样式 自定义样式前缀 可以在transition标签中用name来指定对应的样式前缀 这样做的话，在定义动画时也要用my作为前缀 使用第三方类库实现动画 Animate.css 在transiti
阅读全文
摘要：vue resource发起get,post,jsonp请求 以下是一个简单的 Get 请求实例，请求地址是一个js文件： post 请求和jsonp请求 post 发送数据到后端，需要第三个参数 {emulateJSON:true} 。 emulateJSON 的作用： 如果Web服务器无法处理编
阅读全文
摘要：vue实例的生命周期 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,統称为生命周期! 生命周期钩子:就是生命周期事件的别名而已; 主要的生命周期函数分类: 创建期间的生命周期函数: beforeCreate :实例刚在内存中被创建出来,此时,还没有初始化好d
阅读全文
摘要：自定义指令 javascript // 注册一个全局自定义指令 Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { //这里第一个参数永远是el // 聚焦元素 el.focus() } }) 如果想注册
阅读全文
摘要：按键修饰符 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 在监听键盘事件时添加按键修饰符： 你可以直接将 " " 暴露的任意有效按键名转换为 kebab case 来作为修饰符。 在上述示例中，处理函数只会在 等于 时被调用 按键码 的事件用法 "已经被废弃了" 并可能不会被最新的浏
阅读全文
摘要：Vue 的过滤器 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方： 双花括号插值和 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： 你可以在一个组件的选项中定义本地的过滤器： 或者在创建
阅读全文
摘要：列表渲染 "用 把一个数组对应为一组元素" 我们可以用 指令基于一个数组来渲染一个列表。 指令需要使用 形式的特殊语法，其中 是源数据数组，而 则是被迭代的数组元素的 别名 。 结果： Foo bar 在 块中，我们可以访问所有父作用域的 property。 还支持一个可选的第二个参数，即当前项的索
阅读全文
摘要：在Vue中使用.class样式 我们可以传给 一个对象，以动态地切换 class： 上面的语法表示 这个 class 存在与否将取决于数据 property 的 "truthiness" 。 你可以在对象中传入更多字段来动态切换多个 class。此外， 指令也可以与普通的 class attribu
阅读全文
浙公网安备 33010602011771号