search
HomeWeb Front-endJS TutorialDetailed explanation of Vue component use cases

Detailed explanation of Vue component use cases

May 15, 2018 am 09:52 AM
useCaseDetailed explanation

This time I will bring you a detailed explanation of the use cases of Vue components. 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 as:

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

Note: VNode is a virtual node compiled and generated by Vue. 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>

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中文网其它相关文章!

推荐阅读:

Angular5路由传参使用详解

jQuery遍历XML节点与属性实现步骤

The above is the detailed content of Detailed explanation of Vue component use cases. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UsePython vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesPython vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software