Vue.js进阶
<!-- 动态Props -->
<!DOCTYPE html> <html lang='utf-8'> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> * { font-family: "microsoft yahei"; } </style> </head> <body> <div id="vm"> <input type="text" v-model="parentMsg" /> <br /> <!-- 组件里声明驼峰式,这里要用短线 --> <child v-bind:my-message="parentMsg"></child> </div> <script> Vue.component('child', { // 声明 props props: ['myMessage'], // 选项 template: '<span>{{ myMessage }}</span>' }); new Vue({ el: '#vm', data: { parentMsg: '父信息默认值' } }); </script> </body> </html>
v-on绑定自定义事件
<!DOCTYPE html> <html lang='utf-8'> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> * { font-family: "microsoft yahei"; } </style> </head> <body> <!-- v-on绑定自定义事件 --> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1; // 触发事件 this.$emit('increment'); } } }); new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1; } } }); </script> </body> </html>
多个组件的过渡
<!DOCTYPE html> <html lang='utf-8'> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <script src="velocity.min.js"></script> <style> * { font-family: "microsoft yahei"; } .component-fade-enter-active, .component-fade-leave-active { transition: opacity .3s ease; } .component-fade-enter, .component-fade-leave-active { opacity: 0; } </style> </head> <body> <p>多个组件的过渡</p> <div id="example"> <input type="radio" name="myradios" value="A" v-on:click="showCont('v-a')" id="A" checked="checked" /> <label for="A">A</label> <input type="radio" name="myradios" value="B" v-on:click="showCont('v-b')" id="B" /> <label for="B">B</label> <transition name="component-fade" mode="out-in"> <!-- 绑定了view数据 --> <component v-bind:is="view"></component> </transition> </div> <script> new Vue({ el: '#example', data: { view: 'v-a' }, components: { 'v-a': { template: '<div>Component A</div>' }, 'v-b': { template: '<div>Component B</div>' } }, methods: { showCont: function (msg) { this.view = msg; } } }); </script> </body> </html>
Vue.js进阶的更多相关文章
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
- Vue.js 整理笔记
以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整 ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- vue.js+boostrap
vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...
- 走进Vue时代进阶篇(01):重构电商购物车模块
前言 从这篇文章开始,我准备给大家分享一些关于Vue.js这门框架的技巧性系列文章,正好我们公司项目中也用到了Vue.所以,教是最好的学.进阶篇比较适合于二三线城市,还在小厂打拼的童鞋们.欢迎你们跟着 ...
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
随机推荐
- Python3 多线程下载代码
根据http://www.oschina.net/code/snippet_70229_2407修改而来的增强版.貌似原版源自Axel这个多线程下载工具. ''' Created on 2014-10 ...
- ListView和ScrollView冲突
当ListView放在ScrollView中的时候,无论你设置高度为 match_parent(填充父窗体)和wrap_content(包裹内容)都只显示一行,这是你把ListView放在Linear ...
- SecureCRT自动备份脚本-华为
# $language = "VBScript" # $interface = "1.0" Sub Main Const ForReading = 1, For ...
- SQL Server 存储过程自定义生成ID号
* FROM sys.tables WHERE name=N'EmployeeNo_Identity') DROP TABLE EmployeeNo_Identity GO CREATE TABLE ...
- 【实(dou)力(bi)首(mai)发(meng)】第四次CCF软件能力认证题解
这次的题总体上相对前三次偏简单.由于实力有限,就分析前四题. 试题编号: 201503-1 试题名称: 图像旋转 时间限制: 5.0s 内存限制: 256.0MB 问题 ...
- [linux]树莓派入手体验和系统安装
背景 一直想捣鼓点什么东西.当看到树莓派的时候,就是它了. 树莓派可以安装Linux系统,而我在工作当中,可以说Linux是一半工作环境.树莓派真是个好东西,这个东西应该在我学习linxu/Unix的 ...
- js闭包和回调
1.闭包 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.闭包有三个特性: 1.函数嵌套函数; 2.函数内部可以引用外部的参数和变量; 3.参数 ...
- nginx 版本介绍
Nginx官网提供了三个类型的版本Mainline version:Mainline 是 Nginx 目前主力在做的版本,可以说是开发版Stable version:最新稳定版,生产环境上建议使用的版 ...
- 一些CSS常见的小问题小笔记
父元素与子元素之间的margin-top问题: 给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值 解决方法: 1.修改父元素的高度,增加padding-to ...
- day4----生成器,迭代器
迭代器,生成器,装饰器 1.生成器 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要 ...