好久没用过vuex了，vuex官方示例的计算器counter是用的webpack打包了单文件组件，不方便回顾，今天把代码改成了html引人的方式，方便回顾

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app">

    </div>

    <script type="text/x-template" id="grid-template">

        <div id="app1">

          Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.

          <button @click="increment">+</button>

          <button @click="decrement">-</button>

          <button @click="incrementIfOdd">Increment if odd</button>

          <button @click="incrementAsync">Increment async</button>

        </div>

    </script>

    <script src="vue.js"></script>

    <script src="vuex.js"></script>

    <script>

        var Counter = {

            template: '#grid-template',

            computed: Vuex.mapGetters([

              'evenOrOdd'

            ]),

            methods: Vuex.mapActions([

              'increment',

              'decrement',

              'incrementIfOdd',

              'incrementAsync'

            ])

        }

        const store = new Vuex.Store({

          state: {

            count: 0

          },

          mutations: {

              increment: state => state.count++,

            decrement: state => state.count--

          },

          actions: {

              increment: ({ commit }) => commit('increment'),

              decrement: ({ commit }) => commit('decrement'),

              incrementIfOdd ({ commit, state }) {

                if ((state.count + 1) % 2 === 0) {

                  commit('increment')

                }

              },

              incrementAsync ({ commit }) {

                return new Promise((resolve, reject) => {

                  setTimeout(() => {

                    commit('increment')

                    resolve()

                  }, 1000)

                })

              }

          },

          getters: {

              evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'

          },

        })

        new Vue({

          el: '#app',

          store,

          render: h => h(Counter)

        })

    </script>

</body>

</html>

下面是vue model组件，当时做千分位格式化用的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<!--     <input

      v-bind:value="searchText"

      v-on:input="searchText = $event.target.value"

    > -->

    <div id="app">

        <!-- <input v-bind:value="rawId"></input> -->

        <input

          v-bind:value="rawId | capitalize"

          v-on:blur="rawId = $event.target.value"

        >

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#app',

            data: {

                rawId: 'abc'

            },

            filters: {

              capitalize: function (value) {

                if (!value) return ''

                value = value.toString()

                return value.charAt(0).toUpperCase() + value.slice(1)

              }

            },

        })

    </script>

</body>

</html>

vue只输入数字https://segmentfault.com/q/1010000007115009

vuex的简单例子和vue model组件的更多相关文章

  1. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  2. vue的挖坑和爬坑之vuex的简单入门

    首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...

  3. Vue 兄弟组件通信（不使用Vuex)

    Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...

  4. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  5. 一个简单的适用于Vue的下拉刷新，触底加载组件

    一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...

  6. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  7. Vue - 简单实现一个命令式弹窗组件

    前言 在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件 涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ titl ...

  8. 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用

    一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图.    Store     ...

  9. vue同胞组件通讯解决方案（以下为一种另外可用vuex解决）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. css中hack是什么

    css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...

  2. Docker---(2)docker pull 下来的镜像存储在哪里

    原文:Docker---(2)docker pull 下来的镜像存储在哪里 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn. ...

  3. TensorFlow 学习（十五）—— tensorflow.python.platform

    tensorflow.python.platform 下的常用工具类和工具函数:tensorflow/tensorflow/python/platform at master · tensorflow ...

  4. 大战C100K之-Linux内核调优篇--转载

    原文地址:http://joyexpr.com/2013/11/22/c100k-4-kernel-tuning/ 早期的系统,系统资源包括CPU.内存等都是非常有限的,系统为了保持公平,默认要限制进 ...

  5. 【习题 3-1 UVA - 1585】Score

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟水题 [错的次数] 在这里输入错的次数 [反思] 在这里输入反思 [代码] #include <bits/stdc++.h ...

  6. 【Codeforces Round #437 (Div. 2) A】Between the Offices

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> using n ...

  7. 关于idea新建子目录时往父目录名字后叠加而不是树形结构的解决方法（转）

    我们在IDEA中创建子目录时,子目录总是在父目录后面叠加而不是树形,如下 我们可以打开项目窗口的右上角的设置标志, 将红圈选项的√先去掉,创建好子目录后再将它选中就可以

  8. [Debug] Use Snippets to Store Behaviors in Chrome DevTools

    Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your ...

  9. 怎样自己构建一个小型的Zoomeye----从技术细节探讨到实现

     转载请注明出处:viewmode=list">http://blog.csdn.net/u011721501?viewmode=list 0.概述 Zoomeye是个网络空间的搜 ...

  10. 如何把canvas元素作为网站背景总结详解

    如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...