1.什么是组件组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的不同：2.组件化与模块化 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用3.组件定义方式 全局定义 ①使用Vue.extend配合Vue.copmpone...
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。全局组件注册方式：Vue.component(组件名,{方法})eg:<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1"><my-component><...
-组件的使用 <!-- 1、父组件中引入组件 import Home from "./components/Home"; 2、注册组件 components:{‘v-home‘:Home,}, 3、使用组件 <v-home></v-home> --> -路由及组件跳转<!--1、安装并保存npm install vue-router --save2、在main.js里引入并使用import VueRouter from ‘vue-router‘Vue.use(VueRouter)3、在main.js里路由配置 1.创建组件 引入组件 import Router from "./components/06...
Vue组件化开发（二）Vue之传递数据父组件把数据传递给子组件可以通过props属性，来将父组件的数据传递给子组件，传递数据的三个步骤：step 1:在父组件中调用子组件，在组名处，使用给标签属性赋值的方式往下传递数据<template><div id="father"><son :mynum="father_num" title="我是father组件的num"></son></div>
</template># 上面表示父组件father在调用子组件son子组件的时候，一共传递了两个参数
如果传递的数据是一个变量，...
阅读目录一、为什么组件很重要二、Vue里面的组件基础知识1、组件的概念2、组件原理3、组件使用三、封装自己的Component1、使用Component封装bootstrapTable2、封装select3、查看其他Vue框架源码四、总结 正文前言：转眼距离上篇 JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查） 已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这...
在vue中通过切换不同的组件来达到页面的切换在组件分为三个部分第一个部分：<template></template>这一部分是用来写关于HTML的代码的，而且只能有一个根元素错误的写法：<template><div></div><div></div>
</template>这里就有两个跟元素div，是错误的写法。正确的写法：<template> <div class="father"> <div class="son"></div> <div class="son"></div> </div></template> 第二部分：<script></script>结构...
Vue组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。组件的注册// html 代码
<div id="app"><my-component></my-component>
</div>
// js 代码
Vue.component(‘my-component‘, {template: ‘<div>A component!</div>‘
})
var app = new Vue({el: ‘#app‘,data: {}
});全局注册// html 代码
<div id="app"><my-component></my-component>
</div>
// js 代码
...
一、vue-draggable 安装使用npm地址：https://www.npmjs.com/package/vuedraggable二、表格拖拽使用， 举例： <table ><thead><tr><th>视频ID</th><th>名称</th><th>作者</th><th>创建时间</th><th>时长</th><th>操作</th></tr></thead><draggable element="tbody" v-model="tableData"><tr v-for="(item,index) in tableData" :key="‘item‘+index"><td>{{item.videoId}}</td><td>{{item.name}}</td><td>{{item.author.na...
需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><div class="accept-container"><div class="go-back" v-show="goBackState" @click="goBack">GoBack</div>
<ul><li v-for="item in webAddress"><a :href="item.link" target="showHere" @click="showIframe">{{item.name}}</a></li>
</ul>
<iframe v-show="iframeState" id="show-iframe" frameborder=0 name="showHere" scrolling=auto src=""></iframe></...
最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 后来在使用vuex的时候一直报“[vuex] unknown mutation type: changeCity”，才发现在store文件中将mutations写在了state里面，...
<!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>Document</title></head>
<script src="./vue.js"></script>
<body><div id="app"><my-com></my-com> <!--直接写生组件名称就可以将template:‘<div> hello World </div>‘ 中的文字显示出来 --></div></body>
</html> //创...
模块化开发是保证每个文件都是独立的模块，不受外界干扰，提高性能，便于后期维护与团队开发。 可以引入官网的模块，也可以自定义模块。使用require()引入需要使用的模块，自定义的模块在使用之前需要通过module.exports 暴露出去。通过npm init -y 下载package.json文件管理维护模块，其中 main 为入口文件 ，dependencies 指定项目开发与上线需要的模块 ，devdependeciens 指定项目开发中需要而上线时不需要的模块。var as=requ...
组件：一个包含Html,css,js独立的集合体，这样的集合体可以完成页面结构的代码复用 可以相对于理解成封装承一个小模块，能够重复方便使用.组件分为 根组件，全局组件，局部组件 根组件: 所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会有一个根组件 全局组件： 不用注册，就可以称为任何一个组件的子组件 局部组件： 必须注册，才可以称为注册该局部组件的子组件 局部组件创建一个局部组件1.创...
1.子组件给父组件传递数据
<body><div id="app">父组件：{{total}}<br><son-component v-bind:total="total"></son-component></div><script>Vue.component('son-component',{template:'<div>子组件：{{total}}+{{num}}={{add}}</div>',props:{total:Number},data(){return {num:10}},computed:{add:function(){return num=this.total+this.num}}})var app=new Vue({el:'#app',data:{total:1},})</script>
</body>通过v-bind动态绑...
<template><div class="stars"><div v-for="(item,ind) in num" :key="ind" :class="{‘on‘:ind<=cur}" @mouseover=‘enter(ind)‘@mouseleave="out()"@click="ok(ind)"></div></div>
</template>
<script>export default{name:‘Star‘,data(){return{num:5,cur:-1,flag:false}},methods:{enter(ind){if(!this.flag){this.cur=ind;}},out(){if(!this.flag){this.cur=-1;}},ok(ind){this.flag=true;this.cur=ind; }}}
</script>
<...
