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> ...
随机推荐
- JS预解释的总结
预解释阶段发生在创建了堆内存,让代码执行之前,对当前作用域中带var和function的进行预解释 在浏览器解析执行代码的时候,会提前把带var和function的代码声明或定义,提前放在作用域的最前 ...
- 关于PyYAML报错问题解决
转自:http://www.fwqtg.net/%E5%85%B3%E4%BA%8Epyyaml%E6%8A%A5%E9%94%99%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86% ...
- 最新GitHub新手使用教程(Linux/Ubuntu Git从安装到使用)——详细图解
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.叙述 1.说明:需要在Windows 安装Git的同学,可以查看该篇博客 https://blog.csdn.net/qq_4 ...
- Mysql从入门到精通整理
目录 mysql基础 mysql进阶 mysql高级 mysql优化 正文 数据库是信息化产业的最基础的软件之一,各种管理系统,网站,在线游戏,背后基本都会有数据库的支持. 回到顶部 mysql基础 ...
- docker安装及问题处理
1.在Ubuntu的命令行中输入 sudo apt-get install docker.io 2.如果切换到了root用户下 apt-get install docker.io 3.对于新安装的Ub ...
- (转)chrome浏览器收藏夹（书签）的导出与导入
导出chrome浏览器的书签到一个文件中.首先选择chrome浏览器的书签管理器菜单.然后点击“整理”,然后选择“将书签导出到html文件”. 步骤阅读 2 将导出的html文件保存,用于下次导入,这 ...
- iOS改动UIButton setTitle字体颜色和调整字体位置
调整Title字体位置 [button setTitleEdgeInsets:UIEdgeInsetsMake(10, 0, 0, 0)]; 四个參数分别代表:上边界,左边界.下边界,右边界 改动UI ...
- struts2漏洞原理及解决的方法
1.原理 Struts2的核心是使用的webwork框架,处理 action时通过调用底层的getter/setter方法来处理http的參数,它将每一个http參数声明为一个ONGL(这里是ONGL ...
- MVC5管道处理模型
原文:MVC5管道处理模型 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/82970442 ...
- win32程序如何改变字体大小颜色
//设定文字大小和颜色 LOGFONT logfont; //改变输出字体 ZeroMemory(&logfont, sizeof(LOGFONT)); logfont.lfCharSet = ...