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