vue
文章平均质量分 79
啊哈前端
web前端
展开
-
vue2.X基础知识五之非父子组件通信
在实际业务中,除了父子组件通信外,还有很多非父子组件通信的场景,非父子组件一般有两种,兄弟组件和跨多级组件。1、中央事件总线(bus)处理任何组件通信 在vue2.x中推荐使用一个空的Vue实例作为中央事件总线(bus),也就是一个中介。例如:<div id="app"> {{ message }} <component-a></compon...转载 2018-05-18 18:05:17 · 314 阅读 · 0 评论 -
vue-router嵌套子路由实际使用
前端路由的定义在spa流行之前,前端路由是没有的;而像java之类的后台语言很早就有了,后端路由一般就是定义一系列的访问地址规则,路由引擎根据这些规则匹配并找到对应的处理页面,然后将请求转发给页面进行处理。在spa应用中,前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种做法,一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航;...原创 2019-05-03 16:26:05 · 25236 阅读 · 2 评论 -
vue2.X基础知识八之vue-router路由
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种做法,一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航;二是使用HTML5的window.history功能,使用URL的Hash来模拟一个完整的URL。将单页程序分割为各自功能合理的组件或者页面,路由起到了一个非常重要的作用。它就是连接单页程序中各页面之间的链条。一、在vue中...转载 2018-07-02 18:41:13 · 616 阅读 · 0 评论 -
vue2.X基础知识七之$nextTick
<div id="app"> <div id="div" v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容</button></div><script&转载 2018-05-26 16:50:55 · 1285 阅读 · 0 评论 -
vue2.X基础知识六之slot内容分发
当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot,这个过程叫做内容分发。1、slot内容分发在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot(插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。例如:<div id="app"> <child-compo...转载 2018-05-25 00:27:21 · 340 阅读 · 0 评论 -
vue2.X基础知识四之组件及父子组件通信
一、组件注册1、在Vue中全局注册//my-component就是注册的组件自定义标签名,推荐使用小写加减号分割的形式命名//template的DOM结构必须被一个元素包含(这里是div),否则无法渲染Vue.component('my-component', {template: '<div>我是组件</div>'}); var app = new Vue({...转载 2018-05-08 22:05:35 · 1377 阅读 · 0 评论 -
vue2.X基础知识三之简易购物车
先看下效果:为了方便起见,使用了table布局:<div id="app"> <table> <tr> <th>商品</th> <th>数量</th> <th>单价</th> <th&原创 2018-05-07 12:29:48 · 912 阅读 · 0 评论 -
vue2.X基础知识二之数据计算
1、filters过滤前端在展示后端传递过来的数据时,往往不能直接显示出来,需要经过一些转换,比如后端有个字段是datetime格式的,到了前端会发现是一个很奇怪的字符串,这个时候,通常需要写一个函数来格式化一下,在vue中,我们可以使用filter来增加一个函数用于格式化输出;这里我们以输入人民币,自动转换为美元为需求。例子如下:<div id="app"> <div v-...原创 2018-05-07 00:23:44 · 2537 阅读 · 0 评论 -
vue2.X基础知识一之初探vue及指令
首先,直接在html里引入官方的vue文件:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>html结构如下:<div id="app"> <!--输出data数据里的name值--> {{ name }}</div&原创 2018-05-06 12:45:11 · 524 阅读 · 0 评论 -
使用vue的slot插槽做母板组件
母板组件是啥?母板跟模板差不多,就是将一些重用性较高的页面结构抽离出来,封装到一个独立的组件里,以便于在各个项目中使用。比如后台管理,经典的头部,尾部,侧边栏与主要内容区域;我们就可以把这个结构封装成一个母板组件,今后只要写后台管理类的项目,就可以直接使用。下面具体来实现一下。实现一个后台管理的母板组件假设我们需要实现的是下面这张图的效果:母板组件命名为layer.vue;为了...原创 2019-05-03 16:36:13 · 848 阅读 · 0 评论