Vue novice tutorial

This time I will bring you an introductory tutorial for vue novices. What are the precautions for novices in vue. The following is a practical case, let’s take a look.

Recommended learning:

《Vue Framework Video Tutorial》

《vue.js introductory video tutorial》

《Vue2.0 Getting Started and Learning Practical Project Video Tutorial》

《马子Academy Vue.js video tutorial》

1. What is vue

Vue is a progressive framework for building user interfaces.

After compression, it is only 17kb

2. Vue environment construction

If you download it directly and import it using the <script> tag, Vue will be registered as a global variable. </script>

However, 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

nbsp;html>


 <meta>
 <title></title>


 <p>
  </p><p>{{title}}</p>
  <button>单击事件</button>
  <p>今年{{age}}</p>
  <input>
 


<script></script>
<script></script>
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. 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); //<p></p>
 }
});

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

Recommended reading:

Detailed explanation of webpack’s mobile-side automatic construction rem method

How to package Vue projects by environment

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