分类
前端 技术

VUE BASIC

vue is a progressive framework.

Vue is an open-source model–view–viewmodel front end JavaScript system.

vue application is a mvvm sytem which consist of root vue instance and sub vue instance, and is used to build user interfaces by interconnection.

Vue application

definition

vue is a progressive framework.

Vue is an open-source model–view–viewmodel front end JavaScript system.

vue application is a mvvm sytem which consist of root vue instance and sub vue instance, and is used to build user interfaces by interconnection.

purpose

building user interfaces and single-page applications.

interconnection

lifecycle stage

  • 1. invoke new Vue() constructor
  • 2. init event and lifecycle
  • => beforeCreate
  • 3. init rejection and reactivity
  • => created
  • 4. compile el or template
    • Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes
  • => beforeMount
  • 5. create “$el” and replace el with id
  • => mounted
  • 6. mounted status
    • when data changes
      • => beforeUpdate
      • re-render and patch
      • => updated
  • => beforeDestory
  • 7. teardown watchers, listeners and child components
  • 8. => destory

note: ‘=>’ ref to lifecycle hooks

elements

properties and methods

  • properties
    • Data
      • The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it “reactive”.
      • Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance.
      • After the instance is created, the original data object can be accessed as vm.$data. The Vue instance also proxies all the properties found on the data object, so vm.a will be equivalent to vm.$data.a.
      • When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.
    • computed property
      • Computed properties to be mixed into the Vue instance. All getters and setters have their this context automatically bound to the Vue instance.
      • note: Note that if you use an arrow function with a computed property, this won’t be the component’s instance
      • Computed Caching vs Methods
        • computed function will be cache unless the reactive dependencies is change. In cases where you do not want caching, use a method instead.
    • watched property
      • Vue does provide a more generic way to observe and react to data changes on a Vue instance: watch properties. When you have some data that needs to change based on some other data, it is tempting to overuse watch
  • methods
    • Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their this context automatically bound to the Vue instance.

dom

  • el
    • Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.

After the instance is mounted, the resolved element will be accessible as vm.$el.

  • template
    • syntax
      • Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
    • Interpolations
      • Text(“Mustache” syntax)
        • ex: Message: {{ msg }}
      • Raw HTML
        • The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive
        • ex: Using v-html directive:
      • Attributes
        • Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive
        • ex:
        • note: If it has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered element.
      • Using JavaScript Expressions
        • note: These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain one single expression
        • note: Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date. You should not attempt to access user-defined globals in template expressions.
    • Directives
      • definition
        • Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for, which will be discussed later). A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes.
      • Arguments
        • Some directives can take an “argument”, denoted by a colon after the directive name.
        • ex:
        • Dynamic Arguments
          • ex:
          • Starting in version 2.6.0, it is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets
          • Constraints
            • Dynamic arguments are expected to evaluate to a string, with the exception of null. The special value null can be used to explicitly remove the binding. Any other non-string value will trigger a warning.
            • Dynamic argument expressions have some syntax constraints because certain characters
      • Conditional
        • v-if
          • The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.
        • v-else
          • You can use the v-else directive to indicate an “else block” for v-if.
          • A v-else element must immediately follow a v-if or a v-else-if element – otherwise it will not be recognized.
        • v-else-if
          • The v-else-if, as the name suggests, serves as an “else if block” for v-if. It can also be chained multiple times
        • key
          • Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. Beyond helping make Vue very fast, this can have some useful advantages. But we can add key to disable re-using.
        • v-show
          • Another option for conditionally displaying an element is the v-show directive. The usage is largely the same
          • The difference is that an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.
      • Modifiers
        • Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way.
    • Shorthands
      • v-bind Shorthand
      • v-on Shorthand
    • Class and Style Bindings
      • Vue provides special enhancements when v-bind is used with class and style. In addition to strings, the expressions can also evaluate to objects or arrays.
      • Binding HTML Classes
        • We can pass an object to v-bind:class to dynamically toggle classes or We can pass an array to v-bind:class to apply a list of classes
        • We can also bind to a computed property that returns an object. This is a common and powerful pattern
      • Binding Inline Styles
        • The object syntax for v-bind:style is pretty straightforward – it looks almost like CSS, except it’s a JavaScript object.
        • The array syntax for v-bind:style allows you to apply multiple style objects to the same element

lifecycle function

  • definition
    • functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.
  • element
    • created
    • mounted
    • updated
    • destroyed
  • note
    • Don’t use arrow functions on an options property or callback, Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found

event