Basic knowledge for newbies to vue

This time I will bring you the basic knowledge of what novices of Vue need to know about getting started. What are the precautions that novices of Vue need to know. Here are practical cases. Let’s take a look.

1. What is vue

Vue is a progressive framework for building user interfaces.

Only 17kb after compression

2. Vue environment construction

You download it directly and import it with the tag , Vue will be registered as a global variable.

But it is recommended to use NPM installation when building large applications with Vue.

The recommendation here is to use Taobao's cnpm, which is very fast

npm install -g cnpm --registry=https://registry.npm.taobao.org Then install it

# 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖，走你 cd my-project npm run dev 3. The first vue application

单击事件 今年{{age}}

4. Vue Life cycle

When each Vue instance is created, it will go through a series of initialization processes and also call corresponding life cycle hooks. We can use these hooks to execute our business logic at the appropriate time.

The general life cycle is: created---mounted---destroy

The more commonly used life cycle hooks of Vue are:

• created is called after the instance is created. At this stage, data observation, etc. are completed, but it has not been mounted yet, and $el is not available yet. It will be more useful when you need to initialize and process some data.

• mounted el is called after mounting to the instance. Generally, our first business logic will start here.

• beforeDestroy is called before the instance is destroyed. Mainly unbind some events monitored using addEventListener.

var app =new Vue({ el: '# app', data: { a: 2 } , created: function () { console.log(this.a); //2 }, mounted: function () { console.log(this.el); //

} }); A complete life cycle diagram:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the PHP Chinese website article!