Vue is a set of incremental frameworks for building user interfaces. Features: Easy to use, flexible, and efficient. + vue-router + vuex + vue-cli

Class libraries vs plug-ins vs components vs frameworks

• Class libraries: jquery, Zepto, underscore…
• Plugin: Dialog, banner, drag, TAB, iscroll…
• Components: Bootstrap, swiper…
• Frameworks: Backbone, Angular, vue, React, uni-app, React Native, flutter…

Declarative and imperative

• Imperative programming: how do you command the “machine” to do something so that whatever you want it to do, such as the for loop
• Declarative programming: tell the “machine” what you want and let the machine figure out how to do it, such as the array built-in method forEach

MVC  & MVVM

• The traditional DOM mode of manipulation
• MVC: Model View Controller
• MVVM: Model view viewModel

<div id="app"> {{msg}} </div> <! -- IMPORT JS --> <script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
    	el: '#app',
    	data: {
    		msg: 'hello world'}});setTimeout(() => {
    	vm.msg = Hello world;
    }, 1000);
</script>
Copy the code

< div id = "app" > : RMB $< input type = "text" v - model = 'price' > $< br > $: ${8} {price /} < / div > <! -- IMPORT JS --> <script src="node_modules/vue/dist/vue.min.js"></script> <script> let vm = new Vue({ el: '#app', data: { price: 0 } }); </script>Copy the code

new Vue(options)

• Return value VM (viewModel)
• El: can’t mount to HTML or body =>querySelector
• data
  • Data values must be declared for objects, otherwise new attributes are invalid (this can be done based on vm.$set).
  • Vm. arr[0]= XXX Changes an item in the array to a view that is not rendered, based on built-in methods such as: push…
  • Objects or arrays can replace values as a whole so that the data changes and the view changes
• .

