Chapter one: The Basics

Lecture 1: Introduction to the course

Basic chapter: Vue core knowledge Ecology Chapter: Peripheral technology required by large Vue project Actual combat Chapter: Development of VUe-based Ant Design Pro benefits Chapter: Introduction of Vue3.0 related knowledgeCopy the code

Lecture 2: Introduction to Vue

The development trend

What is a vue
Vue is a set of progressive frameworks for building user interfaces. 2. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. 3.Vue's core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. 4. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.Copy the code
What are the features of VUE
1. Lighter 20KB min+gzip(React35kb,Angular60kb) 2. Progressive framework 3. Responsive update mechanism (low-level processing) 4. Low learning cost (if HTML is easy to learn)Copy the code

Lecture 3: Content overview

Attributes, events, slots, personal summary: (1) how to pass through property vnode and rendered in child components (2) how to use temporary variables in the template syntax 】 ecological article: peripheral technology for large Vue 【 vueRouter | vuex 】 practical article: Vue - Based Ant Design Pro (Vue3.0Copy the code

Lecture 4: Develop your first VUE program

1. Install the development environment's official website: https://cn.vuejs.org/v2/guide/installation.html 2 】. Introduction of < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > 3. Template engine {{message}} reactive, expression support, not statement 2. What are the instructions: V-bind :bind Bind dynamic value V-if, V-else, v-else Do not render v-show equivalent to display:none Mounted DOM node v-for eg:v-for="item for items"Copy the code

Lecture 5: Component basics and component registration

1. Definition: It is an abstraction that allows us to build large applications with small, independent, and often reusable components. Almost any type of application interface can be abstracted into a tree of components. 3.用法 : Vue.component(' ComponentName ', {props:{title:String, del:{type:Boolean, default:false}}, template: ',  data(){return {}}, methods:{}, }); 4. Note: Unused attributes in the parent component are passed to the root element of the child component. Components can be nested with unique namesCopy the code

Lecture 6: The core concept of Vue components: events

You can listen for DOM events with the V-ON directive and run some JavaScript code when triggered 1. Common usage v-on:click=" method name or expression "abbreviation: @click=" fn "2. $emit('delete', parameter) @delete="fn" 3. V-model ="" Update v-model.lazy="" change v-model.trim="" remove space before and after v-model.number="" Enter numbers first to restrict input to numbers. @click.stop="" to prevent events from bubbling. event.stopPropagation() The event.preventDefault() method is called, so the default event is @click.self=" only if the element itself is clicked. For example, if a div has a button inside it, the div and the button both have events. If we click the button, the div binding method will also fire. If the div click with self, it will fire only when the div is clicked. @keyup. Enter @keyup.13="" @click.capture="" @scoll.Copy the code

Lecture 7: The core concept of Vue components: slots

1. Usage :<slot></slot> 2. <template V-slot :content><span> content </span></template> ----name="content" <span slot=content> content </span> ----name="content" (3) scope slot <template v-slot:pre="{value}" slot contents {{value}} </template> <slot name="pre" :value="value"> Default </slot>Copy the code

Lecture 8: Understand single-file components

Disadvantages of traditional component usage: 1. Global definition, no repetition of names. 2. String template: lack of syntax highlighting, newline use \ 3. CSS not supported 4. No construction steps: eg:Babel Create project: node Install: Install vue-cli: NPM install -g@vue /cli Check vue version: vue --version Create project: Vue create Vue.demo1 instance: Traditional components converted to vue single files can be globally defined in main.js component Vue.components(); Scoped automatically generates hash valuesCopy the code

Lecture 9: Two-way binding and one-way data flow do not conflict

1. Input: V-model is a contraction of the syntax sugar value and @input 2. Vmodel eg: Vue.component('base-checkbox', {model: {prop: 'checked', event: 'change'}, props: {checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > '}) <child: isshow. sync="isShow" v-show="isShow"/> 【: isshow. sync="isShow" @update:isShow="bol=>isShow= BOL $emit("update:isShow"," XXX "); $emit("update:isShow"," XXX ");Copy the code

Lecture 10: Understand the role of the virtual Dom and key attributes

Virtual DOM structure: State (data)+ Template (template)= DOM tree structure (DOM is updated by an algorithm mechanism to reduce performance consumption) Virtual DOM Diff(DOM comparison) Scenario 1: Moving Scenario 2: Deleting and creating Scenario 3: Update, Delete, And Create (without key) Scenario 4: Move a key to improve comparison performance. The key is required as a unique identifier in the for loopCopy the code

Lecture 11: How do I trigger component updates

Data sources: 1. Attributes from the parent element 2. State data from the component itself 3. Observable state data vs props state is the data of the component itself. Properties are data from the parent component; A state change does not necessarily trigger an update; Property changes do not necessarily trigger updates (do not update when data changes page is not in use, do not call updated)Copy the code

Lecture 12: Rational use of compute properties and listeners

Advantages of computed attributes: 1. Reduce the dependency of computing logic in templates on corresponding data 2. Data caching 3. Rely on fixed data types (reactive data, which improves performance when data is large). 2. Any logic can be implemented in Watch, such as function throttling, Ajax asynchronous data acquisition, and even DOM Watch multi-layer nested writing: Watch: {" a "() {}," biggest () {} ", "d" : {handler (val, oldVal) {}, deep: true}} computed and watch the difference: 1.Com puted can do it, Watch can do it, vice versa. Invoking the forced update method this.$forceUpdate() with computed * updates the view and data, triggering the updated life cycle.Copy the code

Lecture 13: Lifecycle application scenarios and functional components

Functional components: 1. Differences between functional components and normal components: (1) fast rendering (2) No instances, meaning no this (3) No lifecycle (no responsive data) 2. (1) Take the local component as an example, mark the component as functional=ture; Because the function has no instance, everything the component needs is passed through the context parameter, which is an object containing the following fields: props: The object that provides all prop. Children: the array of VNode children slots: A function that returns the object scopedSlots containing all slots: (2.6.0+) an object that exposes the passed scopedSlots. Normal slots are also exposed as functions. Data: The entire data object passed to the component as the second parameter to createElement Parent: an object containing all event listeners registered by the parent component for the current component This is an alias for data.on. Injections: (2.3.0+) If the Inject option is used, then the object contains attributes that should be injected. Eg: As a temporary variable, Use var1 and var2 data cases for double-counting default{functional:true, render:(h,ctx)=>{ return ctx.scopedSlots.default && ctx.scopedSlots.default(ctx.props||{}) } } <TemplateVar :var1="" <template V-slot ="{var1,var2}"></tempalate> </TemplateVar> render:function(createElement,context){ return createElement('el-button',{ props:{ type:this.cmpData } }); }}Copy the code

Lecture 14: What is the nature of a directive

Built-in instruction (syntax sugar flag bit) : V-text, V-HTML (XSS risk is not recommended), V-show (equivalent to display: None), V-if, V-else, V-else, V-for, V-ON, V-bind, V-model, V-slot, V-pre (the contents of braces do not execute logic), V-cloak (available in HTML), V-once (execute once only) Custom directives: Usage: directives:{} Hook function (both optional) : bind: call once only, when the directive is first bound to the element. This is where you can perform one-time initialization Settings. Inserted: Called when the bound element is inserted into a parent (the parent is guaranteed to exist, but not necessarily inserted into the document). Update: called when the component's VNode is updated, but may occur before its child VNodes are updated. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values before and after the update. Unbind: Called only once, when an instruction is unbound from an element. The el: argument to the hook function is the element bound by the instruction, which can be used to manipulate the DOM directly. Binding: an object containing the following attributes: name: directive name, excluding the V - prefix. Value: specifies the binding value of the directive. For example, v-my-directive="1 + 1", the binding value is 2. OldValue: The previous value of the directive binding, available only in the UPDATE and componentUpdated hooks. Available regardless of whether the value changes. Expression: command expression in the form of a string. For example, if v-my-directive="1 + 1", the expression is "1 + 1". Arg: Optional parameter passed to the instruction. For example, v-my-directive:foo, the parameter is "foo". Modifiers: An object that contains modifiers. For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}. OldVnode: Last virtual node, available only in update and componentUpdated hooks. Example <div id="hook-arguments-example" V-demo :foo.a.b="message"></div> vue. directive('demo', {bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#hook-arguments-example', data: { message: 'hello! '}}) output:Copy the code

Lecture 15: Provide/Inject common advanced features

Function: Provide variables by provider in the parent component, and inject variables by inject in the child component.Copy the code

It is important to note that the provider can inject data as long as it invokes inject, no matter how deep the subcomponent is. Rather than being limited to fetching data only from the prop property of the current parent component.

1. Define a parent component <template> <div> <childOne></childOne> </div> </template> <script> import childOne from '.. /components/test/ChildOne' export default { name: "Parent", provide: { for: "demo" }, components:{ childOne } } </script> 2. <template> <div> {{demo}} < childTwo ></ childTwo ></ div> </template> <script> import childtwo from './ childtwo ' export default { name: "childOne", inject: ['for'], data() { return { demo: this.for } }, components: { childtwo } } </script> 3. Define another sub-component <template> <div>{{demo}}</div> </template> <script> export default {name: "", inject: ['for'], data() { return { demo: this.for } } } </script>Copy the code

Lesson 16: How to gracefully fetch a cross-hierarchy component instance (no recursion)

<p>hello</p> this.$refs.xxxx(the normal element gets the node element; $parent. XXX this.$children: callback ref (setXxxRef) getXxxRef (getXxxRef) eg: components:{ ChildrenG }, inject:{ setChildrenRef:{ } }Copy the code

Lecture 17: Template vs. JSX and their nature

JSX: 1. JSX is a JavaScript syntactic extension used in the React architecture. Its format is more like a template language, but it is implemented entirely inside JavaScript. The React element is the smallest unit that makes up the React application. JSX is used to declare the element in React. React uses JSX to describe the user interface. JSX can be used in VUE through plug-ins. Data binding uses single quotes template: 1. Is a template syntax (an extension of HTML) 2. Advantages of using double braces for data binding {{}} :Copy the code

Lecture 18: Why Vuex State Management

Purpose: 1. provide dynamic registration responsive data 2. need namespace management, organize data 3. Logging changes to the data through the plug-in facilitates debuggingCopy the code

Vuex application scenarios:

Lecture 19: How to use Vuex in Vue

Vue create vuex-demo default... CD vuex-demo NPM install vuex NPM run serve  main.js import Vuex from 'vuex' Vue.use(Vuex) const store=new Vue.Store({ state:{ count:0 }, mutations:{ increment(state,n){ state.count++ } }, actions:{ increment(state,n){ setTimeout(()=>{ state.count++ }) } }, DoubleCount (state){return state*2}}}) new Vue({store, reder:h=>h(App), }).$mount('#app') App.vue <button @click="$store.commit('increment',2)"></button>(mutations) <button @click="$store.dispatch('increment',2)"></button>(actions) {{$store.getters.doubleCount}} computed:{ return this.$store.state.count }Copy the code

Lecture 20: Vuex core concepts and underlying principles

Lecture 21: Vuex Best Practices

Github.com/geektime-ge…

Lecture 22: Vue Router Usage Scenarios

Traditional model: www.xxx.com --index.html www.xxx.com/about -- about.html www.xxx.com/xxx -- xxx. HTML Each URL corresponds to an HTML page that needs to be reloaded, Impact on user experience the birth of single page (SPA) development mode single page application advantages: 1. Listen for URL changes and execute logic before and after the changes. 2. Different urls correspond to different components 3. An API that provides a variety of ways to change urls (url changes cannot cause browser refreshes). Provide a route configuration table. Different urls correspond to the configuration of different components. 2. Mount to Vue instance 4. Provide a route placeholder to mount the component to which the URL matchesCopy the code

Lecture 23: Choose which mode of routing and underlying principles

Route type: Hash mode: ugly, unable to use anchor location (with #) History mode: required backend, incompatible with Ie9 (can use forcible refresh) use: new VueRouter({mode:' History '})Copy the code

Lecture 24: What problems does Nuxt solve?

Disadvantages of single page application: 1. Not conducive to SEO(search engine optimization baidu search climb ranking) solution: server rendering SSR 2. First screen rendering takes a long time. Prerendering, eg:home.html/xxx.html; SSR isomorphism, dynamic rendering, cumbersome configuration Nuxt functions: 1. Generate static site 2. 3. Simplified configuration: https://zh.nuxtjs.org/Copy the code

Lecture 25: What is the core philosophy of Nuxt?

Lecture 26: UI Component Libraries comparison: Element UI, Ant Design Vue, iView

Lesson 27: Common Tools for Improving Development Efficiency and Experience :ESLint, Prettier, Vue-devTools

Vetur: 1. Vscode plugin 2. Syntax highlighting 3. Tag completion, template generation 4.Lint check 5. Formatting ESLint 1. Code specification 2. Error checking Prettier 1 Format Vue DevTools(Chrome plug-in) 1. Integrate Vuex 2. Remote debugging 3. Performance analysisCopy the code

Lecture 28: The importance and Use of unit tests

1. Jest or Mocha 2.@vue/test-utils 3. Sinon eg: Vue create test1-Demo Unit Testing Jest In dedicated config files (In a separate file)Copy the code

Lecture 29: Ecology Problem Solving (I)

1. How does VUEX provide responsive data? A: New Vue({}) 2. Extend the simplified version of min-vuex to implement getters, and implement vuex in a vuex way to inject $storeCopy the code