Mobile and Vue-related issues

1-PC End and mobile side

Under PC, HTML is based on the width of the viewable area by default. When a mobile device does not fit, the HTML width is 980.

2-1 Pixel Restore

Get pixel ratio: window.devicepixelratio

Calculate zoom ratio:1/window.devicepixelratio

3-Unit

PX: Fixed value, absolute unit,%: relative unit, EM: relative unit, relative to itself or parent element font size calculation; REM: relative units, only affected by the font size of HTML.

4-Default style of the mobile side

Handle finger press the transparent matte layer

A

   -webkit-tap-highlight-color:transparent;

}

Working with FORM element default styles

input {

   -webkit-appearance:none;

}

5-vue Features

Responsive data binding, once the data is changed, the view is automatically updated, no additional operations are required, and a composable view component divides the large functional modules into small-grained components for reasonable splitting and grouping.

6-vue life cycle

The process of creating a Vue instance from creation to destruction is the life cycle. Start creation--initialization data--compile template-mount Dom

, such as rendering, unloading and so on, each procedure can invoke various hooks functions.

function of key value in 7-v-for directive

The in-place multiplexing policy is used by default when updating a list of elements that have been rendered. If you delete the first data, Vue does not regenerate the new element, but instead re-uses the first element, the style added on the first element will not be erased or even affect the page presentation. To give Vue a hint so that it can track the identity of each node, it needs to provide a unique key attribute for each item.

8-Single data stream

Vue uses a one-way flow of data that only flows from the parent component to the child component, which cannot modify the incoming data from the parent component, or Vue will give a warning.

9-Communication between components

A component is an instance of an independent scope, a component that can be reused, and when different data is presented, it is necessary to pass data to the component.

State changes within a component do not affect other components, and the parent component is concerned with the child component state and listens with custom events.

Child components, parent component, using prop to pass parameters

Parent component, subcomponents, using custom events to listen for state changes

10-slot Distributing Content

In order for components to be composable, a way to mix the contents of the parent component with the child's own template, this process is known as content distribution. Vue.js implements a content distribution app that uses special elements as the slots for the original content.

Use slots to customize the structure of your individual components.

11-Implementing Subcomponents bidirectional data binding

To enable the V-model of a component to implement bidirectional data binding, you must satisfy two conditions: accept a Value property, and trigger the input event when there is a new value.

12-Asynchronous components

In large applications, you may want to split your app into smaller modules and download them on demand from the server. Vuejs allows you to define a component as a factory function that dynamically resolves the definition of a component. The factory function is triggered when the component needs to render, and the result is cached for subsequent rendering.

Configuration analysis of Webpack in 13-vue-cli scaffold

VUE-CLI Scaffolding helps us to write the basic code, which has the functions of generating directory structure, local development debugging, code deployment, unloading, unit testing and so on.

VUE-CLI is a build tool that uses Webpack. Read the source code of the configuration file of the generated project directory, analyze the basic configuration of webpack, and generate middleware used in memory file and hot load.

Turn from:

http://mp.weixin.qq.com/s__biz=MzA3MDU0NDE5MA==&mid=2247483856&idx=1&sn= 4a8baf8e21b9a343474e1bd3e649dab4&chksm= 9f3a7f81a84df69765a5ec9b76d46bdfeb38d786679c7b407b12e79b2b4da7e9635d29ae4ac3&mpshare=1&scene=1& Srcid=0425ew7p0tx6c29i8wxblubh#rd

Mobile and Vue-related issues