vuex的简单例子和vue model组件

　　好久没用过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

posted @ 2018-05-25 22:47  姜瑞涛  阅读(194)  评论(0)  编辑  收藏  举报