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> ...
随机推荐
- Varnish 实战
Varnish 实战项目 目录 实现基于Keepalived+Haproxy+Varnish+LNMP企业级架构 一.环境准备 1.1 相关配置 1.2 安装服务 1.3 关闭防火墙及selinu ...
- Instant Client 配置
Instant Client Download 选择 Instant Client for Microsoft Windows (32-bit) 由于PL/SQL Developer 不支持64b ...
- 30分钟学会如何使用Shiro（转）
本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...
- Tomcat基础配置和高级配置
********** 第一部分 Tomcat基础配置 *********** 一.Apatch Tomcat 在win下配置 大部分转载自:http://blog.csdn.net/liuhao ...
- 学习redis--安装(二)
安装前准备,我是在虚拟机中安装centos,然后安装redis. 安装 1.安装VMware,并安转centos系统 2.将redis的压缩包,上传到linux系统中(将下载到pc中的文件,拖到cen ...
- 如何在Win8/Win10上开启 dotNetFramework 2.0/3.5 功能
问题: 在Windows 8.Windows 10上安装一些软件时,系统可能会报出如下错误:你的电脑上的应用需要使用以下Windows功能: 解决方式: 首先呢,你需要准备好一个Win8/ ...
- 介绍array_multisort方法
介绍array_multisort方法 array_multisort — 对多个数组或多维数组进行排序.其php 手册中的说明如下: 代码如下: bool array_multisort ( ar ...
- c++读取lua配置基础类
一.内容介绍 把lua作为配置文件,里面的参数值的获取,在他人基础上做了修改,并且补充了一维数组的处理方式. 若有不足之处请多多指教. 对于二维数组,没有成功.希望大家继续补充和修改,非常感谢! 二. ...
- 【Codeforces Round #437 (Div. 2) C】 Ordering Pizza
[链接]h在这里写链接 [题意] 给你参赛者的数量以及一个整数S表示每块披萨的片数. 每个参数者有3个参数,si,ai,bi; 表示第i个参赛者它要吃的披萨的片数,以及吃一片第 ...
- hadoop的关键进程 分类： A1_HADOOP 2015-06-06 11:37 52人阅读 评论(0) 收藏
hadoop集群中主要进程有 master: NameNode, ResourceManager, slaves: DataNode, NodeManager, RunJar, MRAppM ...