Front-end framework learning-Vue (3)

The content of the notes comes from: Shang Silicon Valley Vue2.0+Vue3.0 full set of tutorial丨vuejs from entry to proficiency

BeginnerVue

1. If you want Vue to work, you must create a Vue instance and pass in a configuration object;
2. The code in the root container still conforms to the HTML specification, but some special Vue syntax is mixed in;
3. The code in the root container The code is called [Vue template];
4. There is a one-to-one correspondence between Vue instances and containers;
5. There is only one Vue instance in real development, and it will be used together with components;
6. xxx in {{xxx}} must be Write js expressions, and xxx can 自动读取access all attributes in data;
7. Once the data in data changes, the place where the data is used in the page will also 自动更新;

Vue template syntax

1. Interpolation syntax:
   • Function: used to parse the tag body content.
   • Writing method: { {xxx}}, xxx is a js expression, and can directly read all attributes in data.
2. Command syntax:
   • Function: Used to parse tags (including: tag attributes, tag body content, binding events...).
   • For example: v-bind:href="xxx" or abbreviated as: href="xxx", xxx also needs to write a js expression, and can directly read all attributes in data.
   • Remarks: There are many instructions in Vue, and the form is: v-????, here we just take v-bind as an example.

data binding

There are 2 ways of data binding in Vue:

1. 单向绑定(v-bind): Data can only flow from data to pages.
2. 双向绑定(v-model): Data can not only flow from data to pages, but also from pages to data.

• Remark:
  1. Two-way binding is generally applied to form elements (such as: input, select, etc.)
  2. v-model:value can be abbreviated as v-model, because v-model collects value by default.

Two ways of writing el and data

Two ways of writing data and el

1. There are 2 ways to write el
   • (1). Configure the el attribute when new Vue.
   • (2). Dynamic binding: first create a Vue instance, and then specify the value of el through vm.$mount('#root').
2. There are 2 ways to write data
   • (1). Object type
   • (2). Functional style
     How to choose: any writing method can be used at present. When learning components in the future, data must use functional style, otherwise an error will be reported.
3. An important principle: functions managed by Vue must not write arrow functions. Once arrow functions are written, this is no longer a Vue instance

Basic use of events

Basic use of events:

1. Use v-on:xxx or @xxx to bind events, where xxx is the event name;
2. The callback of the event needs to be configured in the methods object, which will eventually be on the vm;
3. The functions configured in methods, do not use arrow functions! Otherwise this is not a vm;
4. The functions configured in methods are all functions managed by Vue, and this points to the vm or component instance object;
5. @click="demo" and @click="demo($event)" have the same effect, but the latter can pass parameters;

$emitDefine the method in the child component and execute the method of the parent component

<!--子组件-->
<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>
<!--父组件-->
<MyButton @increase-by="(n) => count += n" />

Event modifiers in Vue:

1. prevent: prevent the default event (commonly used);
2. stop: prevent event bubbling (commonly used);
3. once: the event is only triggered once (commonly used);
4. capture: use the capture mode of the event;
5. self: the event is triggered only when event.target is the element of the current operation;
6. passive: The default behavior of the event is executed immediately, without waiting for the event callback to complete;

keyboard events

1. Commonly used button aliases in Vue:

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2. Vue does not provide alias keys, you can use the original key value of the key to bind, but pay attention to convert to kebab-case (short horizontal line name)
3. System modifier keys (special usage): ctrl, alt, shift, meta
   • (1).Use with keyup: press the modifier key at the same time, then press other keys, and then release the other keys, the event will be triggered.
   • (2).Use with keydown: normal trigger event.
4. You can also use keyCode to specify a specific key (not recommended)
5. Vue.config.keyCodes. Custom key name = key code, you can customize the key alias

computed property

Computed property:

1. Definition: The attribute to be used does not exist and must be calculated from existing attributes.
2. Principle: The bottom layer uses the getter and setter provided by the Objcet.defineproperty method.
3. When is the get function executed?
   - (1). It will be executed once when it is read for the first time.
   - (2). It will be called again when the dependent data changes.
4. Advantages: Compared with the implementation of methods, there is a cache mechanism (multiplexing) inside, which is more efficient and easy to debug.
5. Remarks:
   1. Computed attributes will eventually appear on the vm, and can be read and used directly.
   2. If the calculated attribute is to be modified, the set function must be written to respond to the modification, and the data in the set will cause the data that the calculation depends on to change.

Monitor properties

Monitoring attribute watch:

1. When the monitored property changes, the callback function is automatically called to perform related operations
2. The monitored attribute must exist in order to be monitored! !
3. Two ways of writing monitoring:

• (1). Pass in watch configuration when new Vue
• (2). Monitor through vm.$watch

conditional rendering

1. v-if writing method:

• (1).v-if="expression"
• (2).v-else-if="expression"
• (3).v-else="expression"
  is suitable for scenes with low switching frequency.
  Features: DOM elements that are not displayed are directly removed.
  Note: v-if can be used together with: v-else-if, v-else, but the structure must not be "interrupted".

2. How to write v-show
   : v-show="expression"
   is applicable to scenes with high switching frequency.
   Features: DOM elements that are not displayed are not removed, they are just hidden using styles
3. Remarks: When using v-if, the element may not be available, but using v-show must be available.

list rendering

v-for directive:

1. Used to display list data
2. Syntax: v-for="(item, index) in xxx" :key="yyy"
3. Traversable: array, object, string (rarely used), specified number of times (rarely used)

form data collection

Collect form data:
If: <input type="text"/>, then the v-model collects the value, and the user enters the value.
If: <input type="radio"/>, then the v-model collects the value value, and the value value must be configured for the label.
like:<input type="checkbox"/>

1. If the value attribute of the input is not configured, then the collection is checked (checked or unchecked, it is a Boolean value)
2. Configure the value attribute of input:

• (1) The initial value of v-model is non-array, then the collection is checked (checked or unchecked, it is a Boolean value)
• 
  (2) The initial value of v-model is an array, so what is collected is an array composed of
  values
  Number
  -trim: Input leading and trailing spaces to filter

filter

Filter:
Definition: Display the data after specific formatting (suitable for some simple logic processing).
grammar:

1. Register filter: Vue.filter(name,callback) or new Vue{filters:{}}
2. Use filter: { { xxx | filter name }} or v-bind: attribute = "xxx | filter name"

Remark:

1. Filters can also receive additional parameters, and multiple filters can also be connected in series
2. Does not change the original data, but generates new corresponding data