Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use the options option in Vue, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will gain something after reading this Vue options option how to use the article, let's take a look at it.

Five types of properties of the options option in Vue options

Data: data,props,propsdata,computed,methods,watch

DON: el,template,render,rebderError

Lifecycle hook function: beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,erroCaptured.

Resource: directives,filters,components

Combination: parent,mxins,extends,provide,inject

Getting started attribute

El (hang on point)

New Vue ({el: "# app" template: `I am Xiao Ming `}) can use $mount instead of new Vue ({template:` I am Xiao Ming `}). $mount ("# app")

Data (internal data) supports objects and functions, giving priority to functions

Will be monitored by Vue.

Will be proxied by the Vue instance

Every read and write of data will be monitored by Vue.

Vue will update UI when data changes.

Object new Vue ({template: "{{n}}", data: {ndata 0}}). $mount ('# app') function vue non-full version only supports function new Vue ({template: "{{n}}", data () {return {mve5}) $mount ('# app')

Methods (method) event handler or ordinary function

New Vue ({template: "{{n}} {{add ()} button", data: {add 0}, methods: {add () {console.log ('I can be an event handler or an ordinary function')}}. $mount ('# app')

There are three ways of components (vue components: pay attention to case)

Register global components Vue.component ('Deon1', {template: "global components"}) register local components const deon2 = {template: "local components {{n}}", / / data must use the function data () {return {n: "Xiao Ming"} new Vue ({components: {Deon2: deon2, Deon3: {template: "component 3"}}) in the build. Template: `Page `}). $mount ('# app') add components using vue files

Deon4.vue file

I am the deon.vue file {{name}} export default {data () {name: "component 4";},}; div {border: 1px solid red;}

Main.js

Import Deon4 from'. / deon4.vue'Vue.component ('Deon1', {template: "Global components"}) const deon2 = {template: "Local components {{n}}", / / data must use the function data () {return {n: "Xiao Ming"}} new Vue ({components: {Deon2: deon2, Deon3: {template: "component 3"}) in the build. Deon4}, template: `Page `}). $mount ('# app')

Four commonly used Life cycle Hook functions

Created: the instance appears in memory

Mounted: triggered when the instance appears on the page

Updated: a change trigger occurred in the instance

Destroyed: the instance is destroyed and triggered.

New Vue ({template: "{{n}}", data: {ncreated 0}, created () {console.log ("instance is triggered in memory");}, mounted () {console.log ("instance is triggered in the page");}, updated () {console.log ("instance is triggered by a change") }, destroyed () {console.log ("instance destroyed trigger");}}) .$ mount ('# app')

Props (external data) parent component wants to pass values to child groups

Name= "n" (passed in string)

: name= "n" (input this.n data)

: fn= "add": (pass in this.add function)

New Vue ({components: {Deon1: {props: ["m"], template: "{{m}}"}}, template: ``, data: {m: 666}}). $mount ('# app') computed (calculation attribute)

No need to add parentheses

He caches depending on whether the dependency changes (if the dependency does not change, it will not be recalculated)

Type: {[key: string]: Function | {get: Function, set: Function}}

Use

The calculated attribute is the calculated data.

Example 1 user name display

Example 2 list display

Caching

If the dependent attribute does not change, the transformation will not be recalculated.

Getter/setter does not cache by default, and Vue does special treatment.

How do I cache it? Look at the example. This is an example, not an implementation of Vue.

Example: var vm = new Vue ({data: {a: 1}, computed: {/ / read only aDouble: function () {return this.a * 2}, / / read and set aPlus: {get: function () {return this.a + 1}) Set: function (v) {this.a = v-1}) vm.aPlus / / = > 2vm.aPlus = 3vm.a / / = > 2vm.aDouble / / = > 4watch (listening)

If the data changes, the function will be executed

Options.watch usage

This.$watch usage

Deep: called when the property of the listening object changes, no matter how deeply it is nested

Immediate: called immediately after listening starts

Type: {[key: string]: string | Function | Object | Array}

Use

When the data changes, execute a function

Example 1 undo

Example 2 simulates computed, which is silly and usually does not do so.

What is change?

Look at the example

Originally, let obj= {aVuza'}, now obj= {av á n'}, please.

Has obj changed? Has obj.a changed?

Simple types see, complex types (objects) look at addresses

This is actually the rule of =.

Example:

Var vm = new Vue ({data: {a: 1, b: 2, c: 3, d: 4, e: {f: {g: 5}, watch: {a: function (val, oldVal) {console.log ('new:% s, old:% slots, val, oldVal)}, / / method name b:' someMethod' / / the callback will be called when the property of any listening object is changed. No matter how deep it is nested c: {handler: function (val, oldVal) {/ * * /}, deep: true// snooping or not}, / / the callback will be called immediately after the listening starts d: {handler: 'someMethod', immediate: true}, / / you can pass in the callback array They will be called one by one e: ['handle1', function handle2 (val, oldVal) {/ * * /}, {handler: function handle3 (val, oldVal) {/ *... * /}, / *. * /}], / / watch vm.e.f's value: {g: 5}' e.fame: function (val) OldVal) {/ *... * /}}) vm.a = 2 / / = > new: 2, old: 1

Note that the arrow function should not be used to define the watcher function (for example, searchQuery: newValue = > this.updateAutocomplete (newValue)). The reason is that the arrow function is bound to the context of the parent scope, so this will not point to the Vue instance as expected, this.updateAutocomplete will be undefined

Deep: what does true do?

If object.a changes, does object count as change?

If the answer you need is (and it hasn't changed), use deep: true

If the answer you need is (no change), use deep: false

Deep means whether you look deeper when listening to object.

The difference between computed and watch computed calculation Properties

Computed is a computational attribute, that is, it depends on a certain value or props to get the calculated data.

The value of computed is cached after getter execution, and only if the data it depends on changes, getter will be called again to calculate

Asynchronism is not supported. It is invalid when there is an asynchronous operation in the computed, and cannot listen for changes in data.

No parentheses are required when calling

Watch listener

Watch is a listener that listens to a piece of data and then performs the corresponding operation.

Caching is not supported, and the data change will directly trigger the corresponding operation.

The listening function takes two arguments, the first of which is the latest value, and the second is the value before the input

Support for asynchronous operation

Deep option: called when the property of the listening object changes, no matter how deeply it is nested

Immediate: called immediately after listening starts when it is true

This is the end of the article on "how to use options options in Vue". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use the options option in Vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.