Using vue from scratch

This time I will bring you the use of vue from scratch. What are the precautions for using vue from scratch? The following is a practical case, 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

Every 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 most 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!