Vue Course Notes (based on Vue 3.0)

The v-ON directive: an event listener, for example, v-on:click=”function()” A function can accept arguments as long as the parameters are previously defined in the method function. You can have more than one V-ON event listener in the same tag. In the Method section, the order of the custom functions does not affect the output. It can be any order. Function arguments can also be the browser’s native event name in the format of $sign + browser’s native event name.

Vue event modifiers: The native event.preventDefault() method prevents browser default behavior, such as browser refresh after form submits the event. In VUE, V-on: events. Event modifiers, such as V-on :submit. Prevent, which prevents the browser’s default behavior,.stopPropagation, which prevents events from bubbling. v-on:click.left/right’, V-on :keyup. Enter Listens for the carriage return to pop up

V-once instruction: The value of the part of the instruction specified is updated only once. Usage scenarios are limited, mainly to prompt the user to enter the initial value.

Two-way binding of data in VUE: V-model =” Property name in data method “At this time, the binding is two-way, the user can change the data content, and the changed data content will be reflected in the rendering result in real time. That’s the response. There is a problem, however, as soon as one part of the page is updated, all methods taken over by vUE on the entire page are re-executed, regardless of whether the parameters in the method have changed.

Computed Properties: Any complex logic that contains responsive data should use Computed properties instead of writing business logic directly into template strings. The result is the same as writing logic to methods, but with additional benefits. Computed properties are based on dependency caching, and those that do not require reactive dependencies can be written as computed properties, reducing the performance overhead of the browser rerendering the page. It is not very common to use methods if caching is not required. Watchers: A function is executed when a property in data changes. Watchers responds to data changes, which is most useful when asynchronous or expensive actions need to be performed when data changes occur. Functions inside Watcher usually take two arguments, newValue,oldValue Components: reusable parts

Why use tools such as VUE-CLI to develop VUE applications? Use vscode syntax support for vue; Instant synchronization and display page changes; Split files into separate files for easy management. Vue – cli (Command line interface); Vue create name-of-project, create a new VUE project, CD to the project directory, run NPM run serve to run the project, keep the CMD window open during development; The package.json configuration file stores dependencies of the entire project. After importing the dependencies, you do not need to import CDN resources to the page. The node-modules folder contains the dependency files introduced in package-JSON. Running NPM -install will download and store the corresponding resource files according to the dependency names declared in package.json. Therefore, you should not modify any files in this folder, lest the project become dependent on resources and fail to run properly. Public folder: the index. HTML can be understood as the final location of the VUE application. SRC folder: this is the directory where developers actually develop. This is where developers customize JS files and so on. The vue project will first run the main.js file, which is the main entry point for the Vue project. .vue file: A vue application with template, script, and style sections inside. Vue-cli tools automatically convert vUE files into normal files that are compatible across browsers, so developers can just focus on vUE files. Build Workflow: The developer’s code takes advantage of a lot of new syntax, such as VUE, that browsers don’t normally understand. However, during compilation, the code is converted into a standard JS file that can be executed by the browser and then deployed to the server. Assets folder: This folder contains web images, resources, etc. Components folder: Stores each component of a VUE application. In development, a large component is divided into several components. The. Vue file outside the directory is the vUE application as a whole, and the Components folder stores each part of the whole application. Each component is named in PascalCase format, with each word uppercase and no Spaces between words. SRC main. From ‘./ app.vue ‘, import the module from app.vue, but import CreateApp from vue. The second sentence import… from … The app name introduced after import is actually the variable name of the vue object in another vue file, but const… = {} const variables are only available on that vUE page, not across pages, so use the ES6 syntax export default= {} to use variable names across pages. In vue-CLI, you don’t write any HTML structure in index. HTML. The HTML structure should be specified in the template section of the corresponding. Vue file. The template section is the CSS in the vue file: in the style section, props: can be understood as custom HTML properties, and can provide custom attributes for custom HTML tags.

Vue actual project development: multi-page application: click on a section to return the corresponding HTML document. The advantage is that the first screen time is very fast, as only one HTTP request is required to load the first screen, and the SEO effect is good. The downside is that switching between pages can sometimes be slow because an HTTP request is made for each application loaded. When the network is not good, the switching speed is slow single page application: the principle is that JS has the perception of the change of the current URL, you can use JS to dynamically remove the current page, and render out the new component content of the request. Because you don’t need to make another HTTP request to request a new component, page switching is very fast. The disadvantage is that the first screen time is relatively slow, because the first screen needs to send HTTP request and JS request, both requests will be completed at the same time to load all the content. Since search engines can only parse common HTML tags, SEO in a single application is not effective, but you can overcome this later

Git add. Save all current contents to local cache. Git commit -m ‘messages’ git commit -m ‘messages’ git commit -m In real development, however, each time a new feature is developed, a new branch is created on which development continues. After development, merge the branch to the master branch.

Some problems of the development of the mobile end: 1 px frame under the high screen problem: the introduction of relevant CSS files to repair mobile end 300 ms delay problem: click to see developers.google.com/web/updates… Or introduce the fastclick library mobile terminal preferentially use rem units, 1rem is the CSS text base pixel

To import other CSS files, such as variables and mixins, you need to add a wavy line ~ before the @ sign in the root directory of the file to change it to ~@/.

Aliases for some common paths: modify the vue.config.js file. New versions of vue-CLI tools no longer include the build folder. It is recommended that you configure webpack in the vue.config.js file. Juejin. Cn/post / 684490…

In vue-awesome-swiper, swiper6 does not display the rotation chart dots. Import {Swiper, SwiperSlide, directive} from ‘vue-awesome-swiper’;

import ‘swiper/swiper-bundle.css’

import Swiper2, {Navigation, Pagination} from ‘swiper’; // This line of code is critical

Swiper2.use([Navigation, Pagination]); / / this is critical lines of code ` reference www.jianshu.com/p/3820c25fc…

The scoped component prevents contamination between components and requires penetration. The outer element >>> or /deep/ or: V-deep requires a custom styled inner element. SCSS loader only support: : v – deep, reference segmentfault.com/a/119000001… And blog.csdn.net/Shimeng_198…

There is a special attribute, scoped, on the style tag in the Vue file. When a style tag has the scoped attribute, its CSS styles can only be applied to the current Vue component, so that the styles of the components do not pollute each other. If all style tags in a project are scoped, you are modularizing the style.

In the Vue project, when we introduced a third-party component library (such as using vue-awesome-swiper for mobile rotation), we needed to modify the style of the third-party component library in the local component without removing the scoped attribute and causing style overwriting between components. At this point we can penetrate scoped in a special way.

Style of vue loader, a mixture of local and global style vue-loader.vuejs.org/zh/guide/sc…

In SCSS, the @mixin keyword is used to define mixin, and the @include mixin method name is used to call mixin. Parentheses are not required if there is no parameter to mixin. See sass-lang.com/documentati…