Vue.js
抹茶Demo
一个进阶中的前端小可爱~
展开
-
vue--过滤器
js代码:/** * Created by luoxy on 2018/5/27. */Vue.filter("currency",function(val,unti){ val = val || 0; unti = unti || "元"; return val + unti;})Vue.filter("len",function(val,m){ ...原创 2018-05-27 17:47:09 · 113 阅读 · 0 评论 -
Vue-router--- 安装及基本配置
js代码:/** * Created by luoxy on 2018/5/28. */var routes = [ //定义规则 { path:'/', //使用'/'符号代表首页路径 component:{ template:'<div><div>首页</div></div>'...原创 2018-05-29 10:48:44 · 242 阅读 · 0 评论 -
vue.js----注册组件
组件Vue.component('my-component-name', { /* ... */ })命名规范: 强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。使用 kebab-case 当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab...原创 2018-05-28 19:43:52 · 147 阅读 · 0 评论 -
Vue.js实战系列---饿了么(2)数据的mock(模拟后台)
mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就可以新版webpack.dev.conf.js配置如下:打开bulid文件夹下的webpack.dev.conf.js在下条语句后添加代码const portfinder = r...原创 2018-06-04 19:10:05 · 1113 阅读 · 0 评论 -
Vue.js实战系列---图标字体制作(svg格式)
如何将svg格式的图标文件转换成html和css代码直接使用呢?(1)进入https://icomoon.io/,点击icoMoon APP按钮 如图所示(2)跳转到如下界面,图片上有三个小步骤(3)跳转到如下界面,图片有两个小步骤(4)下载后,解压,查看文件结构...原创 2018-06-04 18:11:41 · 488 阅读 · 0 评论 -
vue.js---混合mixins
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 例子:// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function...转载 2018-05-28 11:59:51 · 203 阅读 · 0 评论 -
vue.js---自定义指令 (配置传参及修饰符)
钩子函数的属性binding:一个对象,包含以下属性:name:指令名,不包括 v- 前缀。value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。//等于号后面的值oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression:字符串形式的指令表达式。例如 v-m...原创 2018-05-28 10:50:25 · 5983 阅读 · 4 评论 -
vue.js---自定义指令
注册一个指令:// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:<input v-focus>钩子函...原创 2018-05-28 10:15:05 · 233 阅读 · 0 评论 -
Vue---组件子父通信
js代码:Vue.component("balance",{ template:'<div><show @showbalance="show_balance"></show><div v-if="show">余额¥98</div></div>' ,//监听自定义事件原创 2018-05-27 15:29:26 · 135 阅读 · 0 评论 -
vue--平行组件通信
js代码:/*平行组件通信*/var event = new Vue();Vue.component("me",{ template:'<div>我说:<input type="text" v-model="mesaid" @keyup="onChange">{{mesaid}}</div>', data:function(原创 2018-05-27 16:30:52 · 482 阅读 · 0 评论 -
Vue-router---导航钩子(导航守卫)
ps:“导航”表示路由正在发生改变。全局守卫你可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resol...原创 2018-05-31 11:14:40 · 767 阅读 · 0 评论