How to use Vue components

This time I will show you how to use Vue components and what are the precautions when using Vue components. The following is a practical case, let's take a look.

Vue instance

Project startup process

Look at our project now and think about the startup process of the entire project (to open the index directly .html method access as an example to illustrate)?

You first opened index.html, there was only one p with id='root' written in it, and you introduced the packaged code, and then Vue must have run it by itself (it can be considered as Vue initialization).

Next, entry.js should be executed (because the packaging is packaged by webpack, this is the entry file you configured).

What entry.js does? Yes, it creates a Vue instance object, and then the area managed by this object is known based on the el attribute. It should be the p with id='root' in index.html, so The only thing left is to understand how this Vue instance object manages this area. This is the next content.

What is a Vue instance object?

According to the official documentation: Every Vue application starts by creating a new Vue instance using the Vue function.

You can simply understand that it is just an ordinary object, but this object has been given some special functions. Let us get to know it!

[We will all conduct experiments on the Vue object created in entry.js]

The method of creating a Vue instance object is as follows:

var vm=new Vue({
  //一堆配置
});

Therefore , what I want to talk about next are some commonly used configurations (not all, the more special ones should be mentioned later, after all, they are all from the beginning, I am afraid that both of us will be too tired).

Basic configuration of Vue instance objects

[1]el: selector | DOM node

In our project, we configure:

el:'#root'

This is a string, somewhat similar to CSS selector, which will use the found node as the management area (of course there are other CSS options The device can also be used).

In addition, you can also directly pass a node. For example, let's modify the code now:

el: document.getElementById('root')

This is also possible, you can try it.

【2】render:(createElement:()=>VNode)=>VNode

The above is the arrow function writing method of ES6, for example:

((x,y)=>x+y)(1,2)

The writing method of ES6 above is equivalent to the writing method of ES5 below:

(function(x,y){
  return x+y;
})(1,2);

Simply put: (x,y)=>x y means a function with two parameters x and y and returns x y, so The above function is written in ES5:

function(createElement){
  //createElement是一个函数，返回类型为VNode
  //这个函数的返回类型也应该是VNode
  return VNode;
}

Note: VNode is a virtual node generated by Vue compilation. Think about Jquery nodes and Node nodes. They taste very similar.

Therefore, I slightly changed the render in the project:

render: function (createElement) {
  return createElement(App);
}

Is it very clear? To put it bluntly, it is a function whose final return value is VNode.

So when you see the two words "node", you should be able to understand why the page displays the template in the App. You may also have a sense of how to adjust the routing and why the .vue file is configured.

[3]router:VueRouter

This is easier to understand, that is, you know what routing configuration is used. Since the project is:

router:router

It looks strange, we Modify it slightly:

//上面的import routerObj from './router';这一句要跟着修改一下
router: routerObj

That’s it for the basics, just three. Because other attributes are related to many things, I will explain them little by little.

Vue ObjectLife Cycle

I won’t include the official picture. I don’t think it means much. I recommend you to take a look after you get started, so the following articles may can speak.

Let’s first modify the code in entry.js and see the running results. The following is the code:

//根对象
var vm = new Vue({
  //挂载点
  el: document.getElementById('root'),
  //2.使用刚刚的路由配置
  router: routerObj,
  //启动组件
  render: function (createElement) {
    return createElement(App);
  },
  //下面是Vue对象的几种状态
  beforeCreate: function () {
    console.debug('Vue对象目前状态：beforeCreate');
  },
  created: function () {
    console.debug('Vue对象目前状态：created');
  },
  beforeMount: function () {
    console.debug('Vue对象目前状态：beforeMount');
  },
  mounted: function () {
    console.debug('Vue对象目前状态：mounted');
  },
  beforeUpdate: function () {
    console.debug('Vue对象目前状态：beforeUpdate');
  },
  updated: function () {
    console.debug('Vue对象目前状态：updated');
  },
  beforeDestroy: function () {
    console.debug('Vue对象目前状态：beforeDestroy');
  },
  destroyed: function () {
    console.debug('Vue对象目前状态：destroyed');
  }
});

Run it and see the console.

So, that is to say, the Vue object provides a hook method when the state changes at each stage from before it is created to when it finally dies. You can register it if you want to do it when a specific state changes. If you order something.

到这里，基本上Vue对象实例应该比较清楚了吧？看看我们的代码，应该只有那几个.vue的文件里面的东西没有说清楚了（本文就是把前面写过的代码都说清楚，后面就可以一个新知识点接着一个的来丰富项目，因为都没有疑惑了，学习起来应该不会痛苦了吧！）。

Vue组件实例

说明

Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种，比如你还可以通过Vue.component()的方法来创建，不过这些都以后吧，我们这里就只说明.vue文件这一种（不喜欢一下子说太多，而且仔细想想，不就是API吗）。

【下面都是在PageTwo.vue里面进行修改，菜单名称修改为:Vue组件实例】

.vue文件的基本模板如下（下面都会是ES5的写法，本人还是不太喜欢ES6或者TS，原谅我，反正本质一样）：

<template>
  
</template>
<script>
export default {
 //一些配置，和前面说的Vue实例类似
}
</script>
<style>
</style>

三个地方，分工明确：模板 + 控制 + 样式

接下来我们说明配置中常用的选项（很多具体的就留到后面一点点品位，好吧，留的有点多）：

常用配置
【1】data

先看看PageTwo.vue现在的代码：

<template>
  <section>
    <input type="text" v-model="justDoIt">
    <p>
      输入的数据：{{justDoIt}}
    </p>
  </section>
</template>
<script>
export default {
 //一些配置
 data() {
  return {
   justDoIt: "初始化数据"
  };
 }
};
</script>
<style>
</style>

模板中的代码应该不用说了吧，前面一篇文章说的很清楚了，直接看看data。

其返回了一个键值对（还有别的写法，推荐你这样写，因为这里如果"初始化数据"这几个字是变量，这种写法形成了闭包，是安全的），在这里就是给当前组件对象是data里面添加了一个justDoIt的数据，然后上面或者别的地方才可以用，他就是干了这事情。

【2】methods

接着，我们添加一下methods属性：

methods: {
  doIt() {
   alert(this.justDoIt);
  }
}

其实methods和data类似，只不过是用来添加的不是数据，而是方法，因此，你现在可以在模板里面添加下面代码来调用这个方法（记住，添加的全部代码必须由一个标签包裹）：

<input type="button" value="DoIt" v-on:click="doIt()">

v-on:click就是类似原生的onClick，不过因为是vue的方法，你应该用他的。

现在，你可以点击一下页面的按钮试一下，是不是很舒服。

【3】watch

这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合，比如你添加下面的代码：

watch: {
  justDoIt: function(newval, oldval) {
   console.log("justDoIt改变了，新值为：" + newval + ",旧值为：" + oldval);
  }
 }

如何你运行一下，打开控制台，修改输入框的值的时候，是不是控制台时刻打印了这句话。

【4】computed

这个叫做计算属性，前面一篇文章说过了，不清楚的看看PageOne.vue，应该可以明白。

简单的说就是，它用到的data里面的值改变的时候，自己会重新计算。

生命周期
和Vue对象一样，也有类似的生命周期钩子，你可以试试，这里就随便提一下。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Vue实现PopupWindow组件

如何操作jQuery实现电子时钟效果

The above is the detailed content of How to use Vue components. For more information, please follow other related articles on the PHP Chinese website!