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!

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 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.

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'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.

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 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 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 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.


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

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

Dreamweaver Mac version
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

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