The person with the mustache [ˈ st ʌst ʃ

• value
• JS expression

Common directives (Directive)

• v-model
• V-html/V-text: Eliminates flicker in mustache syntax refresh
• V-bind (abbreviated 🙂
• v-once
• V – if and v – show
• v-for
  • For in loop & for of loop
    • Traverses the range of data types
    • Method traversal on the prototype (or traversal of the array’s new XXX: XXX property)
    • .
  • Symbol. Iteratoer: Array, Set, Map, String, Arguments, NodeList…
• V-on event binding
  • v-on:xxx
  • Methods: Similar to data, methods are mounted to vm instances (this is the current instance).
  • @xxx
  • @xxx=”func” & @xxx=”func($event,…) “

Class and style binding

• Class handling (object syntax, array syntax)
• Inline style handling
• .

Common attribute methods

• $set: Sets reactive data
• $el: mounted element
• $destroy: Vue instance destroyed; Call beforeDestroy destroyed as well
• $mount: The method to mount the real DOM
• $data: responsive object
• $options: is an argument to the Vue constructor
• $refs: Can be used to get the specified element object (uncontrolled component)
• $on: subscriptions
• $emit: release
• $watch: monitoring
• .

Example: Shopping cart calculator

The implementation principle of two-way data binding

• Object.defineProperty
• Underlying principles of implementation

/ / the observer: the observer
function observer(obj) {
	if (obj && typeof obj === 'object') {
		for (let key in obj) {
			if(! obj.hasOwnProperty(key))break; defineReactive(obj, key, obj[key]); }}}function defineReactive(obj, key, value) {
	observer(value);
	Object.defineProperty(obj, key, {
		get() {
			return value;
		},
		set(newValue) {
			observer(newValue);
			if (value === newValue) return; value = newValue; }}); }function $set(data, key, value) {
	defineReactive(data, key, value);
}
Copy the code

• Implement a listener Observer that iterates over data objects, including properties of child property objects, adding setters and getters to all properties using Object.defineProperty(). So, if you assign a value to this object, it will trigger the setter, so you can listen for changes in the data.
• Implement a parser Compile: parse Vue template instructions, replace variables in the template with data, and then initialize render page view, and bind the corresponding node of each instruction to update function, add subscribers to listen to the data, once the data changes, receive notification, call update function for data update.
• Implement a subscriber Watcher: The Watcher subscriber acts as a bridge between the Observer and Compile. Its main task is to subscribe to the message of the change of attribute value in the Observer. When the message of the change of attribute value is received, the corresponding update function in the parser Compile is triggered.
• Implement a subscriber Dep: The subscriber uses a published-subscribe design pattern to collect subscriber Watcher and manage listener Observer and subscriber Watcher uniformly.

1. Basic syntax for global components & components

Vue.com Ponent (componentName,options) Vue.com Ponent (componentName,options)

• A little specification in the component name
  • Kebab-case: can only be called
  • PasalCase: can be called either in the same way or in the same way
• Detail specifications for invoking components
  • Double closure mode is adopted
  • Single closure does not conform to W3C specification (only one can be recognized)
• template
  • Each component can have only one root element
  • Template string mode
  • Template notation
  • Slot Slot processing
    • Basic operation
    • Multiple slot specification
• Data must be a function that ensures that data from different components does not interfere with each other (initialized data in the returned object)
• .

<my-component> <template V-slot: XXX or # XXX > Always be kind </template> </my-component> {templete: '<div> <slot name=' XXX '></slot>  </div>` }Copy the code

3. Parent transmission of component communication: props property transmission

• When the parent component is called

<my-component aa='hhh' :bb='xxx'></my-component>
Copy the code

• The child component declares the values of the properties to be received based on props

Vue.component('my-component', {props: ['aa'.'bb'],... })Copy the code

• Properties declared in props, like data, are reactive data that is mounted to the VM instance and controls view rendering
• Some details in props
  • Name case: pass kebab-case format, get camelCase camel name in props
  • Specifies the type of the property: props:{XXX :String,… }
  • Default values for the specified properties :{XXX :{type:String,default:’ XXX ‘,required:true}}
    • If type is an array, any of the specified types can be used
    • Default can be a function that returns the default value
    • Validator Custom validation rule functions: Must conform to the rules specified in the function and return true/false
  • The default values are strings. If you want the values to be numeric, Boolean, array, object, etc., you need to use V-bind
  • Style and class auto-merge issues

5. Component communication child change parent: this.$emit

• Subscribe to custom events: pass a method (parent) based on a property when a component is called

<my-component @func='xxx'></my-component>New Vue({methods:{XXX (value){//=>value}}});Copy the code

• Notify custom event execution (child)

{
	methods:{
		xxx(){
			this.$emit('func'.10); }}}Copy the code

• This method can also be used to realize information communication between sibling components (parent and child components, intergenerational components)

let eventBus=new Vue; //=> Create an event bus

/ / A component
eventBus.$on('xxxA'.this.func);

/ / B component
eventBus.$emit('xxxA');
Copy the code

7. Implement communication between ancestors and descendants based on provide and Inject

• Ancestor components register data needed by descendant components based on provide

{
	provide: {//=> objects or functions that return objects (attribute values that are data in data must be processed using function methods)
		name:'hhh'.year:10},... }Copy the code

• Descendant components declare data to be used based on Inject and retrieve it for use

{
	inject: ['name'].methods:{
		func(){
			let name=this.name; }}}Copy the code

1. When will animation be used

• Conditional render V-if
• Conditional display V-show
• Dynamic components such as vue-router control component rendering
• .

3. Basic Use of Transition

• V-enter: Defines the start state of the transition, which takes effect before the element is inserted and is removed in the next frame after the element is inserted
• V-enter-active: Defines the state when the transition is in effect, applied throughout the transition, before the element is inserted, and removed after the transition/animation is complete
• V-enter -to: Defines the end state of the transition. The element is inserted after the next frame, and removed after the transition/animation is complete
• V-leave: Defines the start state of the exit transition. It takes effect immediately when the exit transition is triggered and the next frame is removed
• V-leave-active: Defines the state in which the exit transition is in effect, applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete
• V-leave-to: Defines the end state of the exit transition, which takes effect in the next frame after the exit transition is triggered and removed after the transition/animation is complete
• Animate style discrimination based on the name attribute in the Transiton tag
  • The demo – enter, etc
• Custom transition class names (for example, used with animate. CSS)

  • <transition

    enter-active-class=”animated xxx”  leave-active-class=”animated xxx”

Transition-group handles multi-group element animations

• If v-for is used in transition-group, the key value must be unique
• Small exercise: keyword fuzzy matching search

1. Implementation of round-cast graph