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
vuex的简单例子和vue model组件的更多相关文章
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
- vue的挖坑和爬坑之vuex的简单入门
首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...
- Vue 兄弟组件通信（不使用Vuex)
Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...
- 自定义vue全局组件use使用、vuex的使用
自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...
- 一个简单的适用于Vue的下拉刷新，触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- Vue - 简单实现一个命令式弹窗组件
前言 在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件 涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ titl ...
- 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用
一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图. Store ...
- vue同胞组件通讯解决方案（以下为一种另外可用vuex解决）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 微服务实践（七）：从单体式架构迁移到微服务架构 - DockOne.io
原文:微服务实践(七):从单体式架构迁移到微服务架构 - DockOne.io [编者的话]这是用微服务开发应用系列博客的第七篇也是最后一篇.第一篇中介绍了微服务架构模式,并且讨论了微服架构的优缺点: ...
- 微服务实战（一）：微服务架构的优势与不足 - DockOne.io
原文:微服务实战(一):微服务架构的优势与不足 - DockOne.io [编者的话]本文来自Nginx官方博客,是微服务系列文章的第一篇,主要探讨了传统的单体式应用的不足,以及微服务架构的优势与挑战 ...
- StackExchange.Redis 官方文档(六) PipelinesMultiplexers
原文:StackExchange.Redis 官方文档(六) PipelinesMultiplexers 流水线和复用 糟糕的时间浪费.现代的计算机以惊人的速度产生大量的数据,而且高速网络通道(通常在 ...
- (转载)iis7下站点日志默认位置
转自http://www.cnblogs.com/mincyw/p/3425468.html iis7下站点日志默认位置 在iis6时,通过iis管理器的日志配置可以找到站点日志存储的位置. 但是 ...
- Spring 使用Cache(转)
从3.1开始Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事物管理的支持.Spring Cache是作用在方法上的,其核心思想是:当我们在调用一个缓存方法时会把该方法参数 ...
- swift项目第四天：动态加载控制器
一:Appdelegate import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate ...
- css3-10 如何使用滚动条
css3-10 如何使用滚动条 一.总结 一句话总结:给设置了宽高的块标签使用,直接将overflow属性写到style里面即可. 1.滚动条的使用对象时谁? 一般是div,当div比较小(设置了宽高 ...
- thinkphp 获取url参数,汉字获取不到
//这样获取不到 dump($_GET['car_code']); //这样就可以获取了 dump(iconv("gb2312","utf-8",$_GET[' ...
- 基于Maven，Spring+ActiveMQ实现，贴近实际
本文只实现了Topic,queue改点配置就行了 一.pom依赖 Spring的太长了,具体可以看下面源码里面 <dependency> <groupId>org.apache ...
- php数组全排列,元素所有组合
<?php $source = array('pll','我','爱','你','嘿'); sort($source); //保证初始数组是有序的 $last = count($source) ...