Vue.js
lucky芬
聚沙成塔,水滴石穿,努力到了自然会有期待的结果,做一个持之以恒的程序媛~(美丽与智慧并存,我的理想,嘻嘻)
展开
-
五个小案例带你学习火热的Vue.js
vue.js背后的理念是提供尽可能简单的API,在视图(HTML)和模型(javascript对象)创建实时的双向绑定机制。正如你在下面的例子中所看到的,这个框架使用起来非常的高效且不影响任何功能。开始起步安装Vue.js最简单的方式是用一个标签在HTML的body后边。整个框架位于一个JavaScript文件,您也可以从官方网站下载或直接通过CDN引入:如果你想在Node.js项转载 2017-01-06 16:17:43 · 7941 阅读 · 2 评论 -
vue标签切换
<!--这里是html结构--><div id="app"> <ul> <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab转载 2018-07-23 21:33:58 · 890 阅读 · 0 评论 -
组件切换练习(vue练习例子3)
<!DOCTYPE html><html><head> <title>组件切换练习</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></scr转载 2018-02-24 17:21:01 · 762 阅读 · 0 评论 -
vue各种示例展示
注意:以下所有示例基于vue 2.x、Vuex 2.x、vm.$mount()-挂载[html] view plain copy<body> <div id="a"> </div> </body> <script> var A = Vue.extend({ template:...转载 2018-03-16 14:51:11 · 3847 阅读 · 1 评论 -
键盘(vue练习例子)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">原创 2018-02-23 18:13:47 · 811 阅读 · 0 评论 -
组件(vue练习例子)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">原创 2018-02-23 17:51:34 · 1133 阅读 · 0 评论 -
计算属性(vue练习例子)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">原创 2018-02-23 17:36:36 · 664 阅读 · 0 评论 -
animation(vue练习例子)
vue动画效果:1、动画效果的关键是需要用transition或transition-group给包起来;<br/>2、需要设置name值,然后对应css要设置起来,css样式头部要跟上前面设置的name前缀<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&am原创 2018-02-23 17:08:14 · 1249 阅读 · 0 评论 -
多选功能(vue练手例子)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多选功能</title> <style type="text/css"> *原创 2018-02-23 15:00:56 · 1757 阅读 · 1 评论 -
Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star。 http://www.cnblogs.com/opendigg/p/6513510.html UI组件element ★9305 - 饿了么出品的Vue2的web UI工具套件V转载 2018-01-30 10:34:55 · 1005 阅读 · 0 评论 -
入门 Vue.js会碰到的常见问题
入门 Vue.js会碰到的常见问题经过了上一篇《使用Vue-cli构建Vue项目后》,已经可以搭建出了一个空白的Vue项目了。我们现在就可以阅读Vue官方的手册,照着他写一些简单的例子。搭建好Vue项目后我做的第一件事情就是先把Vue官网的起步例子都手写一遍下来跑一篇,然后记录下了一些新手会遇到的一些常见问题千万不要复制代码,要自己手写。空格问题,导致编译出错。Vu转载 2018-01-30 10:25:58 · 427 阅读 · 0 评论 -
【Vue】详解Vue组件系统
目录Vue渲染的两大基础方式new 一个Vue的实例注册组件并使用注册组件全局注册局部注册通过new创建Vue实例, 全局注册组件,局部注册组件三者的使用频率(场景)Vue中的props数据流props取值的方式props内写的是驼峰命名法,为什么在HTML(模板)中又用了短横线命名法?使用v-bind的必要性:props不绑定的前提下,只能被作为转载 2017-12-12 14:10:10 · 332 阅读 · 0 评论 -
vuejs点击class变化
Vue.js小demo .static{ width: 100px; height: 60px; margin:30px auto; display: inline-block; cursor: pointer; } .class-a{ background: lightpink; } .class-b{ background: #eee; }原创 2017-04-27 13:46:26 · 11448 阅读 · 1 评论 -
vuejs标签切换demo
运行后效果如下: Vue.js小demo h3{ margin-top: 10px; } #content{ width: 400px; margin: 30px auto; background: #eee; padding:10px; overflow: hidden; } .nav{转载 2017-04-27 13:20:28 · 4126 阅读 · 2 评论 -
Vue.js表格增加删除demo
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。下面的例子会用到bootstrap.min.css以及vue.js,都可以从网上下载。 Vue.js小demo原创 2017-01-06 15:27:34 · 12800 阅读 · 1 评论 -
vue.js添加删除内容demo
运行效果如下:demo.add-text{ width:200px; height: 28px; padding:0 10px;} .con{ width: 100%; overflow: hidden; } .con li{ width:100%; height: 30px; } .con l原创 2017-04-27 10:20:47 · 4212 阅读 · 0 评论 -
vue百度地图组件
1.首先在 build.js下面的webpack.base.conf.js文件中添加:externals:{ "BMap":"BMap" },和entry:{}平级,在其后面添加2.在index.html中引入用到的地图js和css<link rel="stylesheet" href="http://api.map.baidu.com/library/Sea...原创 2018-07-24 16:21:57 · 8416 阅读 · 3 评论