一、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters （上次记得关于vuex笔记 //www.gxlcms.com/article/138229.htm,是一个简单的应用；这是一些简单的vue的小组件方法： //www.gxlcms.com/article/138230.htm） 何为四大金刚？1.State （这里可以是 小写的 state，跟官网保持一致，采用大写，因为个人习惯，后面的代码介绍采用小写）vuex的状态管理，需要依赖它的状态树，官网说：Vuex 使用单一状态树——是的，用...
Swiper简介 Swiper常用于移动端网站的内容触摸滑动。 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行问题 这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。 <template> <div clas...
一直对Vue中的slot插槽比较感兴趣，下面是自己的一些简单理解，希望可以帮助大家更好的理解slot插槽 下面结合一个例子，简单说明slots的工作原理 dx-li子组件的template如下：<li class="dx-li"><slot>你好！</slot> </li> dx-ul父组件的template如下： <ul><dx-li>hello juejin!</dx-li> </ul> 结合上述例子以及vue中相关源码进行分析 dx-ul父组件中template编译后，生成的组件render函数： module.exports={render:function (){v...
我们在使用vue 脚手架时，为了规范团队的代码格式，会有一个代码规范检测，如果不符合规范就会报错，有时候我们不想按照他的规范去写。这时我们需要关闭。这里有两种方法。 1.在搭建vue脚手架时提示是否启用eslint检测的。 Use ESLint to lint your code? 写 no; 2.如果项目已经生成，我们可以这样。 在项目中代开 bulid 文件夹下的 webpack.base.config.js 文件。将以下代码删掉或注销： {test: /\.(js|vue)$/,loader: eslint-loa...
本文题材来自：https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 <slot></slot>标签，简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。 也有人说：props可以将数据从父组件传入子组件，slot可以将html从父组件传入子组件。那么如何实现呢？ 单个插槽： <!DOCTYPE html> <html lang="en"><head><meta charset="u...
在 Vue 里，模板编译也是非常重要的一部分，里面也非常复杂，这次探究不会深入探究每一个细节，而是走一个全景概要，来吧，大家和我一起去一探究竟。 初体验 我们看了 Vue 的初始化函数就会知道，在最后一步，它进行了 vm.$mount(el) 的操作，而这个 $mount 在两个地方定义过，分别是在 entry-runtime-with-compiler.js(简称：eMount) 和 runtime/index.js(简称：rMount) 这两个文件里，那么这两个有什么区别呢？ // entry-runtime...
Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。一、示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。 模板 <div class="app"><div ref="msgDiv">{{msg}}</div><div v-if="msg1">Message got outside $nextTick: {{msg1}}</div><div v-if="msg2">Message got inside $nextTick: {{msg2}}</d...
在webpack.base.conf文件中配置别名以及扩展名 resolve: {extensions: [.js, .vue, .json, .styl],alias: {vue$: vue/dist/vue.esm.js,@: resolve(src),src: path.resolve(__dirname, ../src),common: path.resolve(__dirname, ../src/common),components: path.resolve(__dirname, ../src/components)}}配置好别名和扩展名后，main.js就可以这样写 import Vue from vue; import App from ./App; import Router from vue-router; /...
BmobSDK的引入 将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="static/bmob-min.js"></script></head><body><div id="app"></div></body> </html>在assets目录新建一个js文件夹，再创建key.js 用来存放bmob的应用key Bmob.initialize("你的Application ID", "你的REST API Key"...
Vue-Awesome-Swiper 轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，随着vue的广泛使用，其中插件swiper也算是使用的比较频繁的插件，现在分享一下使用方法以及开发中会遇到的一些问题。 我们先下载包，然后去main.js里面配置。 npm install vue-awesome-swiper --save我们可以用import的方法 //import import Vue from vue import VueAwesomeSwiper from vue-awesome-swiper也可以用require var Vue = require(vu...
keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。 基本使用如下： <keep-alive><component><!-- 该组件将被缓存！ --></component> </keep-alive> 一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页 有两个情况： 1. 直接点击浏览器的后退返回按钮。 2....
本文主要是带领大家分析$mount。 $mount所做的工作从大体来讲主要分为3步： 1.如果你的option里面没有 render 函数，那么，通过 compileToFunctions 将HTML模板编译成可以生成VNode的Render函数。 2.new 一个 Watcher 实例，触发 updateComponent 方法。 3.生成vnode，经过patch，把vnode更新到dom上。 由于篇幅有限，这里先说前两步，第三步下篇说。 好，下面具体的说。首先，我们来到 $mount 函数，如下图： 我们呢可以看到，代...
通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。 <div id="app"><h1>{{ message }}</h1><button @click="clickedButton">点击偶</button> </div>let app = new Vue({el: #app,data () {return {message: Hi，大漠！}},methods: {clickedButton: function () {console.log(Hi,大漠！)}} })在Vue的模板中，我们可以...
如果说vue组件化开发中第一步应该了解的是什么的话，那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的)，只有理解了这一步，才能更好的开发组件 这里先提出两个关键词： props 与 emit ： 写这个组件之前，先看看效果图： 组件开发分析： 既然是组件: 首先组件内部数据内容肯定是可变的(如上图中的"按时间排序"之类的)，这必须由父组件传入(即父组件如何将数据传个父组件);在选择了内容之后，如何将数...
简介 Vux（读音 [vju:z]，同views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。 基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。 vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。 vux并不完全依赖于WeUI，但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用，实用，美观的移动端UI组件库，现在离理想状...