nini-chang
commented
3 years ago Section 2: Basics & Core Concepts - DOM interaction with Vue
Module Content
- Vue + HTML = Templates
- Outputting Dynamic Content
- Reacting to User Input
Creating and Connecting Vue App Instances
| app.js | | ------ | | Note: If we control a HTML element with Vue, we'll also control all child elements of that element | |  |Interpolation and Data Binding
- `{{ courseGoal }}` interpolation - interpolation: reference properties that are part of that object you return in data, and then the value of the property will be output instead of `{{ courseGoal }}` - text(courseGoal) is stored in JavaScript, yet, it's rendered on the screen | app.js | index.html | output(view) | | ------ | ------ | ------ | |  |  |  |Binding Attributes with the "v-bind" Directive
- `{{ }}` this double curly brace syntax is only available between opening and closing HTML tags - Set the value of some HTML attributes - If you wanna pass in a dynamic value to an attribute, need to use a different syntax, which is Vue binding syntax (also called Vue directive, which is simply an extra instruction we add in HTML code) - example: `v-bind:href` | index.html | app.js | output | | ------ | ------ | ------ | |  | |  |Understanding "methods" in Vue Apps
- Methods allow you to define functions - `data` and `methods` are a reserved name - Different with `data` - data, itself is a function a method - methods takes an object, which will be full of methods, but these functions are bow totally up to you > Note: you can use any JavaScript expression between double curly braces (`{{ }}`) | index.html | app.js | output | | ------ | ------ | ------ | |  |  |  |Working with Data inside of a Vue App
- You can't use `courseGoalA` directly inside methods, because `courseGoalA` is not a variable or constant, it's a property of data(object). Instead you can use `this.courseGoalA` - Explanation: Vue does some magic. It basically takes all the data you return in data object (which you return in the data method) and **it merge it into a global Vue instance object**. So the data properties are available behind the scenes managed Vue app object. **Your methods are also available there.** And they do have access to anything stored in that global object through **this** keyword. | app.js | | ------ | |  |Outputting Raw HTML Content with v-html
- Be Aware if you have some contents stored in Vue App, which contents HTML code that should be treated as HTML - `v-html` - set the content between opening and closing text of an element - you should definitely not use it as a default, because you can introduce security issue with that, also because basically circumvent(規避) the built in cross site scripting attack protection you have with the double curly braces - use it only if you know what you're doing and you need to output something as HTML | index.html | | ------ | |  |Vue uses a declarative approach. We just declare our goal. We don't care about the steps of getting there. basic-starting-code (practice data-binding): basics-01-starting-code.zip
Assignment 1: Data Binding basics-assignment-1.zip
Understanding Event Binding
- `v-on` directive - takes the event to which you wanna listen to on HTML elements - `v-on:click`, `v-on:mouseenter` ...Events & Methods
> Vue detect both `v-on:click="onAdd"` or `v-on:click="onAdd()"` | index.html | app.js | output | | ------ | ------ | ------ | |  |  |  |Working with Event Arguments
| index.html | app.js | output | | ------ | ------ | ------ | |  |  |  |Using the Native Event Object
- The best event to listen to on an input HTML element is the `input` event, which is a default DOM event available on input elements, nothing Vue specific. - How do we get the concrete value the user enter ? - While there is a built-in behavior into JavaScript (not into Vue), which we can leverage(利用) - When you add an event listener and point at a function that should be executed. When that event occurs, that function will automatically get one argument. The browser will ensure that this argument is provided so to say. And that will be an OBJECT that describing the event that occurred. > Note: The "order" of methods - just like the order of "data" and "methods" does NOT matter. | index.html | app.js | output | | ------ | ------ | ------ | |  |  |  |Exploring Event Modifiers
- Event Modifiers - `Locking Content with v-once
`v-once` - Any dynamic data bindings should only be evaluated once. | index.html | output | | ------ | ------ | |  |  |basic-starting-code (practice event-binding): basics-03-events-starting-code.zip
Assignment 2: Event Binding basics-assignment-2-problem.zip
(assignment practice) event binding
> keydown: the key is pressed, but not yet released. The value in the input will only update once the key is released or finished. | index.html | app.js | output | | ------ | ------ | ------ | |  |  |  |Data Binding + Event Binding = Two-way Binding
- `v-model` 同時取代 `v-bind:value` 和 `v-on:input` - 監聽 input 的值，同步輸出 input 的值 | index.html | app.js | view | | ------ | ------ | ------ | |  |  |  | > two-way-binding: [basics-05-two-way-binding.zip](https://github.com/nini-chang/Notes/files/6698705/basics-05-two-way-binding.zip)Methods used for Data Binding: How It Works
| 擷取自課程 | | ------ | | Methods are not the best solution for outputting some dynamically calculated value | |  |Introducing Computed Properties
- Computed = the third big configuration option (cannot change the name) - An object: define a bunch of methods - Use it as data property (not like a method), not going to call it - Essentially like methods with one important different view will be aware of their dependencies changed - You only want to recalculate a value, if a dependency changed > If you just want to calculate some output value dynamically, computed properties are your friend > Note: You still bind your events to methods, You don't bind events to computer properties | Computed | | ------ | |  |Working with Watchers
- Watcher - An object: define a bunch of methods - A function that you can tell Vue to execute, when one of its dependencies changed (sounds like computed properties) - Used: watch on one dependency, HTTP requests (send certain data changes), Timer (which you wanna set, if value exceeds 50 or other) > If you wanna do that execute code, because something changed, then watchers can be helpfulPractice Computed and Watcher: basic-practice-compute-and-watcher.zip
Methods vs Computed Properties vs Watchers
| Versus | | ------ | |  | > Amongst the free Watches are probably the feature you'll use the least, because you need methods all the time with even binding and computed properties for outputting data that depends on other datav-bind and v-on shorthands
- `v-on:click.right` can be replace to `@click.right` - `v-bind:value` can be replace to `:value` > Note: there is no `v-model` shorthandsAssignment 3: Reactivity basics-assignment-3-problem.zip
Dynamic Styling with Inline Styling
| index.html | app.js | view | | ------ | ------ | ------ | |  |  |  | > Note that you can also write in this way: `:style="{ 'border-color': boxASelected ? 'red : '#ccc' }"`. Recommended and better use the camel case: `borderColor`Add CSS Classes Dynamically
- Inline styles ( `:style` ) have a couple of disadvantages. They overrule all other styles. Therefore, in modern web development and CSS, we typically don't use inline styles too often. | index.html | styles.css | app.js | view | | ------ | ------ | ------ | ------ | |  |  |  |  |Classes & Computed Properties
- Having Logic in the HTML code is suboptimal. As a class binding, it actually us okay. - But if you want to move this logic to js file > optional, unless you have more complex dynamic class code (not just referring to a true or false Boolean here) | index.html | app.js | view | | ------ | ------ | ------ | |  |  |  |Dynamic Classes: Array Syntax
- normally ```basics-10-styling-starting-setup.zip
Assignment 4: Dynamic Styling basics-assignment-4-problem_solution.zip
Module Summary
Graph
| Module Summary | | ------ | |  |nini-chang
commented
3 years ago Section 3: Rendering Conditional Content & Lists
Module Content
- Rendering content with conditions
- Outputting lists of data
- A first look behind the scenes
Section 1: Getting Started
Course Content