法净寺-CSDN博客

原创组件通信

从父组件向子组件传递数据使用props方法，Vue通信有大体上以下几种方式：组件关系可以分为：父子组件通信，兄弟组件通信、跨级组件通信。一、自定义事件当子组件需要向父组件传递数据时，就需要用到自定义事件。子组件用$emit()来出发事件，父组件用$on()来监听子组件的事件。父组件也可以在子组件自定义的标签上使用v-on来监听子组件触发的自定义事件。示例如下：<...

2018-12-21 14:08:54 142

转载 vue实现前进刷新，后退不刷新

项目中客户提出返回列表页需要缓存之前查询的数据，用到了以下方法解决了这个需求实现思路：注：demo中，index页面包含三个链接导航。page1-->page2-->page3.依次前进，每次前进到一个新页面都需要获取数据，而按下后退键后，从page3返回到page2，page2不再获取新数据，而是使用之前缓存的数据。从page2返回到page1时，page1不再获取新数据，而是...

2019-01-23 14:35:00 1444

原创 Vue按钮权限

最近做项目，客户要求做用户-角色-按钮权限，我是用自定义指令来实现的，代码如下：import Vue from 'vue'/**权限指令**/Vue.directive('has', { bind: function (el, binding) { debugger if (!Vue.prototype.$_has(binding.value)) { se...

2018-12-25 09:30:44 2926 1

原创使用props传递数据

基本用法组件不仅仅是把模板里的内容进行复用，更重要的是组件之间进行通信。通常父组件的模板中包含子组件，父组件正要向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作，这个正向传递数据的过程就是通过props来实现的。在组件中，使用选项props来声明需要从父组件接收的内容，props的值可以是两种，一种是字符串数组，一种是对象。<div id='app'&gt...

2018-12-20 15:19:34 3420

原创 Vue组件的使用

组建注册有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用。全局注册示例代码如下：Vue.component('my-component',{ //选项})my-component就是注册组件的名称，一般使用小写加减号的形式命名。要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以使用的形式来使用组建了。demo演示：&lt;div id='app'&gt;...

2018-12-19 15:52:16 135

原创 Vue循环指令v-for

基本用法当需要将一个数组遍历，或者将对象循环显示时，就会用到列表渲染指令v-for。它的表达式需结合in来使用，类似item in items的形式，看下面的示例：&lt;div&gt; &lt;ul&gt; &lt;li v-for="book in books"&gt;{{book.name}}&lt;/li&

2018-12-18 14:47:06 675

原创 v-bind及class与style的绑定

DOM元素经常会动态的绑定一些class类名或style样式，本篇文章将介绍使用v-bind指令来绑定class和style的多种方法。

2018-12-18 14:45:49 161

原创 Vue之计算属性computed

模板内的表达式常用于计算简单的运算，当其过长或者逻辑复杂时，会难以维护，Vue的计算属性就是用来解决这个问题的。什么是计算属性在模板中双向绑定一些数据或者表达式时，如果表达式过长或者逻辑过于复杂时，就会变得臃肿甚至难以阅读和维护，比如：&lt;div&gt; {{text.split(',').reverse().join(',')}}&lt;/div&gt;这里的表达式包括3个运算...

2018-12-14 10:06:50 255

原创 Vue之生命周期

每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。如果你使用过Jquery，一定知道ready()用法,比如一下示例：$(document).ready(function(){//DOM加载完后，会执行这里的代码})Vue的生命周期钩子与之类似，比较常用的有：created实例创建完成后调用，此阶...

2018-12-13 15:23:23 153

原创 Vue与Jquery的区别到底在哪里？

比如我们用Jquery在Dom中插入一个元素，并且对其绑定一个click事件： if(showBtn){ var btn=$('&amp;lt;button&amp;gt;click me&amp;lt;/button&amp;gt;'); btn.on('click',function(){ console.log('clicked!!!'); }); $('#app'.

2018-12-13 14:42:40 987

原创手把手教你搭建Vue框架

Vue项目环境搭建1、安装Node.js双击安装node-v8.9.1-x64.exe。安装完成后输入命令 node -v ,若显示Node.js版本，既安装成功。2、基于node.js,利用淘宝npm镜像安装相关依赖。控制台命令：在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等...

2018-12-12 15:53:12 732

景秋