vue's computational property computed, must return,
computed
It has the effect of caching data, which is conducive to reducing performance consumption. However, when the real data changes, the calculation attributes will be updated
Traditional writing:
After learning the computed properties of vue, you can see the figure. You must return:
It is not recommended to use v-for and v-if together in vue, because v-for has a higher priority. To solve this method, you need to use computed properties, as follows:
vue's computed property listener watch method, two values, a new value and an old value,
Respond to changes in data through watch
,
Generally used to monitor routing changes in the project
The watch method is divided into basic types and reference types
The basic types are as follows:
handler
The reference types are as follows:
deep in-depth monitoring, do not return new and old values, directly monitor
immediate
The listener is executed as soon as the page is opened
Simple and rude usage of reference data types
Vue.js components
Component s are one of the most powerful features of Vue.js.
Components can extend HTML elements, encapsulating reusable code.
Note: The order is component priority new Vue,
Components are divided into global components and local components
Global components:
All instances can use global components
If the component name is written in camel case, it must be separated by -
Can also be abbreviated / to close
local components
We can also register partial components in the instance options, so that the components can only be used in this instance
html part
component part
vue part
custom component
Do not use camelCase in custom components
props are passed from parent to child. Note that the variable is passed with v-bind, and the string without v-bind is passed.
Child:
Father
However, the single-type data flow can only be passed from the parent to the child. If you want to change the value of the parent, you can only use the custom event this.$emit()
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- Use uppercase for component names,need to use-segmentation -->
<!-- Multiple components are not together do not abbreviate -->
<!-- :msg="msg" father to son plus v-bind variable is passed, do not add v-bind passed a string -->
<List-Page v-bind:msg="msg" @msgfn="msgfn"></List-Page>
<datail></datail>
<chidpage></chidpage>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
// Global components, pay attention to the order, write global components first in the new instance
Vue.component("ListPage", {
props: ["msg"],
template: `
<div>
<h1>custom component!</h1>
<h2 @click="changeMsg">{{msg}}</h2>
</div>
`,
methods: {
changeMsg() {
// Unidirectional data flow
// Change it directly, the value of the parent component does not change
// You need to use a custom event method to achieve child change parent
this.$emit("msgfn", "I do not love")
}
}
})
Vue.component("datail", {
template: '<h1>global component!</h1>'
})
new Vue({
el: "#app",
data: {
msg: "I love"
},
methods: {
msgfn(s) {
this.msg = s;
},
},
components: {
"chidpage": {
template: `
<h1>Subassembly!</h1>
`
}
},
})
</script>
</body>