10-组件化

最新推荐文章于 2022-05-27 20:46:25 发布
最新推荐文章于 2022-05-27 20:46:25 发布
阅读量1k 收藏
点赞数
分类专栏： vue框架学习和项目常见问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/plan_jok/article/details/113097943
版权

组件化开发

在实际开发中，一个页面的功能可能及其复杂，我们需要将其拆分成各个功能模块组件，以此达到复用和方便管理的目的。
在这里插入图片描述
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

示例1.1：不使用组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>不使用模板</title>
</head>
<body>
<div id="app">
  <h2>标题</h2>
  <p>内容一</p>
  <p>内容二</p>
  <p>内容三</p>

  <h2>标题</h2>
  <p>内容一</p>
  <p>内容二</p>
  <p>内容三</p>

  <h2>标题</h2>
  <p>内容一</p>
  <p>内容二</p>
  <p>内容三</p>

  <h2>标题</h2>
  <p>内容一</p>
  <p>内容二</p>
  <p>内容三</p>
</div>
</body>
</html>

示例1.2：使用组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件化的基本使用</title>
</head>
<body>
<div id="app">
  <!--  3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  // 1.创建组件
  const cpnC = Vue.extend({
    template: `
  <div>
      <h2>标题</h2>
      <p>内容一</p>
      <p>内容二</p>
      <p>内容三</p>
    </div>`
  })

  // 2.注册组件
  Vue.component('my-cpn', cpnC)


  const app = new Vue({
    el: "#app",
  })
</script>
</html>

全局组件和局部组件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件和局部组件</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <mycpn2></mycpn2>
</div>

<br>

<div id="app2">
  <mycpn2></mycpn2>
  <mycpn2></mycpn2>
</div>

</body>
<script src="../js/vue.js"></script>
<script>
  const cpnC = Vue.extend({
    template: `
  <div>
      <h2>标题1</h2>
    </div>`
  })

  const cpnC2 = Vue.extend({
    template: `
  <div>
      <h2>标题2</h2>
    </div>`
  })


  //全局组件
  Vue.component('my-cpn', cpnC)

  const app = new Vue({
    el: '#app',
  })

  const app2 = new Vue({
    el: '#app2',
    components: {
      // 局部组件
      mycpn2: cpnC2
    }
  })
</script>
</html>

父组件和子组件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父组件和子组件</title>
</head>
<body>
<div id="app">
  <parentc></parentc>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  // 1.子组件
  const sonC = Vue.extend({
    template: `<div>
                <h2>子组件</h2>
              </div>`
  })

  // 2.父组件
  const parentC = Vue.extend({
    template: `
      <div>
        <h2>父组件</h2>
        <sonc></sonc>
      </div>`,
    components: {
      // 3.将子组件注册到父组件中
      sonc: sonC
    }
  })

  // vue实例对象可以看做最顶层的组件，root
  const app = new Vue({
    el: '#app',
    components: {
      // 4.将父组件注册到实例对象
      parentc: parentC
    }
  })
</script>
</html>

组件注册语法糖写法

示例1：语法糖写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件注册语法糖</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      'cpn': {
        template: `
              <div>
                <h2>标题</h2>
              </div>`
      }
    }
  })
</script>
</html>

示例2：将模板抽离

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分离写法</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn2></cpn2>
</div>

<!--1.使用script标签，注意：类型必须是text/x-template-->
<script type="text/x-template" id="cpn">
  <div>
    <h2>标题1</h2>
  </div>
</script>

<!--2.使用template标签-->
<template id="cpn2">
  <div>
    <h2>标题2</h2>
  </div>
</template>

</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: cpn
      },
      cpn2: {
        template: cpn2
      }
    }
  })
</script>
</html>

组件中的data问题

示例1：组件中的data存放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件中的data存放</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>{{title}}</h2>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
// 注册一个全局组件
Vue.component('cpn', {
  template: '#cpn',
  data() {
    return {
      title: '我是标题'
    }
  }
})

const app = new Vue({
  el: "#app",
})
</script>
</html>

示例2：为什么组件中的data需要是一个函数

