Tag : vue.js

Vue

Links to blog articles:Vue VueAndAngular、React.jsWhat are the similarities and differences? AndReactSame as: All usedVirtual DOM Responsive and componentized view components are provided. Focus on the core library while leaving other functions such as routing and global state management to the relevant libraries. AndReactThe difference between: Responsive Rendering of Components ReactWhen the data state of a ..

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

GITHUB:Using Quasar to Design Tourism WebsitesArticle link:Use Quasar to Design Material and IOS-style Responsive Websites Quasar QuasarIt is based onVue.jsDevelopedUIThe framework can make it easy for you to build a concise and lively interface of the website. More importantly, it can also make it easy for you to do well.RWD(responsive website design), in addition to ..

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

Learning notes:Render function Render function Vue2AndVue1The biggest difference is thatVue2Virtual is usedDOMTo updateDOMNode to improve rendering performance. Vue2AndVue1The biggest difference is thatVue2Virtual is usedDOMTo updateDOMNode to improve rendering performance. Vue2AndVue1The biggest difference is thatVue2Virtual is usedDOMTo updateDOMNode to improve rendering performance. Vue2AndVue1The biggest difference is thatVue2Virtual is usedDOMTo updateDOMNode to improve rendering performance. Virtual DOM ..

Read more

Learning notes:Functional component 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 ..

Read more