1. Calculate attributes
1. What are calculated attributes
The key to calculating a property is the word attribute (attribute is a noun), first of all, it is an attribute and second of all, the attribute has the ability to calculate (calculate is a verb), where the calculation is a function. Simply put, it is an attribute that caches the results of the calculation (turning the behavior into a static attribute), and nothing more; Think of it as a cache.
Calculated properties: Calculated results, stored in properties, run in memory: virtual DOM.
2, code,
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <! - the view layer, the template -- > < div id = "app" > < p > currentTime1: {{currentTime1 ()}} < / p > < p > currentTime2: {{currentTime2}} < / p > < / div > <! - 1. Import Vue. Js - > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" > < / script > < script > var = new vm Vue({ el:"#app", data:{ message:"hello" }, methods:{ currentTime1:function(){ return Date.now(); // Return a timestamp}}, computed:{currentTime2:function(){//methods, computed method names cannot be the same. Return date.now (); return date.now (); return date.now (); // Return a timestamp}}}); </script> </body> </html>Copy the codeMethods: Define methods, call methods using currentTime1(), parentheses required.
Computed: Defines computed properties and calls to properties using currentTime2 without parentheses: this.message changes so that currentTime2 can observe changes in data.
If a value changes in a method, the cache is flushed! You can use vm.message= “222” on the console to change the value of the data and test the effect again.
3, conclusion
When you call a method, you need to do a row calculation every time. Since there is a calculation process, there must be system overhead. What if the result does not change very often? At this point, we can consider caching the result, which can be easily achieved by using the calculation attribute. The main feature of the calculation attribute is to cache the calculation result that does not change often, so as to save our system overhead.
Second, content distribution
1, the slot
In vue.js we use the
element as an outlet for hosting distribution content, which the authors call slots, which can be used in composite component scenarios.
2, test,
For example, if you want to make a todo component, which consists of todo-title and todo-items, but these three components are independent of each other, how do you do that?
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <! - the view layer, <div id="vue"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items> </todo> </div> <! - 1. Import Vue. Js - > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" > < / script > < script > / / slot, slot Vue.component('todo',{ template:'<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component('todo-title',{ props:['title'], template:'<div>{{title}}</div>' }); // The index of the array is the index of the array. Vue.component("todo-items",{ props:["item"], template:"<li>{{item}}</li>" }); var vm = new Vue({ el:"#vue", data:{ title:"Isabella", todoItems:['111','222','333'] } }); </script> </body> </html>Copy the codeCustom events
It is not difficult to see from the above code that the data item is in the Vue instance, but the deletion operation is done in the component. How can the component delete the data in the Vue instance? At this point, it involves parameter passing and event distribution. Vue provides us with the function of custom events to help us solve this problem. Use this.$emit(‘ custom event name ‘, parameter)
1, code,
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <! - the view layer, Template --> <div id="vue"> <todo> <todo-title slot="todo-title" :title="title_text"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items> </todo> </div> <! - 1. Import Vue. Js - > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" > < / script > < script > / / slot, slot Vue.component('todo',{ template:'<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component('todo-title',{ props:['title'], template:'<div>{{title}}</div>' }); Vue.component("todo-items",{ props:["item","index"], / / only binding current method of component template: "< li > {{index}}, {{item}} < button @ click = 'remove' > delete < / button > < / li >", $emit(' add ',index) {//this.$emit (' add ',index); }}}); var vm = new Vue({ el:"#vue", data:{ title_text:"Isabella", todoItems:['111','222','333'] }, Methods :{console.log(" delete "+this.todoItems[index]+"OK"); this.todoItems.splice(index,1); // Delete one element at a time}}}); </script> </body> </html>Copy the code2. Logical understanding
Four, Vue introduction summary
1, the core
Data driven, componentized
2, strengths,
It borroys from AngularJS modularity and React’s virtual Dom, which puts Demo operations into memory.
3. Common attributes
v-if
v-else-if
v-else
v-for
V-on binding event, @ for short
V-model data bidirectional binding
V-bind Binds parameters to a component.
4. Componentization
Composite component Slot Slot
This.$emit(” event name “, parameter) is used to bind events within the component.
Compute attributes feature caching compute data
Following the SoC separation of concerns, Vue is a pure view framework and does not include, for example, Ajax communication. To solve the communication problem, we need to use the Axios framework for asynchronous communication
5, description,
Vue development is based on NodeJS, the actual development uses VUE-CLI scaffolding development, VUE-Router routing, VUEX state management; We usually use ElementUI (made by Ele. me) or ICE (made by Alibaba) to quickly build front-end projects.
6, website
element.eleme.cn/#/zh-CN
ice.work/