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> ...
随机推荐
- Project Euler 363 Bézier Curves（几何+二分）
题目链接: https://projecteuler.net/problem=363 题目: A cubic Bézier curve is defined by four points: \(P_0 ...
- （转）iptables常用规则：屏蔽IP地址、禁用ping、协议设置、NAT与转发、负载平衡、自定义链
转自:http://lesca.me/archives/iptables-examples.html 本文介绍25个常用的iptables用法.如果你对iptables还不甚了解,可以参考上一篇ipt ...
- python整除
1.'/'除号与c不同,单个'/'是浮点除,两个除号'//'才是整除
- u-boot分析1：Nandflash、Norflash启动
了解u-boot之前首先了解下Bootloader,简单说Bootloader就是一段小程序,它在系统上电时开始运行,初始化硬件设备,准备好软件环境,最后调用操作系统内核. u-boot全称:Univ ...
- ECMAScript5和ECMAScript6_浏览器支持情况
ECMAScript5浏览器支持情况: Opera 11.60 Internet Explorer 9* Firefox 4 Safari 5.1** Chrome 13 * IE9不支持严格模式 - ...
- swift项目第四天：动态加载控制器
一:Appdelegate import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate ...
- ldd 查看程序/动态库 的依赖
今天在帮同事查看一个问题时, 需要用到ldd, 于是就顺便看了一下ldd的实现. 好在ldd本身只是一个脚本, 而不是executable, 可以直接查看实现的代码. 根据注释: 21 # This ...
- poj1564 Sum It Up (zoj 1711 hdu 1258) DFS
POJhttp://poj.org/problem?id=1564 ZOJhttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=711 ...
- ERROR:column "rolcatupdate" does not exist
1.错误描写叙述 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
- php实现合并两个排序的链表（很多情况下新建数组装东西比连东西逻辑快很多）（$cur=$cur->next;的理解）
php实现合并两个排序的链表(很多情况下新建数组装东西比连东西逻辑快很多)($cur=$cur->next;的理解) 一.总结 $cur=$cur->next;这句话需要好好理解 指$cu ...