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 <script> tag , Vue will be registered as a global variable. </script>

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

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

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

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:

What are the precautions for using Dom with Angular2

Using FileReader API

The above is the detailed content of Using vue from scratch. For more information, please follow other related articles on the PHP Chinese website!