前言平时写vue的时候知道 props 有很多种用法，今天我们来看看vue内部是怎么处理 props 中那么多的用法的。 vue提供的props的用法1. 数组形式props: [name, value]2. 对象形式对象形式内部也提供了三种写法： props: {// 基础的类型检查name: String,// 多个可能的类型value: [String, Number],// 对象形式id: {type: Number,required: true} } props实现的原理function normalizeProps (options: Object, vm: ?Component) {const ...
vuejs自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。 最近碰到一种业务场景，业务场景如图：有个操作提示点击可以显示，足够了吧？如图：不够！好吧，产品说要求自动淡出提示！ 后台操作复杂需要有个明显提示给业务人员更好地操作，而且这种提示，只需要一种提示就足够。于是我就想到了自己实现自...
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： <input type="text" v-model="cityName"/>new Vue({el: #root,data: {cityName: shanghai},watch: {cityName(newName, oldName) {// ...}}})直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名： watch: {cityName: nameChange}}immediate和handler 这样使...
1 用法 v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。 html： <div id="app"><p v-show="type===科技">大数据之下的锦鲤：为什么你的微博总抽不到奖</p> </div>js： <script>var app = new Vue({el: #app,data: {type:技术}}); </script>渲染后代码： <p style="display: none;">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>因为元素样式被设置为 display: none; ，所以元素就被隐藏啦O(∩_∩)O~ ...
想尝试使用vuex的module来进行操作，看了一些资料，我简单进行了一个简化 目录结构： store │ index.js │ ├─feeds │ actions.js │ getters.js │ index.js │ mutation-type.js │ mutations.js │ state.js │ └─moviesactions.jsgetters.jsindex.jsmutation-type.jsmutations.jsstate.js 这里是两个模块feeds和movies 第一步：在store文件夹下的index.js入口文件写入：import Vue from vue; import Vuex...
前言 关于checkbox多选框是再常见不过的了，几乎很多地方都会用到，这两天在使用vue框架时需要用到checkbox多选功能，实在着实让我头疼，vue和原生checkbox用法不太一样，之前对于vue中用到过的checkbox也只是别人写好的组件，这次在自己实现时走了很多坑，特意写这篇文章记录下来，给后来者提供一个参考 在这之前，先看看原生checkbox搭配jquery取值的用法<input type="checkbox" name="hobby" value="游泳">游泳<input type="che...
之前看官方文档，由于自己理解的偏差，不知道slot是干嘛的，看到小标题，使用Slot分发内容，就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了，使用slot就是先圈一块地，将来可能种花种菜，也有可能在这块地上建房子。然而slot可以以一当十，可以插入很多东西。不知明白否？ 由于项目经验有限，这篇我就先跟着官网的知识点走，当然会加入自己的部分项目代码。 关于slot是这样说的， 除非子组件模板包含至少一个 <sl...
我们知道jq是简化了dom操作，而react和vue则是通过使用虚拟dom的方式，不需要频繁的更改ui界面，而是通过更改数据的方式来更新界面。我们知道些jq插件时会在IFFE中传入jQuery，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。其实vue中new Vue（）对象，效果也是类似，可以避免vue范围类的数据或变量被污染。我们先来看一些基本的用法插入文本值v-html 直接插入html结构 v-bind属性 <a :href="url" rel="external n...
webpack的打包依赖于它的一个重要配置文件webpack.config.js，在这个配置文件中就可以指定所有在源代码编译过程中的工作了，就一个配置就可以与冗长的Gruntfile或者Gulpfile说再见了。 一个完整的工程项目中的webpack的配置远远没有这么简单，随着工程的构建要求的增加，webpack.config.js内的配置项目也会随之增加，webpack还有许许多多的选项提供给我们进行灵活配置，它只是一个构建工具，我们只需要了解在Vue项目中它基本能为我...
1、首先我们需要安装一下vue-apollo 具体执行命令如下： 代码如下:npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 2、在我们的项目的根目录下创建一个vueApollo.js文件具体配置如下： import { ApolloClient } from apollo-client; import { HttpLink } from apollo-link-http; import { InMemoryCache } from apollo-cache-inmemory; import VueApollo f...
vue2.0在使用的过程中， .vue文件之间的跳转，在template中的常见写法是： <router-link to="/miniCard/statement/horizon"><button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转，有确认弹框或者其他事件，此时就需要在js中设置跳转，常用的一种方法是 .$router.push ，用法如下： this.$router.push({path: /...}); 希望本文对您有所帮助！ 拓展知识：解决this.$router.push无...
1.首先引入 import { Toast } from vant写个小列子 绑定一个click事件2.写事件 在methods写方法 showToast() {this.$toast({message: "今日签到+3",})},3.效果图如下一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from vux Vue.use(ToastPlugin) Vue.use(ConfirmPlugin) Vue.use(AlertPlugin) //公用的弹窗(全局变量) Vue.prototype.showToast = functi...
先贴上官方定义。 个人觉得全局mixin就是给全部Vue文件添加一些公用的实例（方法，过滤器and so on） 使用场景：货币单位，时间格式。这些如果在用到的页面使用的话代码会重复的很多，所以在全局混入这些实例会减少代码量，可维护性也比较高。 ex： step1: 先定义mixin.js const mixin = {methods: {/*** 格式化时间* @param {string|number|object|Array} dateTime - 时间，可以是一个字符串、时间戳、表示时间的对象、Date对象或...
第一个浅度监听： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js"></script></head><body><div id="app"><p>{{a}}</p><p>{{b}}</p></div><script>var vm=new Vue({el:"#app",data:{a:10,b:15}});vm.$watch("a",function(){alert(a变化了);this.b=100;});document.onclick=function(){vm.a=2}</script></body> </html>第二个深度监听 <!DOCTYPE html> <html><...
今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法。 1.路由元信息 什么是路由元信息，看看官网的解释，定义路由的时候可以配置 meta 字段可以匹配meta字段，那么我们该如何使用它，一个简单的例子，改变浏览器title的值。下面上代码。 //简单的我就不写了直接上解决方案 import Vue from vue import Router from vue-router import Login from ../login/Login import Home from ../pages/Home export default ne...