这里讲解一下Vue 官网的一个实例，Vue将数据遍历传递给多个组件，这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的，我们需要给组件传递不同的值，来实现不同的展现，实现代码的复用。 <!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>Vue实例：父组件给...
使用场景： 在Vue组件中点击某元素之外的地方移除该元素需求： 如上图所示，“用户列表”页面有三个Vue组件组成，分别是“菜单组件”，“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”，当我们点击“下拉菜单”以外的区域隐藏下拉菜单。 解决方法一： 出现“下拉菜单”的同时，建一个透明的遮罩层，然后只有“下拉菜单”可以点，点击遮罩层就隐藏。 缺点：z-index层数要控制好，还有就是如果点击其他功能按钮...
组件可以有自己的data，并且data必须是一个function。 在下面这个例子中，data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次，点击+1时出现了如下情况：data中的count属性影响到了所有实例。<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.css" rel="external nofollow" ><style type="text/css">#app{margin:...
说说Vue.js组件 什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。 one----全局组件引入写法：在项目的main.js中： 第一种，在m...
最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。代码如下： <template><div class="index"><!--header-bar></header-bar--><div style="margin:20px;"><div class="item"><p>住户名称:</p><p><input type="text" value="username" v-model="formStatus.username" placeholder="输入名称"></p></div><div class="item"><p>住户类型:</p><p><label v-for="(item, index) in zhuhuT...
Vuex使用单一状态树（一个对象就包含了全部的应用层级状态），它作为唯一数据源存在，每个应用仅仅有一个store实例。 单一状态树使得我们能够直接定位任一特定的状态片段，在调试过程中也能轻易地取得整个当前应用状态的快照。 在Vue组件中获得Vuex状态 Vuex的状态存储是相应式的。在Vue组件中获取Vuex状态总共有 五种 可行的方法。 1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态：（需要导入store组件） cons...
效果图：代码如下： <template><div class="checkbox"><div class="input"><p v-for="item in inputs"><span>自定义字段：</span><input type="text" v-model="item.val"></p><button @click="addInput()">添加字段</button><button @click="sub()">保存提交</button></div><h1>提交的信息： {{submsg}}</h1></div> </template> <script>export default {name: checkbox,data (){return {inputs:[],submsg:}},methods: {addInput (...
相信在使用Vue进行项目开发的时候很多人会接触到vue组件，最常见的就是我们使用的element-ui组件库，用起来确实很方便，大大减少了我们的开发时间。在一个项目中其实有很多可复用的代码块，如果我们可以把这些内容封装成一个组件就能够很方便的进行各种重复使用。 那么什么是Vue组件呢？它是vue.js最强大的功能之一，是可扩展的html元素，是封装可重用的代码，同时也是Vue实例，可以接受相同的选项对象(除了一些根级特有的选项) 并...
## 创建组件的3种方法# 第一种: + Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项 + Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.; 参数1:组件名字,参数2:组件构造器 注意: 模板template中只能有一个根节点 组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a; ## 第二种: + Vue.component(indexB,{模板})...
一、父组件向子组件传递数据 在 Vue 中，可以使用props向子组件传递数据。 子组件部分：这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。 如果需要从父组件获取 logo 的值，就需要使用props: [logo]在 props 中添加了元素之后，就不需要在 data 中再添加变量了 父组件部分：在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg然后就能将App.vue中 logoMsg 的值传给 header.vue 了：二、...
如下所示： import Vue from vuelet service = {url: http://host.xxxxx.com/xxx.php }service.ajaxReuqest = (url, options, type, fileFlag) => {for (const i in options) {if (!options[i] && options[i] !== 0 && (options[i].length && options[i].length > 0)) {delete options[i]}}let promise = new Promise((resolve, reject) => {if (fileFlag) {Vue.axios.post(url, options, {headers: {Content-Type: multipart/form...
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue 代码：<template><div class="tree"><ul v-if="treeData && treeData.length"><li v-for="(column,index) in treeData"><span class="root">{{column.name}}</span><ul v-if="column.children && column.children.length"><li v-for="(childrenColumn,index) in column.children"><span>{{childrenColumn.name}}</span><ul v-if="chi...
在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。 以bootstrap-vue中的Alert组件为例，分一下几步进行： 1、定义一个vue文件实现对原组件的再次封装 main.vue <template><b...
如何产生 在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下 //// vue 组件 <template><div class="box" data-v-33f8ed40></div> <template>//我用js在上面div标签中插入一个<p class=text>text goes here</p><script>export default {...mounted(){$(.box).html(<p class="text">text goes here</p>)},...} </script> //style ， vue组件scoped样式都会在选择器的最后加上data-v-***属性 <style scoped> //样式添加了s...
前言 2017年是Vue.js大爆发的一年，React迎来了一个强有力的竞争对手，王者地位受到挑战（撰写此文时github上Vue与React的star数量已逼近）。我们团队这一年有十多个大型项目采用了Vue技术栈，在开发效率、页面性能、可维护性等方面都有不错的收效。 我们希望把这些项目中可复用的功能组件提取出来，给后续项目使用，以减少重复开发，提高效率，同时也为了致敬前端界“出一个框架，造一遍轮子”的行规， 一个基于Vue 2的移动端UI组...