-组件的使用 <!-- 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的发展也是异常迅猛，不过这...
子组件<template><a class="getvalidate":class="{gray: (!stop)}"@click=‘clickHandler‘>{{ stop ? ‘获取验证码‘ : `（${mytimer}）秒后重新获取` }}</a> </template><script> export default {name: ‘getvalidate‘,data () {return {stop : true,mytimer: this.timer,Interval: null,}},methods: {clickHandler (e) {if (this.stop) { // 调用外部绑定的倒计时，并且给它开关this.$emit(‘click‘, this.startTimer);}},up...
在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>结构...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/dist/vue.js"></script><script> //父亲调用子组件的方法，子组件暴露一些方法让父组件调用 // ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例 let vm=new Vue({ el:"#app", template:‘<child ref="c"></child>‘,...
<template><div><Child1 /><Child2 /></div> </template> <template><div @click="child1Click">child1</div> </template> // child1 {data() {return {}},methods: {child1Click() {this.bus.$emit(‘changeChildValue‘) // 触发changeChildValue事件}} } <template><div >{{value}}</div> </template> // child2 {data() {return {value: ‘1‘}},created() {this.changeValue();},methods: {changeValue() {this.bus.$on(‘cha...
一、表单输入绑定（v-model 指令） 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 详细用法参见官方文档：https://cn.vuejs.org/v2/guide/forms.html二、局部组件和全局组件1、了解根组件template模板的优先级大于el，如下方式验证：<div id="app">{{ msg }} </div> <script>// 如果仅仅是实例化vue对象中 既有el 又有template，// 如果template中定义了模板的内容 那么template模板...
工程结构 启动工程npm run devTodoList.vue<!--模板--><template><div><div><input class="item" v-model="inputValue"/><button @click="submit">提交</button><ul><todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="mydelete"></todo-item></ul></div></div></template><script> import TodoItem from ‘./components/TodoItem‘// 此处用来写逻辑,必须空出一行去写export defaul...
Vue指令1、v-once指令 单独使用，限制的标签内容一旦赋值，便不可被动更改（如果是输入框，可以主动修改）<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title></title> </head> <body><div id="app"><input type="text" v-model="msg"><input type="text" v-model="msg"v-once> #因为是输入框，一旦赋值，只可主动更改<p>{{msg}}</p><p v-once>{{msg}}</p> #一旦赋值，便不可更改</div> </body> <script sr...
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里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。这里我用的webpack-simple这个简单版本的脚手架为例，安装就不啰嗦了，直接进入正题首先看下目前的项目结构：webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明import Vue from ‘vue‘ import App from ‘./App.vue‘// 引入element-ui组件 impor...
好久不见呀，这两年写了很多很多东西，也学到很多很多东西，没有时常分享是因为大多都是我独自思考。明年我想出去与更多的大神交流，再修筑自己构建的内容。 有时候我会想：我们遇到的问题，碰到的界限，是别人给的还是我们自己给的？其实我觉得自己选择的方向是对的，但是有时难免会怀疑，是否有人和我在做一样的事情，我希望找到有趣的伙伴，做一些有趣的事情。Vue 中数据流组件 又将年终了，该做年终总结了呀。。最近花了一...