- 浏览: 2197950 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1240)
- mac/IOS (287)
- flutter (1)
- J2EE (115)
- android基础知识 (582)
- android中级知识 (55)
- android组件(Widget)开发 (18)
- android 错误 (21)
- javascript (18)
- linux (70)
- 树莓派 (18)
- gwt/gxt (1)
- 工具(IDE)/包(jar) (18)
- web前端 (17)
- java 算法 (8)
- 其它 (5)
- chrome (7)
- 数据库 (8)
- 经济/金融 (0)
- english (2)
- HTML5 (7)
- 网络安全 (14)
- 设计欣赏/设计窗 (8)
- 汇编/C (8)
- 工具类 (4)
- 游戏 (5)
- 开发频道 (5)
- Android OpenGL (1)
- 科学 (4)
- 运维 (0)
- 好东西 (6)
- 美食 (1)
最新评论
-
liangzai_cool:
请教一下,文中,shell、C、Python三种方式控制led ...
树莓派 - MAX7219 -
jiazimo:
...
Kafka源码分析-序列5 -Producer -RecordAccumulator队列分析 -
hp321:
Windows该命令是不是需要安装什么软件才可以?我试过不行( ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
hp321:
Chenzh_758 写道其实直接用一下代码就可以解决了:JP ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
huanghonhpeng:
大哥你真强什么都会,研究研究。。。。小弟在这里学到了很多知识。 ...
android 浏览器
vue组件分为全局组件、局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等。
详情请看vue的API: http://v1-cn.vuejs.org/guide/components.html
一、简单的组件
二、给组件添加事件
三、vue动态组件--选项卡
四、路由的嵌套
五、$route的参数
- Vue.extend 创建一个组件构造器
- template:'' 组件要显示的内容
- component('',); 注册组件,接收两个参数,第一个参数用来使用的标签,第二个参数标识要显示内容的构建器
详情请看vue的API: http://v1-cn.vuejs.org/guide/components.html
一、简单的组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iaiai - qq:176291935</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <aaa></aaa> </div> </body> <script type="text/javascript"> var AAA = Vue.extend({ //创建一个组件构造器 template:'<strong>123</strong>' //组件要显示的内容 }); //var a = new AAA(); 相当于又new了一个Vue,具有它的所有属性(一般不用这种方法) Vue.component('aaa',AAA); //注册组件 new Vue({ el:'#box', data:{ bSign:true } }) </script> </html>
二、给组件添加事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iaiai - qq:176291935</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <aaa></aaa> </div> </body> <script type="text/javascript"> Vue.component('aaa',{ data(){ return { msg:'我是p标签' }; }, methods:{ sj:function(){ alert(111); } }, template:'<p @click="sj()">{{msg}}</p>' //接收的data值必须是函数的形式,函数必须返回一个对象 }) new Vue({ el:'#box', data:{ }, }) </script> </html>
三、vue动态组件--选项卡
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iaiai - qq:176291935</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body id="box"> <input type="button" @click="s='suning'" value="选项卡1" /><!--is后面跟着组件的名称 --> <input type="button" @click="s='saning'" value="选项卡2" /> <comment :is='s'></comment> </body> <script type="text/javascript"> new Vue({ el:'#box', data:{ s:'suning' }, components:{ 'suning':{ template:'<p>选项卡1</p>' }, 'saning':{ template:'<p>选项卡2</p>' } }, }) </script> </html>
四、路由的嵌套
<html> <head> <title>iaiai - qq:176291935</title> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/vue-resource.js" ></script> <script type="text/javascript" src="js/vue-router.js" ></script> </head> <style> .v-link-active{ color: red; } </style> <body> <div id="box"> <ul> <li> <a v-link="{path:'/home'}">首页</a> </li> <li> <a v-link="{path:'/news'}">新闻</a> </li> </ul> <div> <router-view></router-view><!-- 展示内容--> </div> </div> <template id="home"> <h3>home</h3> <a v-link="{path:'/home/login'}">登陆</a> <a v-link="{path:'/home/reg'}">注册</a> <router-view></router-view> </template> <template id="news"> <h3>新闻</h3> <div> <a v-link="{path:'/news/detail/001'}">新闻001</a> <a v-link="{path:'/news/detail/002'}">新闻002</a> </div> <router-view></router-view> </template> <template id="detail"> <!--{{$route | json}}--> {{$route.params | json}} <!-- 关于$route请看五,$route的参数 --> </template> </body> <script> var App = Vue.extend(); var Home = Vue.extend({ template:'#home' }); var News = Vue.extend({ template:'#news' }); var Detail = Vue.extend({ template:'#detail' }); var router = new VueRouter(); router.map({ 'home':{ component:Home, subRoutes:{ 'login':{ component:{ template:'你点击了登陆' } }, 'reg':{ component:{ template:'你点击了注册' } } } }, 'news':{ component:News, subRoutes:{ '/detail/:id':{ component:Detail } } }, }); router.redirect({ '/':'/home' }) router.start(App,'#box'); </script> </html>
五、$route的参数
- $route中包含路由的其他信息
- $route.params 得到当前的参数
- $route.path 得到当前的路径
- $route.query 得到数据
发表评论
-
小程序textarea完美填坑
2020-07-07 16:09 522相信做微信小程序的码友们都被textarea这个原生组件坑过 ... -
微信小程序页面跳转 的几种方式
2019-09-22 16:04 798最近在做微信小程序, ... -
vue import 传入变量
2019-08-01 13:59 987在做动态添加component的时候,传入变量就会报错,出现以 ... -
vue配置font-awesome5的方法步骤
2019-07-25 18:10 487用yarn更新 yarn add @fortawesome ... -
在idea里使用vue,设置tab缩进为4
2019-01-21 15:32 2290本人通过vue-cli搭建vue项目后,编写代码时发现tab缩 ... -
为什么要使用computed而不是data获取vuex中的state
2018-09-27 19:05 1597最近在学习vuex时,照着官网最基本的 Vuex 记数应用示例 ... -
理解vuex -- vue的状态管理模式
2018-08-11 16:46 891vuex是什么? 先引用vuex ... -
Javascript(es2016) import和require用法和区别
2018-08-10 16:19 543写个简单js文件,假设名字为:lib.js 。 假设内容如下: ... -
vue中修改了数据但视图无法更新的情况
2018-07-02 18:31 2150我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此 ... -
Electron安装 for mac
2018-03-08 09:29 1323第一次用Electron这个安 ... -
初探和实现websocket心跳重连
2017-06-28 15:20 1777心跳重连缘由 在使用websocket过程中,可能会出现网络 ... -
「Javascript」搞定JS面试——跨域问题
2017-03-15 13:50 606一、什么是跨域? 只要 ... -
js Swiper移动设备触控滑块的框架
2016-08-29 16:20 657官方:http://www.swiper.com.cn/ -
CSS3控制文字只显示一行超出部分显示省略号
2016-08-08 16:43 1110在编写网页的时候,我 ... -
node js搭建和实例
2016-06-30 20:13 953我的电脑是mac电脑,所 ... -
jquery.bootstrap.teninedialog.v3.js使用说明
2015-12-27 12:37 834http://www.xnwai.com/teninedial ... -
好用的前端框架(更新中)
2015-12-19 08:44 1297Bootstrap https://github.com/tw ... -
Data URI 和 MHTML
2013-07-06 14:07 1108Data URI Data URI是由RFC 2397定义的 ... -
Web 前端开发者必知的9 个 CSS3 属性
2012-09-25 17:08 1137CSS可以改进网站的设计 ... -
css 设置元素背景为透明
2012-08-23 12:34 1389要设置某一元素的背景为透明,在 chrome 、firefox ...
相关推荐
"ddvuecomponent订单来了的Vue公共组件库"是一个专门针对Vue.js框架开发的组件集合,旨在提高开发效率,提供统一的界面风格和交互体验。Vue.js是一个轻量级且功能强大的前端JavaScript框架,它以其易用性、灵活性和...
总结,Vue组件化编程让开发者能够以模块化的方式组织和管理代码,提高开发效率和代码质量。通过单文件组件,我们可以清晰地看到组件的全貌,同时利用组件的复用性和嵌套性构建出灵活多变的用户界面。理解和熟练运用...
国家标记作为Vue组件 Vue 3支持 从2.0.3版开始,此组件同时支持Vue2和Vue3。 为了将其与Vue 3配合使用,请按如下所示安装vue-country-flag-next软件包: npm install vue-country-flag-next Vue 2支持 如何安装 ...
2. **Vue组件**: 组件是Vue中的核心概念,它们是可复用的代码单元,可以包含HTML、CSS和JavaScript。通过组件,开发者可以将UI拆分为独立、可复用的部分,提高代码复用率和可维护性。组件可以通过props接收外部...
【标题】中的“京东风格的移动端 Vue 组件库”指的是一个基于 Vue.js 框架开发的用户界面组件集合,其设计风格遵循了京东的UI规范,为开发者提供了构建移动端应用的标准组件。Vue.js 是一个轻量级的前端框架,以其...
组件库则是一系列预定义的、经过精心设计和测试的组件集合,开发者可以快速引入并利用这些组件来构建用户界面。对于移动应用而言,组件库需要特别关注响应式设计和性能优化,以确保在不同设备上流畅运行。 这个个人...
用于协作集合的Nextcloud Vue组件 为Nextcloud 16中引入的Nextcloud项目提供vue组件,以集成到应用程序中。 Projects是为面向用户的元素命名的,而collections在内部使用是因为它后来被重命名了。安装npm install --...
立方体组件库CubeEX是专为Vue.js 2.0框架设计的一款强大的UI组件集合,旨在简化前端开发过程,提高开发效率。Vue.js是一个轻量级但功能强大的渐进式JavaScript框架,它允许开发者通过组件化的方式构建复杂的应用程序...
本篇文章主要介绍了如何通过npm引用的Vue组件,以及如何创建并发布一个名为vue-dialog的弹出层组件。 首先,要创建一个Vue组件,需要使用`Vue.extend`方法。这是一个工厂函数,它接受一个包含组件选项的对象,返回...
countries-cities组件npm install --save vue-countries-cities 下载后,vue-country-cities软件包将准备在您的vue.js应用程序中使用用法导出到main.js以全局定义vue-country-cities组件。 import ...
首先,Vue的核心特性包括数据绑定(Data Binding)、指令系统(Directives)、组件化(Component System)等。数据绑定允许开发者将HTML元素与JavaScript对象的数据属性连接起来,实现视图与数据的实时同步。指令...
在`main.js`中,只需引入这个全局组件集合: ```javascript import GlobalComponents from './global/index' Vue.use(GlobalComponents) ``` 这样,所有自定义组件都会自动注册到Vue实例中,无需逐一引入。 `Vue....
bpit / vue不是组件UI套件,我们没有这些组件的一致主题,只是一个集合bpit-vue简介什么是bpit / vue? bpit / vue不是组件UI工具包,我们没有这些组件的一致主题,它只是效果组件的集合。 bpit / vue是初学者学习...
它以其简洁、优雅的设计风格,以及全面、易用的组件集合而受到广大开发者喜爱。Element UI提供了包括表格、按钮、输入框、通知提示等在内的众多基础和高级组件,覆盖了日常开发中的各种需求。其优点在于组件化设计,...
"vue-two-simple-icons"正是利用了这种组件化思想,将图标封装为独立的Vue组件,方便在项目中直接引用。 这个库的核心概念是将图标作为自定义Vue组件来使用,例如 `<simple-icon name="example"></simple-icon>`。...
Vue-color是一个专门为Vue.js设计的颜色选择器组件集合,它包含了多种颜色选择器,如Sketch、Chrome、Photoshop等常见设计软件的色彩选择样式。这些组件可以轻松地集成到Vue项目中,为用户界面增添色彩编辑和选择的...
Vue UI框架中的每个组件都是一个Vue Component,具有自己的状态、方法和生命周期。通过组件化,开发者可以将复杂的UI拆分成更小、更易于管理的部分。 在“vue-ui-framework-master”这个压缩包中,可能包含了该集合...
Vue表单组件 该软件包基于 CSS框架为Vue2提供了简单的表单包装器。 该软件包提供了多种组件。 这些是: 标准输入框 文字区 选择清单 拨动开关 文件浏览器 安装 您可以通过运行以下命令来安装此软件包: npm ...
`vue-transition-components` 是一个专门为Vue.js设计的过渡组件集合,它提供了一系列预定义的过渡效果,使开发者能够轻松地在项目中实现丰富的动画效果。 ### 安装与使用 要将`vue-transition-components`添加到...
$children 属性返回的是一个组件集合,如果你清楚地知道子组件的顺序,你也可以使用下标来操作。例如: ```javascript for (let i = 0; i $children.length; i++) { console.log(this.$children[i].msg); } ``` ...