随笔分类 - vue.js
1
前端框架vue学习过程
摘要：后端路由 对于普通的网站，所有的超链接都是url地址，所有的url地址都对应着服务器上的资源 前端路由 对于单页面应用程序来说，主要通过单页面中的hash（#）来进行页面的切换。hash的特点是http的请求中不会包含hash中的相关内容，所以单页面中的hash跳转主要用hash实现。通过hash来
阅读全文
摘要：子组件是不能直接使用父组件中的方法的，需要进行事件绑定（v-on：自定义方法名="父组件方法名"），然后在子组件中再定义一个方法，使用this.$emit('自定义方法名')语句完成父组件中方法到子组件中的调用，最后直接调用子组件中定义的方法即可。
阅读全文
摘要：子组件是不能直接使用父组件中数据的，需要进行属性绑定（v-bind:自定义属性名=“msg”），绑定后需要在子组件中使用props[‘自定义属性名’]数组来定义父组件的自定义名称。 props数组中的数据是只读的，父组件中的data是可读可写的。 子组件自己的data，子组件可直接访问，与父组件无关
阅读全文
摘要：<!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>Doc
阅读全文
摘要：注册一个全局组件 创建一个局部组件（只能在父模板中使用） 组件化和模块化的区别： 模块化是从后台代码逻辑角度出发，方便代码分层开发，保证每个功能模块的职能单一 组件化是从UI界面的角度进行划分的，前端的组件化方便UI组件的重用 <body> <div class="app"> <my-com1></
阅读全文
摘要：生命周期钩子 生命周期钩子=生命周期函数=生命周期事件 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 实
阅读全文
摘要：使用vue.directive（‘focus’，{对象}）定义全局指令，v-focus 指令钩子函数会被传入以下参数： el：指令所绑定的元素，可以用来直接操作 DOM 。 binding：一个对象，包含以下属性： name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-d
阅读全文
摘要：v-on监听事件时可添加按键修饰符 使用 keyCode 特性也是允许的： 还可以通过全局 config.keyCodes 对象自定义按键修饰符别名： Vue 提供了绝大多数常用的按键码的别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .
阅读全文
摘要：vue中的全局过滤器与定义私有过滤器 全局过滤器 通过vue.filter('过滤器名称'，function（参数）{过滤方式，返回过滤后值})的方式定义一个全局过滤器。 使用过滤器的方式格式是{{ 要处理的字符 | 过滤器的名称}} replace（‘替换字符’，‘被替换字符’）方法的使用 定义私
阅读全文
摘要：关键字搜索品牌案例 （1）页面布局 （2）搜索逻辑的实现 （3）小结与数组的新方法 定义一个search（keywords）方法，通过参数keywords绑定搜索框，接收关键字，然后通过循环遍历数组来判断符合条件的列表项，作为返回值渲染到页面中。 数组方法：some（（item，i）=>{条件{re
阅读全文
摘要：品牌管理案例 （1）bootstrip快速布局 （2）业务逻辑的实现 （3）两种查找索引的方式 在实现删除列表项的功能时，使用splice（从何开始，删除几个，插入项）方法，因此从何开始（index）需要我们把它揪出来。 第一种方法使用some()函数遍历数组，通过回调函数设置判断条件，当条件成立即
阅读全文
摘要：v-for遍历数组、对象数组、对象、迭代次数
阅读全文
摘要：v-model实现数据的双向绑定（简易计算器实例） 简易计算器实例
阅读全文
摘要：vue中的事件修饰符（.stop、.prevent、.self、.capture、.once） （1）实例代码 （2）摘要 使用.stop阻止事件的冒泡行为。 使用.prevent阻止事件的默认行为。 使用.self实现只有点击当前元素才会触发事件处理函数。 使用.capture实现捕获触发事件的机
阅读全文
摘要：制作一个字符串的跑马灯效果 （1）实例代码 （2）摘要 实现案例的基本思路是利用substring截取字符串再进行拼接，然后使用定时器来达到动态的效果。 箭头函数可以解决this的指向问题，箭头函数内部的this相对于外部this的指向。 需要访问data中数据时，一定要使用this访问，比如thi
阅读全文
摘要：vue中的v-bind与v-on的使用 （1）实例 （2）摘要 v-bind用来绑定属性（v-bind:title="myTitle"），v-on用来绑定事件（v-on:click="show"）。 v-bind：绑定的属性名称 可简写为：绑定的属性名称。 v-on:绑定的事件名称 可简写为 @绑定
阅读全文
摘要：v-cloak v-text v-html的使用 （1）实例 （2）v-cloak v-text v-html和插值表达式的区别与特点 使用插值表达式会有闪烁问题 设置v-cloak类中的display为none来解决闪烁问题 使用插值表达式可以在前后添加内容，v-text会覆盖标签内容 使用v-t
阅读全文
摘要：vue实例基本结构与MVVM框架 （1）vue实例基本结构 （2）vue实例与MVVM结构对应关系 MVVM是前端视图层的概念，主要关注于视图层分离，即把前端视图层分为三部分：model、view、viewmodel。 1、M（model）层--保存每个页面的单独数据 vue实例的vm对象中的dat
阅读全文
1
浙公网安备 33010602011771号