当data是一个函数时：
此时，返回一个对象，由于地址值不同，所以组件之间的数据互不干扰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data为什么是个函数</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
// 修改计数器案例，注册组件
Vue.component('cpn', {
  template: '#cpn',
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    }
  }
})

const app = new Vue({
  el: '#app'
})
</script>
</html>

当data是一个普通对象时：
对象的地址值不会变化，组件之间公用同一套数据，实际过程中产生问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>data为什么是个函数</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const obj = {
  counter: 0
}

// 修改计数器案例，注册组件
Vue.component('cpn', {
  template: '#cpn',
  data() {
    return obj
  },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    }
  }
})

const app = new Vue({
  el: '#app'
})
</script>
</html>

父子组件通信问题

父传子

示例：通过props
props传值
深入了解props

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父传子</title>
</head>
<body>
<div id="app">
  <!--  v-bind不支持驼峰，要使用驼峰时用“-”连接，例如cMessage => c-message -->
  <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>cmovies: {{cmovies}}</h2>
    <h2>cmessage: {{cmessage}}</h2>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const cpn = {
  template: '#cpn',
  props: ['cmovies', 'cmessage'],
}

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello  Vue',
    movies: ['海贼王', '海尔兄弟', '海王']
  },
  components: {
    cpn
  }
})
</script>

</html>

子传父

示例：通过$emit自定义事件传值
自定义事件传值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子传父</title>
</head>
<body>
<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <button v-for="item in movies" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const cpn = {
  template: '#cpn',
  data() {
    return {
      movies: [
        {id: 0, name: '海贼王'},
        {id: 1, name: '海王'},
        {id: 2, name: '海尔兄弟'},
        {id: 3, name: '海下两万米'},
      ]
    }
  },
  methods: {
    btnClick(item) {
      this.$emit('item-click', item)
    }
  }
}

const app = new Vue({
  el: '#app',
  components: {
    cpn
  },
  methods: {
    cpnClick(item) {
      console.log(item)
    }
  }
})
</script>
</html>

父组件调用子组件方法-$children

$children返回的是一个数组，返回的是当前组件的全部子组件的信息，可以通过$children[i].mthod的方法调用，也就是数组中的array[i].method的形式，不过开发中由于需求变动较大，这种方法不够灵活，因此使用的不多。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父访子-children</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn2></cpn2>
  <button @click="btnClick">子组件信息</button>
</div>
</body>

<template id="cpn">
  <div>
    <h2>子组件1</h2>
  </div>
</template>

<template id="cpn2">
  <div>
    <h2>子组件2</h2>
  </div>
</template>


<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  methods: {
    btnClick() {
      console.log(this.$children)
      for (const child of this.$children) {
        child.showMessage()
      }
    }
  },
  components: {
    cpn: {
      template: "#cpn",
      data() {
        return {
          name: '子组件1'
        }
      },
      methods: {
        showMessage() {
          console.log('我是' + this.name)
        }
      }
    },
    cpn2: {
      template: "#cpn2",
      data() {
        return {
          name: '子组件2'
        }
      },
      methods: {
        showMessage() {
          console.log('我是' + this.name)
        }
      }
    }
  }
})
</script>
</html>

父组件调用子组件-$refs

$refs返回的是一个对象，因此可以通过调用对象内部的方法使用。如下列的例子，在使用控件的时候在控件加上"ref = abc",本质上类似于div标签中的id，因此可以通过this.$refs.abc找到在当前组件中使用的命名为abc的子组件。此时使用this.$refs.adc.method调用子组件方法。该方法类似于对象中的通过名称绑定值，因此即便开发过程中有变动也没啥影响，用的比较频繁。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父访问子-ref</title>
</head>
<body>
<div id="app">
  <cpn2></cpn2>
  <cpn ref="abc"></cpn>
  <cpn2 ref="bcd"></cpn2>
  <button @click="btnClick">按钮</button>
</div>
</body>

<template id="cpn">
  <div>
    <h2>子组件1</h2>
  </div>
