Tag : vue.js

ArticleIt has been published on personal blogs and is constantly updated. Welcome to collect and subscribe, or make criticism. Some methods and functions may not be used very often, but they cannot be remembered when meeting the needs of a specific scene. Therefore, it is necessary to record these methods and functions encountered at ordinary ..

Read more

For more details, see the original link:Vue- conceptual understanding Progressive framework Component system Client routing State management Building tools Virtual DOM MVVM mode What is MVX mode Progressive framework Vue.jsIs a set of building user interfaceProgressive framework. Declarative renderingAndComponent systemIt is the content contained in Vue’s core library, andClient routing、State management、Building toolsThere are special solutions. ..

Read more

This blog post is used to record.vueHow to use the component. You can put the component code according totemplate、style、scriptTo the corresponding.vueIn the file. Template (template), initial data (data), accepted external parameters (props), methods (methods), life cycle hook function (lifecycle hooks)。 Basic steps InhtmlComponents Used in <div id=”app”> <my-component></my-component> </div> To use a component, you first ..

Read more

Component system Components can be extendedHTMLElement that encapsulates reusable code. Core components of vue.js: Template-The template declares the mapping relationship between the data and the DOM finally presented to the user. Initial data-Initial data state of a component. For reusable components, it is usually a private state. Accepted external parameters (props)-Data is transferred and shared ..

Read more

v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-once v-text Type:stringusage: for updating elementstextContent. If you want to update part of thetextContent, you need {{ Mustache }} interpolation. v-html Type:stringusage: for updating elementsinnerHTML. Note: The content is normalHTMLInsert-not asVueThe template is compiled.If you try to usev-htmlCombining templates, you can reconsider whether ..

Read more

viaVue.jsThe transition system can be implemented in elements fromDOMAutomatically applies transition effects when inserting or removing.Vue.jsWill trigger for you at the right time.CSSTransition or animation, you can also provide the correspondingJavaScriptHook functions perform customDOMOperation. In order to apply the transition effect, it needs to be used on the target element.transitionFeatures: <div v-if=”show” transition=”my-transition”></div> transitionFeatures can ..

Read more

examineOriginal site, more expanded content and better reading experience! Vue foundation Root instance of constructor Vuenew Vue({})And start the Vue application. var app = Vue({ el: “#app”, data: {}, methods: {} }); VariableappOn behalf of this Vue instance. Among them, the essential options areelA that specifies a DOM element that already exists in a page ..

Read more

examineOriginal site, more expanded content and better reading experience! Component details Components and Reuse Vue components need to be registered before they can be used. There are two ways of registration: global registration and local registration. Global registration Vue.component(‘my-component’, {}); To use this component in the parent instance, you must register before the instance is ..

Read more

Render function The biggest difference between Vue2 and Vue1 is that Vue2 uses virtual DOM to update DOM nodes and improve rendering performance. Virtual DOM React and Vue2 both use the virtual DOM technology. The virtual DOM is not a real DOM, but a lightweight JavaScript object. When the state changes, the virtual DOM performs ..

Read more

Functional component Vue provided onefunctionalIs set totrueYou can make components stateless and instanced, that is, withoutdataAndthisContext. Use this wayrenderFunctions that return virtual nodes can be rendered more easily because the functional component is only a function and the rendering cost is much lower. When using a functionalized component, the Render function provides the second argumentcontextTo ..

Read more