Getting Started with Vue

This time I will bring you the instructions for newbies to get started with vue. What are the notes for novices to get started with vue. Here are practical cases, let’s take a look.

vue is a progressive framework for building user interfaces. This article introduces the introductory tutorial to vue through examples. It is suitable for beginners. It is very good and has reference value. Friends who need it can refer to it

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

 

  

{{title}}

  单击事件
  

今年{{age}}

    

var app = new Vue({  //通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用  el: '#app', //指定页面上一个已经存在的DOM元素来挂载Vue实例  data: {  //对象的数据   title: 'hello vue', //通过插值语法{{}}绑定   age: 22  //通过v-model进行双向数据绑定  },  methods: { //对象的方法   say: function(){    console.log(this.title);   }  },  watch: { //监听数据的变化   'age': function(newVal, oldVal){    console.log(newVal, oldVal);   }  } });

4. VueLife 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!

Recommended reading:

Detailed explanation of using JS date and time selector

Detailed explanation of vue axios request timeout processing (with code)

The above is the detailed content of Getting Started with Vue. For more information, please follow other related articles on the PHP Chinese website!