What are components?
Component is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements, and Vue.js' compiler adds special features to it. In some cases, components can also be in the form of native HTML elements, extended with the is feature.
This article is a more detailed explanation compiled by the editor based on the official documents. The code is more complete and perfect, which is very suitable for beginners to learn.
Official Documentation:
http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6
Components - Miscellaneous items are detailed as follows:
① Components and v-for
Simply put, the components are reused multiple times;
For example, a certain row in the table, or e-commerce product window display (single window), can become components that can be reused;
Just write one of them as a component and then make the data source an array (or object, but I personally think it is an array). Through v-for traversal, each instance of the component can obtain one of the array, thereby generating all the components.
Due to multiplexing, props need to be used to bind the traversal result i and the data bound to props. The binding method is the same as the ordinary form and is bound in the template.
Sample code:
<div id="app"> <button @click="toknowchildren">Click to let the child component display</button> <table> <tr> <td>Index</td> <td>ID</td> <td>Description</td> </tr> <tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr> </table> </div> <script> var vm = new Vue({ el: '#app', data: { items: [1, 2, 3, 4] }, methods: { toknowchildren: function () { //Switch component display console.log(this.$children); } }, components: { theTr: { //The first child component template: "<tr>" + "<td>{{index}}</td>" + "<td>{{id}}</td>" + "<td>This is the child component</td>" + "</tr>", props: ['id','index'] } } }); </script>illustrate:
【1】Remember to put the data to be passed in props!
【2】Bind index and index $index, because the index starts at 0, so the column where the index is located starts at 0; id is bound to i that traverses items, so id starts at 1.
[3] You can obtain child components through this.$children in the parent component (but it is more troublesome, especially when there are many components, it is difficult to locate);
② Write reusable components:
Simply put, it is possible that a single-use component (used here only, not reused) is tightly coupled to other components, but a reusable component should define a clear public interface. (Otherwise, how do others use it?)
Reusable components basically need to interact with the outside, and a component and the externally disclosed interactive interface include:
【1】props: Allow external environment data to be passed to components;
【2】 Event: Allow the component to trigger the action of the external environment, that is, by adding a v-on directive at the mount point, the parent component's methods are triggered at the same time when the events of the child component are triggered;
[3] slot: Distribution, allowing the content of the parent component to be inserted into the view structure of the child component.
As code:
<div id="app"> <p>This is the first parent component</p> <widget :the-value="test" @some="todo"> <span>【The content of the first parent component inserted】</span> </widget> </div> <div id="app2"> <p>This is the second parent component</p> <widget @some="todo"> </widget> </div> <script> Vue.component("widget", { template: "<button @click='dosomething'><slot></slot> This is a reused component, click it {{theValue}}</button>", methods: { dosomething: function () { this.$emit("some"); } }, events: { some: function () { console.log("widget click"); } }, props: ['theValue'] }) var vm = new Vue({ el: '#app', data: { test: "test" }, methods: { todo: function () { console.log("This is the first parent component") } } } }); var vm_other = new Vue({ el: '#app2', data: { name: "first" }, methods: { todo: function () { console.log("This is another parent component") } } }); </script>illustrate:
[1] Distribution slot is used in the first parent component, and props is used to pass the value (pass the value of test to theValue of the child component);
[2] Among the two components, after clicking the child component, the dosomething method in methods, and then the some event in events is executed. Then, through the mount point @some="todo" to bind the child component's some event and the parent component's todo method together.
Therefore, after clicking on the child component, the todo method of the parent component will eventually be executed.
[3] Changing the value passed to the child component in the parent component will synchronously change the value of the child component (that is, both will be data-bound);
③Async components:
According to my understanding, simply put, a large application has multiple components, but some components do not need to be loaded immediately, so they are split into multiple components (for example, those that need to be loaded immediately, but not immediately);
If it needs to be loaded immediately, it is obviously better to put it in the same file (or requested together in the same batch);
If it does not need to be loaded immediately, it can be placed in other files, but when needed, ajax will request it to the server;
The following requests are asynchronous components;
The function of Vue.js is the function of Vue.js, which allows the component to be defined as a factory function and dynamically parses the component's definition.
Can be used with webpack.
As for how to use it in detail, I don’t quite understand it. I can’t write it clearly in the tutorial, so I will put it aside and wait for it to study it when needed.
Link:
http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6
④Resource naming conventions:
Simply put, html tags (such as div and DIV are the same) and features (such as writing instructions like v-on instead of vOn) are case-insensitive.
Resource names are often written in camel-like (such as camelCase camel-like), or in the form of capital letters of the first letter of the word (such as PascalCase, I don't know what to call this, but I rarely write this).
Vue.component("myTemplate", {//...... omitted})Vue.js can automatically recognize this and convert it.
<my-template></my-template>
The above template can automatically replace this tag.
⑤Recursive components:
Simply put, a recursive component is a component that embeds its own template in itself.
If a component wants to recurse, it needs the name attribute, and Vue.component comes with its own name attribute.
Probably this looks like this,
<div id="app"> <my-template></my-template> </div> <script> Vue.component("myTemplate", { template: "<p><my-template></my-template></p>" })This is infinite recursion, which is definitely not possible. Therefore, it is necessary to control the number of layers of its recursion, for example, control the recursion through data, and stop recursion when the data is empty.
The sample code is as follows:
<ul id="app"> <li> {{b}} </li> <my-template v-if="a" :a="aa" :b="ab"></my-template> </ul> <script> Vue.component("myTemplate", { template: '<ul><li>{{b}}</li><my-template v-if="a" :a="aa" :b="ab"></my-template></ul>', props: ["a", "b"] }) var data = { a: { a: { a: { a: 0, b: 3 }, b: 2 }, b: 1 } var vm = new Vue({ el: '#app', data: data, methods: { todo: function () { this.test += "!"; console.log(this.test); } } }); </script>illustrate:
[1] When passing down, the value of a and the value of b are passed through props, where the value of a is used as the data source for the values of a and b of the component after recursiveness;
Then determine whether the value of a passed to the recursive component exists, and if so, continue to recurse;
If the value of a does not exist, then recursion is stopped.
⑥Fragment Example:
Simply put, the so-called fragment instance means that the template of the component is not under a root node:
Fragment instance code:
Vue.component("myTemplate", { template: '<div>1</div>' + '<div>2</div>', })Non-fragment instance:
Vue.component("myTemplate", { template: '<div>' + '<div>1</div>' + '<div>2</div>' + '</div>', })The following characteristics of fragment instances are ignored:
[1] Non-process control instructions on component elements (such as v-show instructions written at the mount point and controlled by the parent component, but note that v-if belongs to process control instructions);
【2】Non-props feature (note that props will not be ignored, in addition props are written on the mount point);
[3] Transition (that is, the transition attribute will be ignored);
For more reference to the official documentation:
http://cn.vuejs.org/guide/components.html#u7247_u65AD_u5B9E_u4F8B
⑦Inline template
Reference: http://cn.vuejs.org/guide/components.html#u5185_u8054_u6A21_u677F
The above is the component of Vuejs Chapter 13 that the editor introduced to you - miscellaneous items. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!