| export default { | |
| template: ` | |
| <section> | |
| <datalist :id="listId"> | |
| <option v-for="opt in info.opts" :value="opt"></option> | |
| </datalist> | |
| <label> | |
| {{info.label}} | |
| <input type="text" v-model="val" @change="reportVal" :list="listId" /> | |
| </label> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css"> | |
| <style> | |
| body { padding-top: 40px; } | |
| </style> | |
| </head> | |
| <body> |
| Vue.directive("colorful", { | |
| // When the bound element is inserted into the DOM... | |
| inserted: function(el) { | |
| el.addEventListener("keyup", () => { | |
| el.style.backgroundColor = getRandomColor(); | |
| }); | |
| } | |
| }); |
| var store = new Vuex.Store({ | |
| state: { | |
| todos: [] | |
| }, | |
| mutations: { | |
| addTodo(state, todoText) { | |
| state.todos.push({ | |
| text: todoText, | |
| done: false | |
| }); |
| <!-- the click event's propagation will be stopped --> | |
| <a @click.stop="doThis"></a> | |
| <!-- the submit event will no longer reload the page --> | |
| <form @submit.prevent="onSubmit"></form> | |
| <!-- enter in the textbox should submit--> | |
| <input type="text" @keyup.enter="submit"> | |
| <!-- Alt + C --> |
| <template> | |
| <div class="home"> | |
| <img alt="Vue logo" src="../assets/logo.png"> | |
| <HelloWorld msg="Vue.js + TypeScript App"/> | |
| </div> | |
| </template> | |
| <script lang="ts"> | |
| import { Component, Vue } from 'vue-property-decorator'; | |
| import HelloWorld from '@/cmps/HelloWorld.vue'; // @ is an alias to /src |
| const createStore = (reducer) => { | |
| let state; | |
| let listeners = []; | |
| const getState = () => state; | |
| const dispatch = (action) => { | |
| state = reducer(state, action); | |
| listeners.forEach(listener => listener()); | |
| }; |
Copyright (C) 2017 Leonidas Oy Ltd
Written by <santtu.pajukanta@leonidasoy.fi>
Licensed under the MIT license
We attempt to harness the friendly API of Immutable.js to build Redux reducers while trying to preserve as much type safety as possible.
State branches are TypedRecords. A combineReducers that outputs TypedRecords is provided.
| System.config({ | |
| //use typescript for compilation | |
| transpiler: 'typescript', | |
| //typescript compiler options | |
| typescriptOptions: { | |
| emitDecoratorMetadata: true | |
| }, | |
| //map tells the System loader where to look for things | |
| map: { | |
| app: './src' |
| System.config({ | |
| //use typescript for compilation | |
| transpiler: 'typescript', | |
| //typescript compiler options | |
| typescriptOptions: { | |
| emitDecoratorMetadata: true | |
| }, | |
| //map tells the System loader where to look for things | |
| map: { | |
| app: './src' |