Vue quick start

Time:2021-1-12

Vue is Vue.js It is a popular front-end development framework and has developed into an excellent front-end ecosystem.

Before learning Vue, you need to have the basic knowledge of HTML, CSS, JavaScript, and the experience of using these technologies to develop websites.

If you are not familiar with JavaScript, you can’t understand it Vue.js 。 So readers, please study well according to your own situation Vue.js Let’s get ready.

Once you have the basic knowledge, you start to build an environment and learn while using it.

There is no doubt that reading while doing is the best way to master an applied skill.

install

For small projects, just Vue.js Library forquoteJust add it to the project.
For large projects, NPM installation is officially recommended Vue.js And supporting various expansion tools.

quote

Here is the official method for reference:

#Test environment
<script></script>

#Production environment - specified version
<script></script>

#Native es modules environment
<script type="module">
  import Vue from https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>

install

NPM is a package management tool of JS / node. Vue tools use NPM to install other related JS packages to local projects.

The Vue installation process from scratch is listed below:

#Install node version management tool [NVM]( https://github.com/nvm-sh/nvm )
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

#Install the latest version of node
nvm install node

#Installation

principle

To grasp the essence of Vue, we need to keep the following points in mind:

Virtual DOM

Virtual DOM is the virtual DOM element, which does not need to be defined in the HTML node tree in advance. Instead, we first “build” what the virtual DOM wants to do, and then mount it into the real HTML structure, so as to realize the so-called MVC of the front end.

The fundamental principle of Vue is virtual DOM technology.

Root object

Whether you have studied JS or not, you must understand that in JS, everything is object. A variable, a class, and a function all have the characteristics of an object.

The so-called root instance of Vue is the most basic object. For other children defined in Vue object, Vue root instance is their parent object.

This is generally used to represent the root instance itself.

Format JSON

In the Vue root instance, “data + function group options” are mainly displayed in JSON format. Data can be written as object or function (it must be written as function in Vue component)

var app = new vue({
    el: '#app',
    
    data:{
      message: 'hello World'
      },
    
  data: function() {
    return {
      mess: 'hello World'
    },
    
    created: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    methonds: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    mounted: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    beforeDestory: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    filters: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    computed: {
      functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      }, 
}
)

Vue life cycle

Vue instances have a life cycle, as shown in the following figure:

Vue quick start

Flexible data binding

The Vue instance is the foundation of the combination, but it needs to be connected with the HTML node to work.

This connection process is called data binding.

In Vue technology system, the technical elements related to data binding include:

  1. Instructions: V-model, v-on: Click | dblclick | Keyup | MouseMove, v-bind, v-html, V-IF, v-pre, etc..
  2. Interpolation: {message}, {message | filter}, etc.

This article was originally published by websoft9, please indicate the source of reprint. Creation is not easy, welcome to discuss, thank you for your support!

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]