The shallow vue.js of the bag Society: the Graduation Chapter

In the first chapter, "The Shallow into the vue.js: the beginning of the school chapter" and the Last "package learning shallow into the shallow vue.js:" Study, we first understand the Vue environment and two important ideas--routing and component learning, through the component library of the button components and navigation components, I believe that we are beginning to understand the corresponding knowledge points, and then we will analyze in detail how to complete the development process consisting of multiple components of a reusable component.

Let's take a look at our needs.

List Component Quilist.vue

In this section we mainly want to complete a list function, each line of the list is a component, the list may appear in the button component or the arrow component, click the button component can customize the event, but also according to different parameters to determine the current list is a list of buttons or with a list of arrows.

First look at Quilist.vue.

Quilist.vue<Template><Divclass="Qui-list" ><Spanclass="List-tips" >{{tipstext}}</Span><Qui-btnV-on:btnclickevent="Btnclickevent": msg=Msgclass="Small" ></Qui-btn></Div></Template><script> import Quibutton from . /components/quibutton.vue ' export default{ props:{msg: {default:  ' Download '}, tipstext: {default: components: { ' qui-btn ': Quibutton}, methods:{btnclickevent: function (</< Span class= "Hljs-name" >SCRIPT>            

The above knowledge point is basically what we have learned before, just remember that quilist itself is a component, and in this component, we introduced the button component Quibutton, that is, the component within the reference component, is actually the component nesting, notice ：msg=msg the use here, Here the colon means that the binding is a variable msg, and then this property is exposed through props (itself in the button to expose the MSG to the list component use), to borrow the following image to understand:

As for the Click event, it is also the binding of the events we have previously learned. Now introduce a new question, whether there is a parameter, you can decide that the right side of the list component is the place button component? or an arrow component.

Dynamic components

The Vue provides some specific keywords: is and a specific structure <component> to generate dynamic components, let's modify the contents of the next script first:

<Script>  Import QuibuttonFrom‘.. /components/quibutton.vue 'Import QuiarrowFrom‘.. /components/quiarrow.vue 'export default{props:{msg: {default:  ' Download '},  Tipstext: {default:  ' default Copywriting '},  currentview:{default:  ' qui-btn '}},  Components: { ' qui-btn ': Quibutton,  ' Qui-arrow ': Quiarrow}, Span class= "Hljs-attr" >methods: {clickevent: function () {}}}</ Script>               

First we import more than one arrow component, add a custom label in the components, ‘qui-arrow’ notice that we have a CurrentView custom property, the default is qui-btn , now look at the template tag what is written:

<Template><Divclass= "qui-list" > <span class= "list-tips" >{{tipstext}}< /span> <component :is= "CurrentView" v-on:btnClickEvent=  "clickevent" :msg=msg class=" small "keep-alive> </component> </ div></TEMPLATE>    

We removed the label and replaced it with qui-btn a component tag, which is a label from the Vue, which can be used as a container for the button to install, or to install arrows. The key code that determines which component of the container is: is="currentView" when the value of CurrentView is, the qui-btn container is the button component, and when it is, it is qui-arrow the arrow component. And the default value we just defined for this variable is qui-btn .

keep-aliveKeyword keeping this component in memory is resident, because dynamic components may need to switch dynamically, so keeping components active can reduce memory consumption when components change.

You can see that the button's Click events and MSG messages are still on our component, which doesn't matter if the same variables don't appear in the arrow components.

<qui-list tipsText="自定义文案，默认右边是按钮" msg="弹层"></qui-list><qui-list v-on:btnClickEvent="test"></qui-list><qui-list ref="child1" tipsText="最右边是箭头" currentView="qui-arrow"></qui-list>

When using a list component, you only need to specify a value for the exposed CurrentView to determine whether the right side is a button or an arrow. Note that the last one qui-list has a ref attribute, which represents a collection of components that, when there are many components in the page, can be used in several ways to obtain information about a component:

console.log(this.$children[0].msg);//通过数组获取console.log(this.$refs.child1.msg);//通过对象集合获取

In fact, about dynamic components, do not have to use: is+component to achieve, in the Vue has an instruction called v-if / v-else / v-else-if , collectively, the judgment instruction, with the display command V-show, can be based on the specified value to determine whether the corresponding component should be displayed, and this practice I do not show, as a homework, is interested in or suggest actual combat, after all, we just teach you to learn, behind or hope that we can expand their learning.

Life cycle

Here's a brief talk about what is the lifecycle of a component, where we get information about the component object through refs, so when or when to do it, the components from reference to call to destroy (less action) have the following key callback functions:

<Script>  ExportDefault {Components: {' Qui-list ': quilist},Beforecreate:function){},Created before component instantiation:function){},The component instantiates the Beforemount:function){},Before the component is written to the DOM structure mounted:function){Component is written to the DOM structureconsole.log (this. $children); console.log (this. $refs);},  Beforeupdate:function (//component Update before Updated:function (//component updates such as modified copy Beforedestroy:< Span class= "Hljs-keyword" >function () {},//component destroyed before destroyed:< Span class= "hljs-function" >function (//component has been destroyed} </SCRIPT>         

So if you want to use refs's content, you need to write the component to the DOM before you start calling it!

What else do I need to learn?

So far, we have learned most of the three articles about components and routing knowledge, of course, this is not all of vue, but relative to other points of knowledge, these can be regarded as a stepping stone, to understand these, the application of other APIs in the future, the help is very big. Below I listed some other, follow-up people can go to the official website to view some key points of the information, in fact, it is not difficult, as long as there are some small project demo practice, you will find Vue is also so.

Transition

The transition is actually CSS3 animation, transition These, just write CSS3 like in writing JS, a bit similar to the greensock of some ideas.

Instructions

So far we have learned some common directives, like v-on,v-bind,v-for, as well as several commonly used judgment commands and v-show instructions, as well as V-model instructions (mainly for form components such as input). It's not difficult to learn when you know the instructions.

Render

Rendering This method is what I think should be studied with heart, it can be convenient for us to write better object-oriented components, and the cost of learning it is that the interface is closer to the use of native JS code. If necessary, follow-up can also write an article about render.

Summarize

Three series of articles temporarily here, some of the children's boots may come here or do not learn vue, sorry, may be my title is too exaggerated, may be because my example is not clear enough, writing also not good understanding. But it doesn't matter, review our study course, you can follow this knowledge point of the learning process, to find more articles, after all, "read 300 tang poetry, will not write poetry will also sing." Of course, in the course of learning we have more practice and try to exercise to strengthen knowledge. As for shallow into the shallow out or deep out, or to rely on the definition of the people themselves!

All relevant codes and official documents are attached at the end of this document ~ ~ ~

http://cn.vuejs.org/v2/guide/

The shallow vue.js of the bag Society: the Graduation Chapter