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> ...
随机推荐
- Android实践之ScrollView中滑动冲突处理
转载注明出处:http://blog.csdn.net/xiaohanluo/article/details/52130923 1. 前言 在Android开发中,假设是一些简单的布局.都非常easy ...
- PHP路由技术的原理与实践
0x00 路由实现原理 用户通过指定的URL范式对后台进行訪问.URL路由处理类进行处理后.转发到逻辑处理类,逻辑处理类将请求结果返回给用户. 约定URL范式和规则 约定一套自己喜欢的,对搜索引擎友好 ...
- FTP 访问的形式
主要是扼要的列举一下访问的方式,不涉及太具体的内容.大家可以在百度上搜索一下具体的操作方法. 主要有: 1. 网页浏览器中输入 ftp://192.168.0.111的形式. 2. 资源管理器中输入f ...
- 火狐与IE的7个JavaScript差异
作者注:本篇文章发表于2009.04.27,是一篇关于讨论Javascript在IE6.IE7和FF2+.FF3.0之间的存在的问题的文章. 虽然须要用冗长的JavaScript代码去识别特定的浏览器 ...
- POJ 2823 Sliding Window 线段树
http://poj.org/problem?id=2823 出太阳啦~^ ^被子拿去晒了~晚上还要数学建模,刚才躺在床上休息一下就睡着了,哼,还好我强大,没有感冒. 话说今年校运会怎么没下雨!!!说 ...
- 自己写的关于生产者与消费者模式，还有定时任务的demo
为了加深对生产者消费者模式的理解,特意写了这个demo,里面还包含了一个自己写的定时任务.代码下载地址:http://download.csdn.net/detail/li_yan_fei/98115 ...
- java开发SSM框架的搭建（SpringMVC+Spring+MyBatis）
因为某些原因,重装系统,java-web开发尽管顺手,但烦人的一点是开发环境的搭建.几乎相同折腾了一整天,笔者在这里把SSM开发环境的搭建又一次清理一遍,以飨读者.也供自己以后參考.善于总结,是做好每 ...
- [Angular2 Router] Get activated router url
getActivatedRoutePath(r: ActivatedRoute) { return r.url .subscribe(p => this.curtPath = p[0].path ...
- java生成UUID通用唯一识别码 (Universally Unique Identifier) 分类： B1_JAVA 2014-08-22 16:09 331人阅读 评论(0) 收藏
转自:http://blog.csdn.net/carefree31441/article/details/3998553 UUID含义是通用唯一识别码 (Universally Unique Ide ...
- 单选框radio改变事件详解（用的jquery的radio的change事件）
单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...