Shulou(Shulou.com)06/03 Report--

This article mainly introduces the differences between examples and components in vuejs, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Differences: 1. The instance has an el mount point, but the component does not. 2. In the example is "data: {}", and in the component is "data () {return {}}". 3. The html element of the vue instance is rendered directly to the page, while the html element of the component is defined on the template and then rendered to the page through the call.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The last time I wrote vue single component items and routing, I thought of a problem. New Vue ({… }) is a Vue instance, so is the component a Vue instance?

Analysis.

As I said before, there are two ways of development. One is browser-based (that is, introducing main.js directly into script), and the other is a command-line-based development approach built by vue-cli (a vue project).

Because most of the actual projects use command-line development, it is still the components of command-line development.

In the main.js of the project

/ / The Vue build version to load with the `import`command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from'. / App'import router from'. / router'Vue.config.productionTip = false/* eslint-disable no-new * / new Vue ({/ / here is a vue instance el:'# app',//el mount point router, components: {App}, template:'', / / here the root component})

While in the App.vue code

Welcome! {{name}}, you are {{age}} years old export default {name:' App', data:function () {return {name:'wangyue', age:'25'}},} .font-size: 32px; color: blueviolet;}

The effect picture is as follows, under the purple text can be ignored, here is the content of my route display.

Zoom in and compare.

Differences between instances and components in vuejs

The data of the component is a function and the non-component is data: {}, and the component does not have the option of el mount point. According to the official website, a component is a reusable Vue instance with a name.

In vue projects, there is usually only one VUE instance defined in main.js, and the rest are vue component instances. They are actually vue instances, but that's what I said to make it easier to distinguish. In addition to the root component, there are many widgets in components.

That is:

1. Vue instance has a mount element specified by el, but the component does not, because the component is also called on the rendering page and directly rendered by calling the component name.

2. The data attribute forms of instances and components are different.

Data attribute in vue instance: data: {"name": "aa", "age": 18}

Data attribute in the component: data () {return {"name": "aa", "age": 18}}

3. The html element of the vue instance is rendered directly to the page, while the html element of the component is defined on the template and then rendered to the page by calling.

Thank you for reading this article carefully. I hope the article "what are the differences between instances and components in vuejs" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.