</template>
<template id="cpn2">
  <div>
    <h2>子组件2</h2>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  methods: {
    btnClick() {
      console.log(this.$refs)
      console.log(this.$refs.abc.name)
      this.$refs.abc.showMessage()
    }
  },
  components: {
    cpn: {
      template: '#cpn',
      data() {
        return {
          name: '子组件1'
        }
      },
      methods: {
        showMessage() {
          console.log('我是' + this.name)
        }
      }
    },
    cpn2: {
      template: '#cpn2',
      data() {
        return {
          name: '子组件2'
        }
      },
      methods: {
        showMessage() {
          console.log('我是' + this.name)
        }
      }
    }
  }
})
</script>
</html>

子组件访问父组件和根组件-$parent && $root

$parent可以用来访问该组件的父组件，不过会加强和父组件之间的耦合性，一般不推荐使用
$root可以用来直接访问根组件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子访问父-parent与root</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>{{name}}</h2>
    <cpn2></cpn2>
  </div>
</template>
<template id="cpn2">
  <div>
    <h2>{{name}}</h2>
    <button @click="showParent">访问父组件</button>
    <button @click="showRoot">访问根组件</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
let cpn2 = {
  template: '#cpn2',
  data() {
    return {
      name: '子组件'
    }
  },
  methods: {
    showParent() {
      console.log(this.$parent)
      console.log(this.$parent.name)
    },
    showRoot() {
      console.log(this.$root)
      console.log(this.$root.name)
    }
  }
}


let cpn = {
  template: '#cpn',
  data() {
    return {
      name: '父组件'
    }
  },
  components: {
    cpn2
  }
}


const app = new Vue({
  el: '#app',
  data: {
    name: '根组件'
  },
  components: {
    cpn
  }
})
</script>
</html>

slot插槽

原始组件的可扩展性太差，vue中提供了一种方法。slot插槽可以用于对组件的扩展
插槽的详细使用

slot的基本使用

例如有以下需求：

  • 第一个子组件需要加一个按钮
  • 第二个子组件需要加一个span标签
  • 第三个子组件不需要改动

此时可以在组件中添加slot用于可能产生的替换

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot的基本使用</title>
</head>
<body>
<div id="app">
  <cpn>
    <button>按钮</button>
  </cpn>
  <cpn>
    <span>span</span>
  </cpn>
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>子组件</h2>
    <slot></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '#cpn',
    }
  }
})
</script>
</html>

slot的默认值

slot中可以设置默认值

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot的基本使用</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn>
    <span>span</span>
  </cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>子组件</h2>
    <slot>
      <button>按钮</button>
    </slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '#cpn',
    }
  }
})
</script>
</html>

具名插槽

有一个需求：

  • 将一个div分成三块
  • 中间改为标题
  • 左边改为返回按钮
  • 右边改为前进按钮

示例1：不使用具名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>具名插槽</title>
</head>
<body>
<div id="app">
  <cpn>
    <span>标题</span>
  </cpn>
</div>
</body>

<template id="cpn">
  <div>
    <slot><span>左边</span></slot>
    <slot><span>中间</span></slot>
    <slot><span>右边</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '#cpn'
    }
  }
})
</script>
</html>

此时使用会将所用的未使用具名的slot都替换

示例2：使用具名完成需求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>具名插槽</title>
</head>
<body>
<div id="app">
  <cpn>
    <button slot="left">返回</button>
    <span slot="center">标题</span>
    <button slot="right">前进</button>
  </cpn>
</div>
</body>

<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '#cpn'
    }
  }
})
</script>
</html>

编译作用域

简单来说就是这个组件在哪使用就只能访问那个实例对象中的内容，例如下面的例子中，cpn组件在app中使用，cpn只能访问app.data中的message，而cpn.data的name无法访问。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编译作用域</title>
</head>
<body>
<div id="app">
  <cpn>
    <p>{{name}}</p>
    <p>{{message}}</p>

  </cpn>
</div>
</body>

<template id="cpn">
  <div>
    <h2>子组件</h2>
    <slot></slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'vue'
  },
  components: {
    cpn: {
      template: '#cpn',
      data() {
        return {
          name: '子组件'
        }
      }
    }
  }
})
</script>
</html>

作用域插槽

简单来讲就是通过插槽获取子组件中的数据

