vue
小菜101
这个作者很懒,什么都没留下…
展开
-
vue如何将父组件所有的props传递给子组件
vue如何将父组件所有的props一次性传递给子组件<Child v-bind='$props'></Child>demo如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2022-04-21 14:42:05 · 3706 阅读 · 1 评论 -
vue-element-admin中如何打断点
vue-element-admin中如何打断点1、vue.config.js中加一行 devtool: ‘source-map’,configureWebpack: { devtool: 'source-map', // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name:原创 2021-12-08 09:53:45 · 940 阅读 · 0 评论 -
如何开发 Vue 插件?
创建一个插件(组件)目录结构:在src目录下创建一个plugins目录,写我们的button组件// src/plugins/button/src/index.vue<template> <button class="create-btn primary"> <span> <slot></slot> </span> </button></原创 2021-10-21 16:48:46 · 168 阅读 · 0 评论 -
element-ui框架的el-dialog弹出框被遮罩层挡住了
如图:解决方案在el-dialog上加 :append-to-body="true",如下 <el-dialog :visible.sync="dialogUserVisible" title="修改密码" :append-to-body="true"> <el-form ref="dataForm" label-position="left" label-width="100px" > <el-form-item label="新密原创 2021-09-30 09:54:40 · 266 阅读 · 0 评论 -
MVVM模式 VS MVP模式
MVVM模式 VS MVP模式MVP模式使用jquery操作DOM,就是经典的MVP模式:M:数据模型V:视图层P:控制层主要的关注点在P控制层,比如jquery通过响应视图层上用户的点击去请求ajax数据,再渲染更新视图层MVVM模式vue的MVVM模式:M:数据模型V:视图成VM:ViewModel层(vue通过虚拟dom技术、Object,defineProerty架构了这一层)因为是数据驱动的,主要关注点在数据模型M层,VM层监听到数据的变化,将数据映射到V视图层上。总结原创 2020-07-20 10:32:06 · 191 阅读 · 0 评论 -
Vue复用之Mixins混入
4.1 Mixins 混入1. 什么是Mixins当多个组件内部都写了同样的方法,如何将该方法提取出来,减少代码量呢?Vue实现方式如下:// define a mixin objectvar myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// de原创 2020-07-07 15:50:42 · 1050 阅读 · 0 评论 -
Vue之过渡动画(一)
3.1、进入/离开 & 列表过渡1. OverviewVue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM.On this page, we’ll only cover **entering, leaving, **and list transitions, but you can see the next se原创 2020-07-03 14:46:24 · 509 阅读 · 0 评论 -
Vue之处理边界情况
处理边界情况All the features on this page document the handling of edge cases,meaning unusual situations that sometimes require bending Vue’s rules a little. Note however, that they all have disadvantages or situations where they could be dangerous.特殊情况下的处理方原创 2020-07-01 16:31:16 · 630 阅读 · 0 评论 -
Vue插槽的那些事儿
2.4 插槽1. 插槽内容插槽可以包含任意的模板代码,包括html,甚至其他组件。如下:<slot></slot> 在渲染时将被替换成组件<text-document> 之间的所有内容完整代码2. 编译作用域插槽里插入的内容能访问的作用域例如下面的 doc.title 就是在访问同级作用域里的内容完整代码3. 插槽设置默认内容如果插槽里没有提供内容,可以设置默认渲染的内容:如下完整代码4. 具名插槽涉及多个插槽时,我们用name的属性来区分原创 2020-06-30 10:13:29 · 178 阅读 · 0 评论 -
Vue自定义事件
1. 事件的命名规范组件上事件的命名推荐使用分隔符写法(** kebab-case **),如下面的add-size,因为html是大小写不敏感的,v-on后面跟的事件名都会转成小写的。用大写的会导致监听不到事件。<div id="dynamic-component-demo" class="demo"> <base-checkbox v-on:add-size="doSomething"></base-checkbox></div><原创 2020-06-24 15:42:36 · 616 阅读 · 0 评论 -
Vue之Props
1. Prop写法在DOM模板中使用时,要使用横线分隔,如下的 post-titleVue.component('blog-post', { // camelCase in JavaScript props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<!-- kebab-case in HTML --><blog-post post-title="hello!"><原创 2020-06-23 18:49:26 · 453 阅读 · 0 评论 -
Vue组件注册
Vue组件注册1. 组件命名方式// 方式一Vue.component('my-component-name', { /* ... */ })<my-component-name> // 方式二Vue.component('MyComponentName', { /* ... */ })<MyComponentName> // 方式一 在DOM中可以直接用,是有效的元素 // 方式二 可用在单文件组件中(single-file component)2原创 2020-06-23 15:53:58 · 153 阅读 · 0 评论 -
1小时入手vue
文章目录1小时Vue安装VueVue组件组件的结构引入其他的组件Vue class和style绑定`scoped`如何引入外部css资源class的绑定class绑定多个值style绑定Vue templateVue 表单v-model的双向绑定如何导入验证的第三方插件Vue动画vue如何使用动画库Vue路由1小时VueVue Tutorial in 2018 - Learn Vue.js ...原创 2019-06-19 18:09:38 · 603 阅读 · 0 评论