Skip to content

Instantly share code, notes, and snippets.

Chase Isley theonlychase

Block or report user

Report or block theonlychase

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View vue-render-functions
### Render Functions
- They really shine when you need to dynamically decide which element you want to render
- For example, decicing if you wanted a button to use an anchor tag, button tag, or any other element and also be reusable
- you can't use `v-model` with render functions
theonlychase / v-model
Last active Aug 7, 2019
v-model under the hood
View v-model
// with v-model
<input v-model="email" class="form-input" placeholder="">
// without v-model
<input :value="email" @input="email = $" class="form-input" placeholder="">
data() {
return {
email: ''
View vue-reactivity
## Vue Reactivty System
#### Step 1
1. Create state object and create function to render `y` to html
<h1 id="y"></h1>
let state = { x: 1 };
View mini-data-observer
// Object.defineProperty -
function convert(obj) {
Object.keys(obj).forEach(key => {
let internalValue = obj[key];
Object.defineProperty(obj, key, {
get() {
console.log(`getting key "${key}": ${internalValue}`);
return internalValue;
View update-npm
## Steps
1. Make sure local storybook is updated
1. `git fetch`
2. `git pull`
2. Make sure your local npm package is updated
3. Remove the file/folder that has been updated in storybook
4. Replace the removed files with the updated files in storybook
5. Update the version # of package.json
View git-process-VH
## VH Git Process
1. Get Status
1. `git status`
2. Check what branch you're on
1. `git branch`
3. Add all files
1. `git add .`
4. Create Branch with with ticket name and small description
1. `git checkout -b VHMN-3965-helpful-cunsumer-review-button`
View vue-test-utils
`describe()` - describe generally outlines what the test is about
`it()` - it represents a single piece of responsibility that the subject of the test should fulfill.
1. Two ways to render
1. `mount()`
2. `shallowMount()`
3. A component mounted returns a `wrapper` which is an object containing the Vue Component
View map-weakmap
## Map
1. Map is a collection of keyed data items, just like an `Object`. But the main difference is that `Map` allows keys of any type.
2. Maps Main Methods
1. `new Map()` - creates the map
2. `map.set(key, value)` - stores value by key
3. `map.get(key)` – returns the value by the key, undefined if key doesn’t exist in map.
4. `map.has(key)` – returns true if the key exists, false otherwise.
5. `map.delete(key)` – removes the value by the key.
View tips-tricks
## Type Conversion - Number and String
1. The `+` operator when used as a unary operator always converts its operand to a `number`.
2. 2. Using the unary `+` operator on a value is functionally equivalent to casting the value using the `Number()` function.
1. `+new Date === Number(new Date); // true`
console.log(+'100'); // 100
console.log(+null); // 0
console.log(+void 0); // NaN
View js-types
## Types Basics
1. Does JS have types?
1. Dynamically typed
1. infer variable types at runtime
2. Once your code is run the compiler/interpreter will see your variable and its value then decide what type it is
2. Weakly typed
1. Allow types to be inferred as another type (coersion)
You can’t perform that action at this time.