在这之前，我已经分享过组件与组件的通信机制以及父子组件之间的通信机制，而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢？ 组件通信的本质其实就是在组件之间传递数据或组件的状态（这里将数据和状态统称为状态），但可以看到如果我们通过最基本的方式来进行通信，一旦需要管理的状态多了，代码就会变得十分臃肿和庞大。对所有状态的管理便会显得力不从心，因此，vuex出现了，他就是帮助我们把公用的状态全抽出来放在...
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态. Action 是异步的，mutation是同步的。 沿用vuex学习---简介的案例：这里是加10 减1 1.在store.js 中 代码为：import Vue from vue import Vuex from vuex//使用vuex模块 Vue.use(Vuex);//声明静态常量为4 const state = {count : 4 };const mutations = {add(state,n){state.count +=n.a;},sub(state){state.count--;} };const actions = {//2种...
本文介绍了如何理解Vue的render函数的具体用法，分享给大家，具体如下： 第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>render</title><script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body><div id="app"><elem></elem></div><script>Vue.component(elem, {render: function(createElement) {return createElement(div);//...
在日常开发中经常会遇到文件上传的需求，vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件，自带 UI，可覆盖、自定义；先来张动图看看效果：其主要特点就是： 支持文件、多文件、文件夹上传支持拖拽文件、文件夹上传统一对待文件和文件夹，方便操作管理可暂停、继续上传错误处理支持“快传”，通过文件判断服务端是否已存在从而实现“快传”上传队列管理，支持最大并发上传分块上传支持进度、预估...
关于appear的用法和enter的用法相似，它只是在第一次渲染的时候才会起作用。看完整的代码： 别忘了引用vue.js <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>初始渲染的过渡</title><script src="vue.js"></script> </head> <style>.custom-appear-active{color: #2fe26d;background: #b6b6b6;transition: all 1s ease;}.custom-appear{font-size: 40px;color: #e069e2;background: #7798e2;}.custom-appe...
这两天学习了Vuejs Prop感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 一、使用Prop传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。 prop是父组件用来传递数据的一个自定义属性。子组件需要显示的地用props选项声明”prop” Vue.component(child,{props:[message],template:<span>{{ message }}</span> }) 然后向它传入一...
什么是vue? Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。 vue是由尤雨溪开发的一款基于MVVM的框架，M->模型，V->视图， 也就是说模型数据改变了，视图也跟着改变， 视图内容改变，模型内容也跟着改变， 业界称之为双向绑定，或者说双向数据驱动，基于此特点，学习这个框架，跟jque...
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .prevent .capture .self .once...
axios是vue-resource后出现的Vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。 下面我们来使用axiosnpm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题 1 1. Vue.prototype.$ajax=axios 好像还有另外一种方法，是不需要去修改Vue的原型的，那就是我们除了npm ...
本文介绍了详解vue 模版组件的三种用法，分享给大家，具体如下：第一种//首先，别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script>var User_01 = Vue.extend({// 创建可复用的构造器template: <p>{{firstName}} {{lastName}} age {{age}}</p>});var user_01 = new User_01({ // 创建一个 user 实例data: {firstName: yuxie,lastName: weiliang,age: 33}});user_01...
我最近在研究vue 的路上，看到了vue $refs的用法，那么今天也算个学习笔记吧！ <div id="app"><input type="text" ref="input1"/><button @click="add">添加</button> </div> <script> new Vue({el: "#app",methods:{add:function(){this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗}} }) </script>一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值...
这两天学习了v-bind的基本用法，所以，今天添加一点小笔记。1. v-bind:class（根据需求进行选择） 1.1 <style> .box{background-color: #ff0; } .textColor{color: #000; } .textSize{font-size: 30px; } </style><div id="app"><span class="box" :class="{textColor:isColor, textSize:isSize}">我是字</span> </div><script>new Vue({el: "#app",data:{isColor:true,isSize:true}}) </script> 1.2 <style> .box{background-colo...
1.x写法 <body> <div id="app">{{html|uppercase}} </div> <script>new Vue({el:#app,data:{msg:"123",html:"abc"}}) </script> </body>但是2.0中已经废弃了过滤器，需要我们自定义 <div id="app">{{message|uppercase}} </div>//过滤器 Vue.filter(uppercase, function(value) {if (!value) { return }value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1) })var vm = new Vue({el:#app,data: {messag...
这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><script src="../js/Vue.js" charset="utf-8"></script><script type="text/javascript">window.onload = function () {var vm = new Vue({el: #box,data: {},methods: {show: function (ev) {alert(ev.keyCode)}}});}</script> </head>...
1.什么是Store？上一篇文章说了，Vuex就是提供一个仓库，Store仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules。总结，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中。要注...