Vue.js 是一套构建用户界面的渐进式框架， 只关注视图层， 采用自底向上增量开发的设计，目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。在编程上很流行，本文主要介绍Vue.js用法详解,需要的朋友可以参考下，希望能帮助到大家。首先，我们先来了解一下Vue： Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根...
这篇文章主要介绍了vue2.0结合DataTable插件实现表格动态刷新的方法,结合具体项目实例形式分析了vue2.0结合DataTable插件实现表格动态刷新过程中遇到的问题与相应的解决方法,需要的朋友可以参考下本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法。分享给大家供大家参考，具体如下：产品提出的需求是这样的，很普通的一个统计server端task完成率和状态的表格，要自动刷新其中的数据，并且当单个task完成的时候report给...
这篇文章主要为大家讲述强大Vue.js组件详细说明，组件是Vue.js最强大的功能之一，感兴趣的小伙伴们可以参考一下什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。如何注册组件？需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue...
什么是Vue.nextTick()官方文档解释如下： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM，获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题，所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作...
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 <template><div id="app"><p v-for="item in items" :key="item.id">{{item.message}}</p><button class="btn" @click="handClick()">更改数据</button></div> </template><script> export default {name: App,data () {return {items: [{ message: "one", id: "1" },{ message: "two", ...
前言 vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。 子通信父父组件<template> <div class="parent"> 我是父组件 <!--父组件监听子组件触发的say方法，调用自己的parentSay方法--> <!--通过:msg将父组件的数据传递给子组件--> <children :msg="msg" @say="parentSay"></children> </div> </template><script> import Children from ./chil...
这是我自己做的一个左边点击对应的标题，右边显示相应代码的一个功能。代码显示这里用的是vue-codemirror插件。 第一种用法：1、安装：npm install vue-codemirror --save2、在main.js中引入 import VueCodeMirror from vue-codemirror import codemirror/lib/codemirror.css Vue.use(VueCodeMirror) 3、在组件中使用 import { codemirror } from vue-codemirror import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式...
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive>是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 方法1 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 exclude优先级大于include <...
今天主要记录 vue中命名视图的用法 先奉上官网网址：https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下，一个页面里面可能有多个组件，比如侧边栏，内容区，侧边栏是一个组件、内容区是一个组件，我们普遍会将两个组件作为子组件添加到主页面中，因为页面中只有一个 router-view视图，那么问题来了，怎么让一个页面中有多个视图呢，拥有多个视图，很随意，多写几个router-view标签就行了，但是每个route...
上回说到Vue组件间通讯，最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法，这节来说说Vuex(store仓库)。 首先Vuex需要安装，安装的方式有很多，在这里就不一一细说了。我是通过npm方式安装的： npm install vuex --save安装好之后需要再main.js里全局引入： import Vue from vue import Vuex from vuex Vue.use(Vuex)new Vue({el:#app,store,components: { App },template: <App/>})这样就完成了Vuex的安装。接下来就是Vuex的...
最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。 真正有能力的插槽是什么？ 如果你是Vue的新手，或者还没有看到2.6版的变化，请继续阅读。也许学习插槽的最佳资源是Vue自己的文档，但是我将在这里给出一个纲要。 想阅读更多优质文章请猛戳GitHub博客 ,一年百来篇优质文章等着你！ 插槽是什么？ 插槽是Vue组...
一、官方解释：1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。3.相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。4.一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果...
官方网址：http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。使用方式 这里主要讨论在vue项目中，使用axios发送ajax请求，mock.js模拟数据的流程。 vue-cli搭建项目后，安装axios和mock.js npm install -S axios npm install -D mockjs在项目中新建mock.js文件夹，来设置要产生的模拟数据的格式。3. 设想...
本文实例讲述了Vue开发之封装上传文件组件与用法。分享给大家供大家参考，具体如下： 使用elementui的 el-upload插件实现图片上传组件 每个项目存在一定的特殊性，所以数据的处理会不同pictureupload.vue: <template><div class="pictureupload"><el-upload:action="baseUrl + /api/public/image"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":file-list="fileList":on-exceed="handl...
什么是getters 在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。 源码分析 wrapGetters初始化getters，接受3个参数，store表示当前的Store实例，moduleG...