随笔分类 - vue学习记录
vue的日常学习，踩坑
摘要：extend创建的是一个组件构造器，而不是一个具体的组件实例，最终还是要通过Vue.component注册才可以使用 组件构造器相当于Vue.component()方法的第二个参数部分 js const Loading = Vue.extend({ template: ``, data () { r
阅读全文
摘要：除了内置指令外， 用户自定义的指令 自定义指令有全局和局部 自定义指令都是v name的模式，如：v focus，name是directive()方法的第一个参数 全局自定义指令 局部自定义指令 局部自定义指令就是一个对象，所以自定义的指令都可以写在这里，key就是指令名，value也是个对象，挂载
阅读全文
摘要：混入可以将不同组件的共同内容部分在一个混入对象中展示，然后通过在组件实例中混入这个对象，这样拥有这些属性的组件都可以调用 混入对象中的属性名跟组件中的属性名冲突时，以组件自身的为基准 个人理解就是把所有实例组件相同的data，methods等放到一个公共对象中去调用 最终页面展示的结果：
阅读全文
摘要：利用component及is占位符即可轻松实现动态切换加载tab栏 语法 必须是is占位符，不能写别的，通过v bind指令动态绑定属性 tabname就是我们要显示的组件名称 比如我们创建了三个子组件，并注册到了根组件中：one，two，three 那想要展示哪个子组件，就将组件名赋值给tabna
阅读全文
摘要：一、使用vuex "下载一" "下载二" "下载三" CDN NPM Vuex依赖Promise。如果你支持的浏览器并没有实现Promise（比如IE），那么你可以使用一个 "polyfill" 的库，例如 "es6 promise" Promise的CDN NPM vuex里面有四个属性，stat
阅读全文
摘要：一、vue双向数据绑定原理 vue实现双向数据绑定是通过Object.defineProperty()方法来实现劫持的 Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象 "Object.defineProperty()
阅读全文
摘要：一、全局组件 1、组件名称 命名的时候：串联或者驼峰 使用的时候必须全部小写串联 注册方式 全局注册的组件一定要写在vue实例之前，否则没有效果，全局组件可以在所有组件中使用 二、局部组件 1、子组件 有点类似创建一个extends拓展，子组件只能在注册的组件里面使用 2、公共组件 其实每一个vue
阅读全文
摘要：vue中需要过渡或者动画的元素，组件需要通过vue的tansition外层标签包裹起来，否则没有效果 一、过渡 HTML Tips 注意transition标签上的name属性，这个一定要有，这个算是指定过渡组件的一个前缀名，对于这些过渡中切换 class，每个都以过渡的 name 作为前缀。当你使
阅读全文
摘要：在监听键盘事件时，我们经常需要查找常用按键对应的 code 值。Vue 可以在 v on 上添加按键修饰符，用于监听按键事件 这里列出所有的按键修饰符别名： 记住所有 keyCode 是非常麻烦的事，所以 Vue 提供一些最常用按键的别名 自定义按键修饰符别名 js // 可以使用 Vue.conf
阅读全文
摘要：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 使用修饰符时的顺序会产生一些影响，因为相关的代码会以相同的顺序生成。
阅读全文
摘要：当我们往data里面追加一个没有或者删除一个数据时，视图并不会更新，受现代 Javascript 的限制， Vue 无法检测到对象属性的添加或删除 Vue 不允许在已经创建的实例上，动态地添加新的根级响应式属性(root level reactive property)。然而，可以使用 Vue.se
阅读全文
摘要：vue有时候在改变了数组的值的时候，视图并不会更新，这时候就需要调用vue变化数组的方法来实现 一、变化数组方法 二、替换一个数组 为什么vue数组改变了，视图不变？ Tips 由于 JavaScript 的限制，Vue 无法检测到以下数组变动 1、当你使用索引直接设置一项时，例如 vm.items
阅读全文
摘要：v fi和v show都可以根据条件来展示DOM元素，但是两者有着很大的不同： 1、v show 的元素会始终渲染并保留在 DOM 中，是根据display属性来切换，而v if的元素初始并没有，只有为true的时候才会生成并渲染，会完整地销毁(destroy)和重新创建(re create)条件块
阅读全文
摘要：class动态绑定 1、对象语法 通过v bind指令动态绑定属性来动态的切换class 通过改变isActive的值，我们可以让div动态的是否拥有active这个class 多个class也是一样 或者直接在data中以对象的形式展示： 2、数组语法 如果想要动态绑定，也可以利用三元表达式实现
阅读全文
摘要：computed 计算属性 ：computed属性个人理解为是用来计算重新赋值data里面指定数据的值，也可以重新用来返回一个新的数据，但是这个数据无法动态更新，但是一般建议是用来赋值data里面的属性值 computed 属性会基于data所依赖的数据进行缓存，如果不希望有缓存，请使用 metho
阅读全文
摘要：一、vue实例 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的属性 二、生命周期钩子函数 | 生命周期钩子函数
阅读全文
摘要：vue循环语句有点类似art template的循环渲染 art template v for :key必须要有，否则会报错，这个是唯一标识符，值必须唯一
阅读全文
摘要：vue条件判断语句跟js条件判断一样 HTML JS v if v else fi v else 也可以同JS一样写表达式 也可以写三元表达式 二、条件渲染 根据条件判断语句，我们可以进行条件渲染我们想要的数据
阅读全文
摘要：声明式渲染，也可以说叫插值表达式，通过简介的模板语法将Vue实例中的数据渲染到DOM中 声明式渲染的语法： {{message}} 注意插值表达式只能写在html的开始，结束标签中间，不能写在标签里面 数据： 结果： Tips 在vue中，必须要设置一个父DOM，之后所有的内容都要写在这个父DOM中
阅读全文
摘要："vue官方中文文档" 一、CDN模式 创建一个html文件，引入vue的CDN文件，即可使用vue了 或： 二、JS文件模式 "开发环境版本" "生产环境版本" 三、NPM安装 修改NPM镜像源： "参考文献" 临时淘宝镜像 js npm config set registry https://r
阅读全文
浙公网安备 33010602011771号