v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../vue.js"></script>
<script src="http://localhost:8080/resource/5s/vue.js"></script>
<style>
[v-cloak]{
display: none
}
</style>
</head>
<body>
<!--
v-cloak instructions(No value)
a Essence is a special attribute,Vue After the instance is created and the container is taken over,Will be deleted v-cloak attribute
b use css coordination v-cloak It can solve the problem that the page shows when the network speed is slow{{xxx}}Question of
-->
<!-- Prepare a container -->
<div id="root">
<div class="root">
<h2 v-cloak>{{name}}</h2>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // Prevent vue from generating production prompts at startup
new Vue({
el:'#root',
data:{
name:'xxx'
}
})
</script>
</body>
</html>
v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-once instructions
v-once The node in which it is located after the first dynamic rendering,As static content
Future data changes will not cause v-once Update of structure,Can be used to optimize performance
-->
<!-- Prepare a container -->
<div id="root">
<h2 v-once>Initial value{{n}}</h2>
<h2>value{{n}}</h2>
<button @click='n++' >add</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // Prevent vue from generating production prompts at startup
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</body>
</html>
v-pre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-pre instructions
Skip the compilation process of the node
You can use it to skip:Instruction syntax is not used,Nodes without interpolation syntax,Will speed up compilation
-->
<!-- Prepare a container -->
<div id="root">
<h2 v-pre >No interpolation syntax</h2>
<h2>Initial value{{n}}</h2>
<h2>value{{n}}</h2>
<button @click='n++' >add</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // Prevent vue from generating production prompts at startup
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</body>
</html>
Custom instruction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-once instructions
v-once The node in which it is located after the first dynamic rendering,As static content
Future data changes will not cause v-once Update of structure,Can be used to optimize performance
-->
<!-- Prepare a container -->
<div id="root">
<h2 >The current value is <span v-text='n' ></span> </h2>
<h2>Magnified 10x n Value time <span v-big='n' ></span> </h2>
<button @click='n++' >add</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // Prevent vue from generating production prompts at startup
new Vue({
el:'#root',
data:{
n:1
},
directives:{
// When will the big function be called? When the instruction and element are successfully bound (I) when the module where the instruction is located is re parsed
big(element,binding){
element.innerText=binding.value*10
}
}
})
</script>
</body>
</html>
Review a DOM operation rendering priority problem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- Prepare a container -->
<button id='btn'>Click the create input box</button>
<script type="text/javascript">
Vue.config.productionTip = false; // Prevent vue from generating production prompts at startup
const btn=document.getElementById('btn')
btn.onclick=()=>{
const input=document.createElement('input')
input.className='demo'
input.value=99
input.onclick=()=>{
alert(1)
}
document.body.appendChild(input)
input.focus()
}
</script>
</body>
</html>
Custom instruction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-once instructions
v-once The node in which it is located after the first dynamic rendering,As static content
Future data changes will not cause v-once Update of structure,Can be used to optimize performance
-->
<!-- Prepare a container -->
<div id="root">
<h2 >The current value is <span v-text='n' ></span> </h2>
<h2>Magnified 10x n Value time <span v-big='n' ></span> </h2>
<button @click='n++' >add</button>
<input type="text" v-fbind:value='n' >
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // Prevent vue from generating production prompts at startup
new Vue({
el:'#root',
data:{
n:1
},
directives:{
// When will the big function be called? When the a instruction and the element are successfully bound (I) when the module where the b instruction is located is re parsed
big(element,binding){
element.innerText=binding.value*10
},
// fbind(element,binding){
// element.value=binding.value;
// element.focus()
// }
fbing:{
// When the instruction is successfully bound to the element (I)
bind(element,binding){
element.value=binding.value
},
// When the element of the instruction is inserted into the page
inserted(element,binding){
element.focus()
},
// When the template where the instruction is located is parsed again
update(element,binding){
element.value=binding.value
}
}
}
})
</script>
</body>
</html>
Summarize custom instructions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
1, Define syntax:
(1).Local instruction:
new Vue({
new Vue({
directives:{Instruction name:Configuration object}or
directives{Instruction name:Callback function}
})
})
(2).Global instruction:
Vue.directive(Instruction name,Configuration object) or Vue.directive(Instruction name,Callback function)
2, Three callbacks commonly used in configuration objects:
(1).bind:Called when the instruction successfully binds to the element.
(2).inserted:Called when the element of the instruction is inserted into the page.(3).update:Called when the template structure where the instruction is located is re parsed.
3, Remarks:
1.Instruction definition without v-，But it should be added when using v-;
2.If the instruction name is more than one word, use kebab-case Naming method, do not use camelCase Naming.
-->
<!-- Prepare a container -->
<div id="root">
<h2 >The current value is <span v-text='n' ></span> </h2>
<h2>Magnified 10x n Value time <span v-big='n' ></span> </h2>
<button @click='n++' >add</button>
<input type="text" v-fbind:value='n' >
</div>
<div class="root2">
<input type="text" v-fbind:value='x' >
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // Prevent vue from generating production prompts at startup
// Define global instructions
// Vue.directive('fbind2',{
// / / when the instruction is successfully bound to the element (I)
// bind(element,binding){
// element.value=binding.value
// },
// / / when the element of the instruction is inserted into the page
// inserted(element,binding){
// element.focus()
// },
// / / when the template of the instruction is re parsed
// update(element,binding){
// element.value=binding.value
// }
// })
Vue.directive('big',function(element,binding){
console.log('big',this)//this here is window
element.innerText=binding.value*10
})
new Vue({
el:'#root',
data:{
n:1
},
directives:{
// When will the big function be called? When the a instruction and the element are successfully bound (I) when the module where the b instruction is located is re parsed
big(element,binding){
console.log('big',this)//this here is window
element.innerText=binding.value*10
},
// fbind(element,binding){
// element.value=binding.value;
// element.focus()
// }
fbing:{
// When the instruction is successfully bound to the element (I)
bind(element,binding){
element.value=binding.value
},
// When the element of the instruction is inserted into the page
inserted(element,binding){
element.focus()
},
// When the template where the instruction is located is parsed again
update(element,binding){
element.value=binding.value
}
}
}
})
</script>
</body>
</html>
Scoped in style lang = "scss" scoped in vue
Represents a local deployment
If not, the css style will be rendered in all components
instructions
The v-bind single binding parsing expression can be abbreviated as: xxx
v-model bidirectional data binding
v-for traversal array / object / String
v-on binding event listening, which can be abbreviated as@
v-if conditional rendering (whether dynamic control nodes exist)
v-else conditional rendering (whether dynamic control nodes exist)
v-show conditional rendering (whether dynamic control nodes are displayed)
v-text instruction
a role: render text content to the node where it is located
The difference between b and interpolation syntax is that v-text will replace the content in the node, {xx}} will not
Three abbreviated instructions in vue
v-on, listening instruction, abbreviation: @, for example, @ click="doSomething" is to execute the function doSomething after listening to the click event;
v-bind, dynamic binding instruction, abbreviation::, for example: src="srcFilePath", where srcFilePath is a value that will change dynamically, which is generally obtained from the back end;
v-slot, slot instruction, abbreviation: #, generally no abbreviation is used. It can be used to receive values and then use them in subcomponents.
Object expansion operator
The mapState function returns an object. How can we mix it with local computing properties? Usually, we need to use a tool function to merge multiple objects into one, so that we can pass the final object to the calculated attribute. However, with the object expansion operator (opens new window), we can greatly simplify the writing:
computed: {
localComputed () { /* ... */ },
//Use the object expansion operator to blend this object into an external object
...mapState({
// ...
})
}
Getter
Sometimes the status of the store needs some calculation and filtering, which can be called directly through Getter
Vuex allows us to define "getters" (which can be considered as the calculated attributes of the store) in the store. Just like calculating attributes, the return value of getter will be cached according to its dependency, and will be recalculated only when its dependency value changes.
Getter accepts state as its first parameter:
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
Getter will be exposed as store Getters object, you can access these values in the form of attributes:
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Access by method
You can also pass parameters to getters by letting getters return a function. It is very useful when you query the array in the store.
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
Note that when a getter is accessed through a method, it will be called every time, and the result will not be cached.
mapGetters helper function
The mapGetters auxiliary function only maps getters in the store to local calculation properties:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
//Use the object expansion operator to mix getter s into the computed object
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
Usage of $nextTick in vue (after rendering the view, operate dom)
After obtaining the data, when you need to perform the next operation or other operations on the new view, you find that the dom cannot be obtained. Because the assignment operation only completes the change of the data model and does not complete the view update
new Vue({
el: '#app',
data: {
list: []
},
mounted: function () {
this.KaTeX parse error: Expected 'EOF', got '}' at position 46: ...get() }) }̲, methods: { ...http.get('/api/article').then(function (res) {
this.list = res.data.data.list
//ref list refers to the ul element. I want to change the first li color to red
this.KaTeX parse error: Expected 'EOF', got '}' at position 67: … = 'red' } ̲) }, } })… nextTick method. If we want to operate on the updated view in the future, we only need to pass the function to be executed to this$ Next tick method, vue will do this work for us.
Usage of $emit
The usage of $emit is to pass the contents of the child component to the parent component, including data, methods, etc.
Subcomponents
Data passed from parent component to child component: {index}}
Parent component