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中文网其它相关文章!
推荐阅读:
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!

C++中的众数函数详解在统计学中,众数指的是一组数据中出现次数最多的数值。在C++语言中,我们可以通过编写一个众数函数来找到任意一组数据中的众数。众数函数的实现可以采用多种不同的方法,下面将详细介绍其中两种常用的方法。第一种方法是使用哈希表来统计每个数字出现的次数。首先,我们需要定义一个哈希表,将每个数字作为键,出现次数作为值。然后,对于给定的数据集,我们遍

C++中的取余函数详解在C++中,取余运算符(%)用于计算两个数相除的余数。它是一种二元运算符,其操作数可以是任何整数类型(包括char、short、int、long等),也可以是浮点数类型(如float、double)。取余运算符返回的结果与被除数的符号相同。例如,对于整数的取余运算,我们可以使用以下代码来实现:inta=10;intb=3;

Vue.nextTick函数用法详解及在异步更新中的应用在Vue开发中,经常会遇到需要进行异步更新数据的情况,比如在修改DOM后需要立即更新数据或者在数据更新后需要立即进行相关操作。而Vue提供的.nextTick函数就是为了解决这类问题而出现的。本文就会详细介绍Vue.nextTick函数的用法,并结合代码示例来说明它在异步更新中的应用。一、Vue.nex

PHP-FPM是一种常用的PHP进程管理器,用于提供更好的PHP性能和稳定性。然而,在高负载环境下,PHP-FPM的默认配置可能无法满足需求,因此我们需要对其进行调优。本文将详细介绍PHP-FPM的调优方法,并给出一些代码示例。一、增加进程数默认情况下,PHP-FPM只启动少量的进程来处理请求。在高负载环境下,我们可以通过增加进程数来提高PHP-FPM的并发

在Web应用程序中,缓存通常是用来优化性能的重要手段。Django作为一款著名的Web框架,自然也提供了完善的缓存机制来帮助开发者进一步提高应用程序的性能。本文将对Django框架中的缓存机制进行详解,包括缓存的使用场景、建议的缓存策略、缓存的实现方式和使用方法等方面。希望对Django开发者或对缓存机制感兴趣的读者有所帮助。一、缓存的使用场景缓存的使用场景

在PHP开发中,有时我们需要判断某个函数是否可用,这时我们便可以使用function_exists()函数。本文将详细介绍function_exists()函数的用法。一、什么是function_exists()函数?function_exists()函数是PHP自带的一个内置函数,用于判断某个函数是否被定义。该函数返回一个布尔值,如果函数存在返回True,

PHPstrpos()函数用法详解在PHP编程中,字符串处理是非常重要的一部分。PHP通过提供一些内置函数来实现字符串处理。其中,strpos()函数就是PHP中最常用的一个字符串函数之一。该函数的目的是在一个指定的字符串中搜索另一个指定字符串的位置,如果包含则返回这个位置,否则返回false。本文将通过详细分析PHPstrpos()函数的用法,助你更好

Python是一种简洁、易学、高效的编程语言。它广泛应用于各种领域,如数据科学、人工智能、游戏开发、网络编程等。虽然Python自带有一些GUI库,但他们的功能较为简单,无法满足各类复杂应用的需求。因此,Python中有许多GUI库可供选择,其中wxPython是其中一个,本文将详细介绍。wxPython简介wxPython是一个开源、跨平台的GUI库,它基


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SublimeText3 Linux new version
SublimeText3 Linux latest version

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version
Useful JavaScript development tools

SublimeText3 English version
Recommended: Win version, supports code prompts!
