
vue框架开发
普通网友
这个作者很懒,什么都没留下…
展开
-
vue.js添加一些触摸事件以及安装fastclick
安装fastclick.jsnpm install fastclick -D之后,在main.js中引入,并绑定到bodyimport FastClick from 'fastclick' //vue框架开发H5正确运用fastclickif ('addEventListener' in document) { document.addEventListener('DOMContentL原创 2017-11-07 16:27:37 · 2057 阅读 · 0 评论 -
Vue v-if条件渲染
1、简单的v-if指令,代码如下<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="id"> <span v-if="flag">转载 2017-11-06 14:21:14 · 7036 阅读 · 0 评论 -
Vue key的作用
1、v-if中用 key 管理可复用的元素 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做,除了使 Vue 变得非常快之外,还有一些有用的好处。例如,如果你允许用户在不同的登录方式之间切换: Username Email 那么在上面的代原创 2017-11-02 21:57:18 · 13702 阅读 · 0 评论 -
vue-router 2.0 跳转之router.push()
router.push(location) 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。 router.push(location) 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。当你点击 <router-lin原创 2017-11-01 17:30:14 · 50391 阅读 · 1 评论 -
vue-router 实现组件的缓存之 keep-alive
一、keep-alive简介 keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 用法:<keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive>props include-字符串或正则表达式,只有匹配的组件会被缓存 exclude-字符串或正则表达式,任何匹原创 2017-11-01 15:55:46 · 9265 阅读 · 1 评论 -
关于Vue实例的生命周期created和mounted的区别
什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。原创 2017-11-01 18:03:07 · 1057 阅读 · 0 评论 -
vue2.0+vue-cli+webpack+vue-router中路由设定
vue2.0+vue-cli+webpack+vue-router原创 2017-11-01 10:46:24 · 685 阅读 · 0 评论 -
vue+vue-cli+webpack中引入jQuery
在项目中为了方便操作dom元素,选择jQuery,下面是步骤 首先在package.json里的dependencies加入"jquery" : "^3.2.1",然后install (注:可以查找最新的jQuery版本) 在webpack.base.conf.js里加入 var webpack = require("webpack") 在module.exports的原创 2017-10-31 22:37:23 · 684 阅读 · 0 评论 -
vue开发-使用axios发送请求
vue之前有一个官方推荐的交互插件vue-resource,但是到了2.0以后,官方不在更新vue-resource。 目前主流的vue项目,都选择axios来完成ajax请求,大型项目一般使用Vuex来管理数据,本篇博文详细说一下axios方式,Vuex方式暂不介绍 前言: 使用npm安装axios npm install axios 安装其他插件的时候,可以直接在main.js中引原创 2017-10-31 15:54:11 · 1020 阅读 · 0 评论 -
vue项目中,main.js,App.vue,index.html如何调用
1、main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2、App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 index.html文件入口 src放置组件和入口文件 node_modules为依赖的模块原创 2017-10-31 15:30:50 · 17258 阅读 · 0 评论 -
Vue组件中slot的用法
Vue组件中slot的用法 主要是让组件的可扩展性更强。 1. 使用匿名slot //定义组件my-component //使用方法 我就是slot的替代内容,这里可以放任何标签元素 2. 给slot加个名字 //定义组件my-component //使用方法 我就是这个叫mySlot的slot替代内容,这里可以放任意标签,即使是一长转载 2017-11-07 21:58:18 · 9582 阅读 · 0 评论 -
vue向子组件传递参数的两种方式
在github上下载了一个vue简单的入门项目,看到了不同以往的向子组件传递参数的方式,特此记录 前提: 向子组件传递简单的参数fatherComponent为home 第一种常规方式: export default { name: 'home', data() { return {原创 2017-11-06 14:58:02 · 6845 阅读 · 1 评论