Category : Front end frame

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

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

Article link:Vue.js Basic Course Development tool preparation: According to personal preferenceIDE, I use isWebStorm, recommendedAtomAndVSCode; Installationgit baseAndnode.js; Installationvue-cli, commandnpm i -g @vue/cli; Newvue-cliProjects: Method 1: Install via graphical interfacevue ui; Method 2: Install via command linevue create project-name Run projectnpm run serve, port8080. <! –more–> Bidirectional binding v-model Bidirectional binding is mostly used for form ..

Read more

Learning notes:Vue.js Basic Knowledge Basic knowledge 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 to mount a Vue instance, ..

Read more

Learning notes:Front-end development document Calculation attribute All calculated attributes are written in Vue instances as functionscomputedOption, finally return the calculated results. Usage of computed attributes All kinds of complicated logic can be completed in a calculation attribute, including operations, function calls, etc., as long as a result is finally returned. The calculation attribute can also ..

Read more

Learning notes:Built-in instruction Built-in instruction Basic instruction v-cloak v-cloakNo expression is required, it will be removed from the bound HTML element at the end of compilation of the Vue instance, often with CSSdisplay: none;Cooperate with: <div id=”app” v-cloak> {{message}} </div> When the network speed is slow and the Vue.js file has not been loaded, it ..

Read more

Learning notes:Methods and Events Methods and Events @click can call a method name without parentheses(), if the method has parameters, the native event object will beeventIncoming. This design of monitoring events on HTML elements seems to tightly couple DOM and JavaScript, which violates the principle of separation, but in fact it is just the opposite. ..

Read more

Learning notes:Forms and v-model Forms and v-model Vue.js providedv-modelInstruction to bind data bidirectionally on form class elements. Usev-modelAfter that, the value displayed by the form control only depends on the bound data, and no longer cares about the value displayed during initializationvalueProperty, for the<textarea></textarea>The value inserted between will not take effect. Usev-modelWhen inputting Chinese with ..

Read more

Learning notes:Component details 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 created and then use it<my-component></my-component>To use ..

Read more

Learning notes:Custom instruction Custom instruction The registration methods of custom instructions are divided intoGlobal registrationAndLocal registration, such as registering av-focusInstruction to use in<input>、<textarea>The focus is automatically obtained when the element is initialized. The two writing methods are: //全局注册 Vue.directive(‘focus’, {}); //局部注册 new Vue({ el: ‘#app’, directives: { focus: {} } }); The option of the ..

Read more