About VUE (1)

Dirty check: When a variable defined in angularJS scope changes, a loop check is triggered for all variables. When a change is detected, data is synchronized until all data is stable. When all data is stable, an additional full check is performed. Vue incompatible Ie678 cannot be compatible with SHIM

Shim: This refers to the practice of emulating a new API in an old environment and implementing it using only existing methods in the old environment so that all browsers have the same behavior.

//////////////////////////////////////////////////////////

V-model: Creates two-way data binding for use on form elements

/////////////////////////////////////////////////////////////

V – bind instruction: : SRC = “imgUrl” or v – bind: if you want to use in the attribute data in the data, you need to use to v – bind instruction in vue, called the {{}} interpolation formula, function is used to display the vue of data in the data

//////////////////////////////////////////////////////////

Interpolation expressions: 1. {{}} can display data in data 2. {{}} can appear arbitrary expressions

Note: 1. Do not display non-existent data. 2Copy the code

/////////////////////////////////////////////////////////////

Vue is a constructor that starts with a capital letter
Vue must be managed by Vue in order to be used
El can be set without body and HTML

The difference between a library and a framework: A library is a collection of methods and our dominant logic is a complete set of technical solutions and the framework dominates our logic

/////////////////////////////////////////////////////////////////

V-on: instruction used to register events for elements V-on: event name =” event function”

@click=” event function “@mouseEnter

/////////////////////////////////////////////////////////////////

String reversal example: string.split (”).reverse().join(”)

The split() method is used to split a string into a string array. The reverse() method is used to reverse the order of the elements in the array. The join() method is used to put all the elements in the array into a string

////////////////////////////////////////////////////////////////

@event name =” function name of the event “can be obtained by e. @event name =” function call” if the function is written as a function call, the display passes the event object

///////////////////////////////////////////////////////

V-on event modifier

Stop: prevents bubbling. Capture: streams of events occur during the capture phase. Self: triggers only by yourself

///////////////////////////////////////////////////////////////

Js plus or not semicolon to see their own company

//////////////////////////////////////////////////////////////

V-text (Sets the innerHTML attribute of the current tag. InnerHTML: The tag can take effect in XSS attacks)

//////////////////////////////////////////////////////////////

V-show (controls the show and hide of the current element, and controls the show and hide of the element by display) V-if (controls the show and hide of the element by creating and removing the element) V-show should be used for frequent show and hide switching and for either show or hide, v-if should be used

//////////////////////////////////////////////////////////////

V-if v-else(v-else: follows v-if directly, indicating if and else cases) V-else -if

/////////////////////////////////////////////////////

The V-for directive is used to iterate over an array or an object for which label to render repeatedly. Key v-for=”(item, index) in list”

/////////////////////////////////////////////////////

In-place reuse: VUE updates the page as the data changes. Vue only updates the modified part of the page, which is very high performance

/////////////////////////////////////////////////////

Class =”{box: true, bg: true} “class=”{box: true, bg: true}

/////////////////////////////////////////////////////

Keyboard modifier: Keyboard modifier Usage 1: @ Event name. Keyboard modifier (number) = “event handler” Keyboard modifier usage 2: @ Event name. Keyboard modifier alias = “event processing” enter esc keyboard modifier usage 3: their names Vue. Config. KeyCodes. Huiche = 13

////////////////////////////////////////////////////

ForEach map filter every some find findIndex

ForEach: causes all elements to be executed once. Function parameter 1: item The element currently traversed. Parameter 2: index: Arr.foreach (function(item, index){console.log(111)}) arr.foreach (item => console.log(item))

map: Much like forEach, map returns a new array, Var arr = [1,2,3,4] var arr = [1,2,3,4] 16 var newArr = arr.map(item => item * item)

filter: Filter, very similar to map, will also get a new array, filter, Var arr = [3000, 5000, 10000, 15000, 1500] var newArr = arr.filter(item => item <= 6000)