一个例子：

  • 在父组件中将以下组件中的标签修改为h2

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域插槽</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
</body>

<template id="cpn">
  <div>
    <slot>
      <ul>
        <li v-for="item in Planguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '#cpn',
      data() {
        return {
          Planguages: ['Java', 'JavaScript', 'C++', 'C#', 'Go']
        }
      }
    }
  }
})
</script>
</html>

示例2：修改后

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作用域插槽</title>
</head>
<body>
<div id="app">
  <cpn>
    <!--    <template v-slot="slot"> 2.6以上推荐使用-->
    <template slot-scope="slot">
      <h2 v-for="item in slot.planguages">{{item}}</h2>
    </template>
  </cpn>
</div>
</body>

<template id="cpn">
  <div>
    <slot :planguages="Planguages">
      <ul>
        <li v-for="item in Planguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    cpn: {
      template: '#cpn',
      data() {
        return {
          Planguages: ['Java', 'JavaScript', 'C++', 'C#', 'Go']
        }
      }
    }
  }
})
</script>
</html>
plan_ b
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
C++经典算法题-洗扑克牌（乱数排列）
逍遥云恋
01-17 1327
24.Algorithm Gossip: 洗扑克牌（乱数排列） 说明 洗扑克牌的原理其实与乱数排列是相同的，都是将一组数字（例如1～N）打乱重新排列，只不过洗扑克牌多了一个花色判断的动作而已。 解法 初学者通常会直接想到，随机产生1～N的乱数并将之存入阵列中，后来产生的乱数存入阵列前必须先检查阵列中是否已有重复的数字，如果有这个数就不存入，再重新产生下一个数，运气不好的话，重复的次数就会很多，程式...
Ionic - 组件化开发之自定义组件
LucioCN
01-28 7068
万物皆组件思想,组件化开发,优化项目,省时省力   1,使用命令创建一个表单component ionic g component select-table //其他指令 ionic g page YourPageName //创建新页面 ionic g directive YourPageName //创建指令 ionic g component YourComponentName //...
计算 24 点是一种扑克牌益智游戏，随机抽出 4 张扑克牌，通过加 (+) ，减 (-) ，乘 ( * ), 除 (/) 四种运算法则计算得到整数 24 ，本问题中，扑克牌通过如下字符或者字符串表示...
weixin_30868855的博客
06-27 1552
include "stdafx.h" #include <iostream> #include <fstream> #include <string> #include <vector> #include <algorithm> #include<map> #include<deque> #incl...
[洛谷P2540]【NOIP2015】斗地主增强版（DP+搜索）
ixRic
11-11 477
文章目录题目分析代码 题目 P2540 斗地主增强版 分析 如果不出顺子，那么怎么出最优是可以DP解决的：dp[i][j][k][l]dp[i][j][k][l]dp[i][j][k][l]表示一副牌有iii个炸弹、jjj个三张、kkk个顺子、lll个单牌的最优出法。在这个状态定义下，原来的4i+3j+2k+l4i+3j+2k+l4i+3j+2k+l张牌变成了i+j+k+li+j+k+li+j+k...
扑克牌大小（华为2016校招）
zems
07-07 739
扑克牌大小（华为2016校招）1、题目描述扑克牌游戏大家应该都比较熟悉了，一副牌由54张组成，含3~A，2各4张，小王1张，大王1张。牌面从小到大用如下字符和字符串表示（其中，小写joker表示小王，大写JOKER表示大王）:) 3 4 5 6 7 8 9 10 J Q K A 2 joker JOKER 输入两手牌，两手牌之间用“-”连接，每手牌的每张牌以空格分隔，“-”两边没有空格，如：
MetaX组件化框架
u014294681的博客
05-27 1945
MetaX 是 58无线 Android 团队开发的一套增强版的组件化框架，它制定了一系列的标准和规范，来解决现有组件化工程测试成本高、api 无法保证向下兼容、差异化定制与重构成本高、无法感知变动细节、业务线编译调试耦合平台环境等问题。对于这些标准和规范，MetaX 框架提供了一套全自动化的脚本工具保障它们可以正常稳定地运转。...
Android组件化方案
u010897392的专栏
05-25 2494
Android组件化项目地址：Android组件化项目AndroidModulePattern Android组件化之终极方案地址：http://blog.csdn.net/guiying712/article/details/78057120 1为什么要项目组件化 2如何组件化 3组件化实施流程 1组件模式和集成模式的转换 2组件之间AndroidManifest合并问题 ...
Vue前端组件化
weixin_43279985的博客
05-01 1266
前端组件化 1. 前言 前端组件化基于UI组件化文档设计方案，通过模块化、组件化思想实现前端组件化。此文档主要介绍如下四部分内容： 模块化开发方案 项目灵活配置方案 CSS主题样式方案 前端独立部署方案 2. Vue-demo简介 此套前端组件化模板Vue-demo,采用Vue+Elemen+Echart+Axios等js库开发,项目中已经集成好常用依赖包管理文件,后续项目开发中无需重新安装,框架具备开箱即用功能,实际项目需求中可结合此模板进行拓展。 Vue-demo目前已安装的依赖包，后续无需重复安装
web---模块化、组件化、工程化理解（代码规范）
muzidigbig的博客
12-04 2440
1. 什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的“切图（FE）-&gt;套模板（RD）”的开发模式，这种模式下的前端开发虽说不是刀耕火种的原始状态，但是效率非常低下。 前端的工程化问题与...
iOS 组件化开发
wumu_Love的博客
04-28 3821
iOS组件化开发
Vue.js-组件化前端开发新思路
01-27
Vue.js（读音/vju?/，类似于view）是一套构建用户界面的渐进式框架。...我们只需要花10分钟写一点代码，就能大概窥见Vue的本质。 所有的MVVM框架要解决的第一件事都是数据绑定。首先要将Model的变化渲染到View
web前端-基于组件化Web GIS前端可视化框架关键技术研究.pdf
06-22
基于组件化Web GIS前端可视化框架关键技术研究 在Web GIS技术的发展中，地理数据可视化作为空间数据分析的手段非常重要。然而随着geo-data的爆炸式增长和地理空间数据分析需求的增加，传统的地理数据可视化方法受到...
Vue关于组件化开发知识点详解
10-15
Vue.js 的组件化开发是其核心特性之一，它允许开发者将UI拆分成可复用的模块，从而提高代码的可维护性和效率。下面将详细讲解Vue组件化的关键知识点： 1. **全局组件注册**：Vue.component()方法用于全局注册组件，...
组件化开发实战代码.zip
06-13
10. **版本控制与协作**：在团队开发中，组件化可以简化代码合并和版本控制。通过合理的分支策略，开发者可以并行开发不同的组件，减少冲突。 通过"组件化开发实战代码.zip"中的源码，我们可以深入理解如何在实际...
组件化Demo
08-13
组件化是一种软件开发技术，它将应用程序分解为可重用、独立且互操作的模块，每个模块都负责特定的功能。这种技术在IT行业中，尤其是在Android和iOS应用开发中被广泛应用，因为它可以提高代码的可维护性、可扩展性和...
flask文件发送与js前端接收
plan_jok的博客
11-19 2555
flask后台文件发送 try: # 文件数据处理 res = export_all_files_list() # 通过response封装数据 response = make_response(res) # 设置响应信息 response.headers['content-type'] = 'application/octet-stream;charset=utf-8' response.he
less 和less-loader安装问题
plan_jok的博客
11-10 1025
vue-cli和less-loader的某些版本存在冲突，建议遇见时指定less-loader进行强制安装 npm install less --save -dev npm install less-loader --save -dev 或者 npm install less-loader@版本号 --save -dev -force
axios封装request配置
plan_jok的博客
11-11 918
import axios from 'axios' import Qs from 'qs' //axios的get方法中使用params时对于js数组类型的参数的默认操作比较诡异，会使得参数名后带上'[]'字符串，可以使用qs自带的 arrayFormat 参数配置解决这个问题 export function request(config) { const service = axios.create({ headers: {'content-type': 'application/json
keep-alivevue 组件生命周期
最新发布
06-07
1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2. created：实例创建完成后被立即调用。在这一步，实例已经完成了数据观测 (data observer)，属性和方法的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值