some: Some methods return booleans, and only one element in the array is true. If all are false, Var arr = [1, 2, 4, 6, 8] var flag = arr.some(item => item%2 === = 1)

Var arr = [0, 3, 4, 6, 8] var flag = arr. Every (item => item % 2 === = 0)

Var result = arr.find(item => item%2 === 1)

Var result = arr.findIndex(item => item%2 === = 1)

////////////////////////////////////////////////////////////////////////

Use of counting attribute: the attribute obtained after calculation, which is equivalent to the attribute calculation in data. Writing of attribute: The corresponding value should be a function, in which the calculation logic can be written, and the final result of calculating attribute is the return value of the function

A calculated property is a property, written as a function, and because a calculated property requires logic, the calculated property corresponds to the result returned by the function
The value of the calculated property changes, and if the dependent data is changed, the calculated property is reexecuted to get the new value. If you use the calculated property more than once, the calculated property is only evaluated once

Instruction access is data in the data, do not when the string {{}} interpolation expression is best to write an attribute in data, although you can write logical expression, but not good later maintenance

Cannot write an arrow expression because there is no “this” in the arrow

Counting attributes compute values through dependencies, which can also be re-evaluated if they change

////////////////////////////////////////////////////////////////////////

Function (value,oldValue){……….. Function (value,oldValue){………. } The default attribute of the listener can only listen for simple types, and for complex types only for complex type address changes

Handler :function(){handler:function(){handler:function(){handler:function(){… }, // deep:true, // deep:true immediate: true // whether to listen immediately (not required)}

//////////////////////////////////////////////////////////////////////

Three uncommon instructions:

A v-cloak! When vue finishes rendering, the v-cloak attribute will be automatically removed. This will only happen when the vue is introduced via script tags. Later we developed vue, but in unit components,.vue with Webpack

V-pre: Improve performance: know that a paragraph does not need to be rendered by vue: the current element will be skipped by vue, and vue will not render the element

V-once: The current element is rendered only once, and subsequent data changes are not re-rendered

//////////////////////////////////////////////////////////////////////

Vue lifecycle: A VUE is a framework, and the logic of the overall VUE has been defined

Vue initialization: 1 new Vue() 2 Initialize internal events, the life cycle begins 3 Define all data in data to vm via Object.defineProperty important: 4 determine if there is an EL parameter, $mount –> > 5 Determine which template vue needs to render, check if there is a template attribute –> Need to render template no –> use el outHTML as template 6 Combine data and template for rendering, and replace el with the rendered structure

Vue update stage: 1. Data on the Vue is changed; 2. Content in the page is re-rendered (loop)

Vue destruction phase: 1 wait until vM. $destroy() method calls 2 uninstall all events listen 3 Vue data changes no longer cause page changes

//////////////////////////////////////////////////////////////////////

Vue hook functions are written directly to vUE instances

Create constructor before and after beforeCreate(){…… } created(){….. } (usually ajax used here)

Beforebeforeafter (can be used to manipulate DOM) beforeMount(){… } mounted(){… }

Data Before and after beforeUpdate() Updated()

BeforeDestroy (){beforeDestroy(){… } destroyed(){… }

////////////////////////////////////////////////////////////////////////////////

Mock data: Mock data

1 NPM i-g json-server (this is to be distinguished from http-server, they are not the same thing)

Json-server data.json // 4 Click the address bar of Resources

Function: 1, you can directly in the address bar + : / id value enter article get to search id = > http://localhost:3000/todo/1 2 paging effect: + : in the address bar? _page what page & _limit = = look at a page limit a few information = > http://localhost:3000/todo? _page=2&_limit=2 3 match the field you want to match +:? Q = field = > http://localhost:3000/todo? q=%E6%B8%B8

Test jSON-server generated add, delete, modify query interface REST interface Query: GET Add: POST Delete: delete Modify: PUT/patch

Query: http://localhost:3000/todos request: get deleted http://localhost:3000/todos/id request: Delete the new http://localhost:3000/todos request method post parameters: Name completed modify http://localhost:3000/todos/id request put parameters: the name is completedCopy the code

////////////////////////////////////////////////////////////////////////////////

Axios ({// request method: ‘get’, // request address URL: “Http://localhost:3000/todos1”}). Then (function (res) {/ / server returned data: Console. log(res.data)}). Catch (function(err) {console.log(err)})

Example: / / modify axios ({method: ‘put’, url: ‘http://localhost:3000/todos/6’ data: {name: ‘smile happily, completed: true } }).then(res => { console.log(res.data) })

////////////////////////////////////////////////////////////////////////////////

Filter:

Define a filter. In VUE, there is no filter by default

Parameter 1: The name of the filter Parameter 2: the logical parameter of the filter: The content to be filtered function must have a return value, indicating the filtered result

Used in an interpolation expression to filter (format) the content of the interpolation expression.

Method of use {{| data filter name}} Linux: pipeline operator

Vue.filter(‘myFilter’,function(input))

Example:

Input is a required parameter that represents the incoming data, which is MSG in this case

When using a filter, you can write the name of the filter directly, or you can write the method called: example: HTML:

///////////////////////////////////////////////////////////

Filter time: introduce moment.json vue.js

/////////////////////////////////////////////////////////////////

Filter: global filter: Global filter can be used in all vue instances. Filter (‘aa’, input => {… })

A local filter, which can only be used in the current VUE instance and is usually written to the VM, is an object of the same rank as data

//////////////////////////////////////////////////////////////

Es6 feature:

let const
Arrow function
find findIndex
String startsWith endsWith includes
Short for object
1. If the attribute name and value name of an object are the same, you can omit one of them
2. Methods in objects can be omitted
sayHi:function(){… } === sayHi(){… }
Default values for function arguments –> default arguments can be written in ()

Function to the add (n1 = 0, n2 = 0) {/ / function parameters default / / n1 = n1 | | 0 / / n2 = n2 | | 0 console. The log (n1 + n2)} 7. Template strings In ES6, you can use backquotes to define a string

Allow a newline
Interpolation ${} is allowed in a string.

///////////////////////////////////////////////////////////

Vue responsive data description: VUE responsive data, hijacked by Object.defineProperty data

Principle: The data to be used must be declared in data
Vue does not listen for array length subscripts and normal object incrementing and deleting mutants (methods that change the original array)
The $set method adds an attribute to the VM dynamically, responsively

Set === vm. set == vm. set == vM. set == vM. set == vM. set == VM. set == VM. set == VM. set

////////////////////////////////////////////////////////////

Vue asynchronous update description: If the data in the VUE changes, the content in the page will change accordingly. If the data in the VUE changes, the content of the page does not change immediately; the operation is asynchronous.

NextTick is used to retrieve dom elements after data manipulation (this is done after the DOM has been re-rendered) (this is a bit like turning on a delay timer)

//////////////////////////////////////////////////////////////////////

Component: We can think of a component as a custom HTML tag with its own content, style, and functionality

Component: Component

Parameter 1: component name Parameter 2: Component configuration items must specify a template property, which must be given a scope HTML:

Hello, THIS is the Name component

A component is a vUE instance that you can reuse, you can think of a VM instance as a component components have a name components have configuration items that you can use in a VUE instance, you can also use data Methods filters in components computed watch components don’t specify EL, But template is specified, and template must specify a root element

Components do not specify el, but template
The data in the component must be a function that also needs to return an object so that each instance can return a separate object

//////////////////////////////////////////////////////////////////

A component is an independent VUE instance, and data is independent of each other. Data between components cannot be shared

/////////////////////////////////////////////////////////////////

Component communication: parent to child

How to form parent-child components: Do you need to use child components in the parent’s template to form parent-child relationships

The parent component adds a custom property to the child component: 1 The parent component adds a custom attribute to its child component. 2 In the child component, use the props attribute to receive data for the component. Data: Provides its own data

Example:

// The value passed from parent to child

Import procedure: Import components first and then the root VM

Procedure: 1 The parent component can add a custom attribute to its child component. 2 The child component uses the props attribute to receive data from the parent component. The name of the child component to receive data must be the same as the name of the custom attribute

/////////////////////////////////////////////////////////////////////

Component communication: child to parent

1 The parent provides a method (with parameters that can be passed in) 2 The parent registers a custom event to the child (passing the method to the child @ whatever event name =” event name in the parent “)(passing a function to the child) 3 $emit(‘ whatever event name ‘, property in this.data, property in this.data……) The child component passes the value that needs to be passed to the parent component as a parameter. 4 Registers the event in the template of the child component and invokes the method in the child component. 5 When the child component event is triggered, the parameter will be passed to the parent component

//////////////////////////////////////////////////////////////

Unidirectional data flow: The parent component transmits values to its children. The children use props to receive data whenever the parent component is updated, and the data received by the props is also updated. The props is read-only and cannot be modified

Every time a parent prop is updated, all the props in the child component will be issued with the latest value, so you should not change the prop inside a child component or the console will warn you

If a subcomponent modifiers, it is best not to modify the props and the address of the complex type because it will report an error

////////////////////////////////////////////////////

Component communication: non-parent-child relationship A(sender) sends A message to B(receiver) 1 B provides A method getMsg(){… Const bus = new Vue() const bus = new Vue()

mounted
bus.$on('sb',this.getMsg)
Copy the code

$emit(‘sb’,this.msg) $emit(‘sb’,this.msg)

4 A can pass MSG to B

Note: 1 A and B must board the same bus. 2 The name of the event triggered by A must be the same as the name registered by B

A bus is just an empty vUE instance

Emit triggers the event vm.off removes the event vm.$on listens for custom events for the current instance

1 A wants to send a value to B. 2 A emitted the value and emit it. 3 B emitted the value and emit it

///////////////////////////////////////////////////////////

Component: a globally defined component that all instances can use to define a local component, only for the current instance

////////////////////////////////////////////////////////////////

Slot: When defining a component, if you want content to be passed through the component, you need to specify that the content passed to the component will be discarded if there is no slot inside the component. If there is no name attribute, the default slot –> content replaces the default slot

Named slot: Template:

////////////////////////////////////////////

SPA: Single-page application: A Web application with only one Web page that loads a single page and dynamically updates the page as the user interacts with the application requests different content with different hashes (hashchange)

Advantages: 1. Reduce the request volume, speed up the page response, reduce the pressure on the server 2. Improve user experience

Cons: Bad for SEO

Native: window.addeventListener (‘hashichange’,function(){… })

My home page –># page does not jump to location.hash to get the current page hash

/////////////////////////////////////////////////////////////////////////

Vue bucket —–vue. Router Routing rule: a function that maps you to different pages based on the given URL

And vue router: depending on the different anchor point values, gives you the ability to map to different components to ue Router: Build a single page application with only one page, and components can have many steps: Vue.components('music', {template; Vue.components('music', {template; ` < div > this is a component < / div > `}) = = = > const Home = {template: `... '} create a vueRouter object ----- Route object 2 attributes // Specify rules for the route path:/home home const Router = new VueRouter({routes:[{path:' path ', Component :Home},{...},{...}]}) const VM = new Vue({el:'#app',router:router}) const vm = new Vue({el:'#app',router}) specifies the exit of the route <router-view></router-view> Route entry equivalent to a for clicking to replace different components <router-link to=" path ">XX</router-link>Copy the code

Vue enclosing in the router. Push (parameters) implemented page jump: https://blog.csdn.net/qq37548296/article/details/90446430 we before execution redirect users click on the button will perform a series of methods, You can use this.router.push (parameter) to jump to the page: https://blog.csdn.net/qq_37548296/article/details/90446430 we before execution redirect users click on the button will perform a series of methods, Then you can use this. The router. Push (parameters) implemented page jump: https://blog.csdn.net/qq37548296/article/details/90446430 we before execution redirect users click on the button will perform a series of methods, In this case, you can use this.router.push(location) to change the URL to complete the jump. Push can be followed by an object, Push (‘/home/first’) // object this.router.push(‘/home/first’) // object This. Router. Push (‘/home/first’)// Object this.router. Push ({path: ‘/home/first’}) // Named route this. ‘home’, params: { userId: wise }})

1 params Since dynamic routes also pass params, path cannot be used with params in this.$router.push(), otherwise params will not work. You need to use name to specify the page and access the patAMS pass parameter through the name attribute configured in the route. The path cannot be used, only name can be used, otherwise the passed data cannot be obtained

/* router.js file */ import Vue from “Vue “; import Router from “vue-router”; import MediaSecond from “@/views/EnterprisePage/MediaMatrix/second”; // List of information

Vue.use(Router); Export default new Router({routes: [/* Configure routes */ {name: "MediaSecond", Path: "/MediaSecond", Component: MediaSecond }, ]Copy the code

})

/ * page accessed by the name, transfer params: * / this. $router. Push ({name: ‘MediaSecond, params: {artistName: artistName, imgUrl: imgUrl, type: 2}})

/ * in the target page on this. The route. Params acquisition parameters: ∗ / if (this. The route. Params acquisition parameters: * / if (this. The route. Params for parameters: * /if(this.route.params.type == 2) {this.type = apis. GetAtistDetails; } else { this.type = apis.getMessageList; }

The query preach “/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

Webpack: Static module packer (packaged together) GULP (smaller projects, task-based)

NPM installation package description: NPM I --save NPM I -s NPM I save NPM I in Dependencies NPM i-g: NPM i-g: NPM i-g: NPM i-g: NPM i-g: NPM i-g: NPM i-g: NPM i-g --save -- dev NPM I -d devpm I dependencies NPM scripts: NPM scripts are alibis for configuration commands such as package configuration: "cc": "npm install jquery" "start": NPM run cc/NPM start Where start/stop in the alias can omit run ->: NPM startCopy the code

///////////////////////////////////////////////////////////

How to use WebPack:

1 Install the dependency package NPM I webpack webpack-cli -d NPM It is slow to download something because it is downloaded in serial mode. Yarn download is fast. 2 Configure the alias "build":"webpack" in scripts and specify which file to package 3 run NPM run build to import only one bundle.js webpack supports nodeJS modularize to import files in main.js: Const $= require('jquery') --> nodejs modular require('./aa').... Production: the default value is production/development. Production: the default value is production. Development: the default value is development. "Build ":"webpack js/main.js -o dist/bundle.js --model=development" Module. exports = {webpack.config.js = {webpack.config.js = {webpack.config.js = {module. Entry: path. Join (__dirname, 'the directory', 'files'), the output: {path: the path. The join (__dirname,' dist), filename: 'bundle. Js'}, mode:' packaging '}Copy the code

///////////////////////////////////////////////////////////////

There’s a lot more… Skip over… Es6 modularity: Import file: Exact import: import {from ‘./js/tool’ export {num,fn}—– Precise export (accurate export is usually written to the end)

Default export: import XXX from ‘./js/tool’ export default sayHi // ES6 modularity allows one default export at most./ / Default export does not need to be named

/////////////////////////////////////////////////////////////////////

Single-file component:

Hello, THIS is the Name component

Related Posts

CSS Notes: Write down some CSS tips you’ve learned

Understand the new ES6 specification from simple examples — callback hell, Promise objects, async await functions

File system – C/C++ programming for WASM open source book