To be continued:
Vue Study Notes (1)
Vue Study Notes (2)
Vue Study Notes (3)
Vue Study Notes (5)
Vue Core (Continued)
2.16 Built-in instructions
V – text commands
V-bind: a one-way data binding expression, XXX V-model: a two-way data binding v-for: Traverses groups/objects/strings V-ON: binds event listeners, which can be abbreviated as @v -if: Conditional rendering (whether the dynamic control node exists or not) v-else: conditional rendering (whether the dynamic control node exists) V-show: conditional rendering (whether the dynamic control node is displayed) V-text instruction:1.What it does: Renders text content to its node, and tags are parsed as text2.Different from interpolation syntax: V-text replaces the contents of the node. Your original contents are replaced and cannot appear with the original contents. {{xx}} does.Copy the code<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>V - text commands</title>
<! Vue -->
<script type="text/javascript" src=".. /js/vue.js"></script>
</head>
<body>
<! -- Get a container ready -->
<div id="root">
<div>Hello, {{name}}</div>// Hello, Shang Silicon Valley<div v-text="name">hello</div>/ / is still silicon valley<div v-text="str"></div> // <h3>Hello.</h3>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
new Vue({
el: '#root'.data: {
name: Silicon Valley.str: ' Hello!
'}})</script>
</html>
Copy the codeV – HTML commands
Preknowledge: cookie:
V - HTML commands:1.Function: Renders content containing HTML structure to a specified node. Updates the innerHTML of the element. Note: The content is inserted as normal HTML and will not be compiled as a Vue template. If you try to use v-HTML composition templates, reconsider using components instead.2.Differences from interpolation syntax: (1).v-html replaces everything in the node, {{xx}} does not. (2V-html recognizes HTML structure, unlike V-text.3.Serious note: V-HTML has security issues ！！！！ (1). Rendering arbitrary HTML dynamically on a website is very dangerous and can easily lead to XSS attacks. (2Always use V-HTML for trusted content, never user-submitted content!Copy the code<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>V - HTML commands</title>
<! Vue -->
<script type="text/javascript" src=".. /js/vue.js"></script>
</head>
<body>
<! -- Get a container ready -->
<div id="root">
<div>Hello, {{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
new Vue({
el: '#root'.data: {
name: Silicon Valley.str: ' Hello!
'.str2: ' Buddy I found the resource you want, come on! ',}})</script>
</html>
Copy the codeV – cloak instructions
V-cloak instruction (no value) :1.The v-cloak property is a special property that will be deleted when the Vue instance is created and takes over the container.2.Use CSS and V-cloak to solve the problem that {{XXX}} templates are displayed when the network speed is slow.Copy the codeScript is introduced into the server I made by myself. The function is that the script tag is successfully loaded after 5s. Note the introduction position of the script tag, which is to execute the HTML template first, and render the page {{name}} into the silicon Valley after 5s, and want {{name}} to be hidden within 5s and not displayed in the page. When the script tag is loaded successfully, it will appear as a cloak.
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>V - cloak instructions</title>
<style>
[v-cloak] {
display: none;
}
</style>
<! Vue -->
</head>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>
<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
new Vue({
el: '#root'.data: {
name: Silicon Valley}})</script>
</html>
Copy the codeV – once the instructions
V - once the instructions:1.The v-once node is treated as static after the first dynamic rendering.2.Future data changes will not cause the update of the v-once structure, which can be used to optimize performance.Copy the code<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>V - once the instructions</title>
<! Vue -->
<script type="text/javascript" src=".. /js/vue.js"></script>
</head>
<body>
<! -- Get a container ready -->
<div id="root">
<h2 v-once>The initial n value is :{{n}}</h2>
<h2>The current n value is :{{n}}</h2>
<button @click="n++">I n + 1 point</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
new Vue({
el:'#root'.data: {n:1}})</script>
</html>
Copy the codeV – pre order
For VUE performance optimization
V - pre instructions:1.Skip the compilation of its node.2.It can be used to skip: nodes that do not use instruction syntax and interpolation syntax will speed up compilation.Copy the code<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>V - pre order</title>
<! Vue -->
<script type="text/javascript" src=".. /js/vue.js"></script>
</head>
<body>
<! -- Get a container ready -->
<div id="root">
<h2 v-pre>Vue is pretty simple</h2>
<h2 >The current n value is :{{n}}</h2>
<button @click="n++">I n + 1 point</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
new Vue({
el:'#root'.data: {n:1}})</script>
</html>
Copy the code2.17 Custom Commands
demand1: Defines a V-big directive, similar to the v-text function, but enlarges the binding value10Times. demand2: Defines a v-fbind directive that is similar to the V-bind function, but allows the bound input element to get focus by default. Summary of custom instructions: 1.1). Local instructions:new Vue({ new Vue({
directives-- {directives: configured object} or directives{directives: callback function}})}) (2Directive (directive name, configuration object) or vue. directive(directive name, callback function)3A callback: (1).bind: called when the directive is successfully bound to an element. (2).inserted: Called when the element of the directive is inserted into the page. (3).update: called when the template structure in which the directive resides is reparsed. Iii. Remarks:1.Instructions are defined without v-, but used with v-;2.If the instruction name is multiple words, use kebab-caseNaming method, don't forget to add""Don't use camelCase.3.All instructions relatedthisAre allwindow
Copy the code<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Custom instruction</title>
<script type="text/javascript" src=".. /js/vue.js"></script>
</head>
<body>
<! -- Get a container ready -->
<div id="root">
<h2>{{name}}</h2>
<h2>The current n value is:<span v-text="n"></span> </h2>
<! - < h2 > zoom after 10 times the value of n is: < span v - big - number = "n" > < / span > < / h2 > -- >
<h2>The n value after amplification by 10 times is:<span v-big="n"></span> </h2>
<button @click="n++">I n + 1 point</button>
<hr />
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// Define a global directive
/* Vue. Directive ('fbind',{bind(element,binding){element.value = binding. Inserted (Element,binding){element.focus()}, Update (element,binding){element.value = binding.value}}) vue. directive('big',function(element, binding) Binding) {// Two arguments: Current DOM element (span), Console. log(element, binding) // console.log('big', This) // Note that this is window element.innertext = binding.value * 10},) */
new Vue({
el: '#root'.data: {
name: Silicon Valley.n: 1
},
directives: {
// If the instruction name is multiple words, do not forget to add "", the method inside the "key", the value, most cases can be omitted, but the "-" must be followed by quotation marks.
'big-number':function(element,binding){}
/* 'big-number'(element,binding){ // console.log('big') element.innerText = binding.value * 10 }, */
When is the big function called? 1. When the directive is successfully bound to the element (first up). 2. When the template where the instruction resides is parsed again.
big(element, binding) { // Two parameters: the current DOM element (span) and all the information about the binding
console.log(element, binding)
// console.log('big', this)
// Note that this is window
element.innerText = binding.value * 10
},
fbind: {
// called when the directive is successfully bound to the element
bind(element, binding) {// Two parameters: the current DOM element (input) and all the information about the binding
element.value = binding.value
},
// called when the element of the directive is inserted into the page
inserted(element, binding) {
element.focus()
// The input field automatically gets focus. This line of code must be placed after putting input into the page
},
// called when the template in which the directive resides is reparsed
update(element, binding) {
element.value = binding.value
element.focus()
}
}
}
})
</script>
</html>
Copy the code2.18 Life cycle
Extraction life cycle
The following code will fail if the timer is placed in Methods
Life cycle:1.Also known as: lifecycle callback functions, lifecycle functions, lifecycle hooks.2.What it is: Some specially named functions Vue calls for us in the Nick of time.3.The name of a lifecycle function cannot be changed, but the details of the function are written by the programmer as required.4.In the lifecycle functionthisThe point is a VM or component instance object. This means you can't use arrow functions to define a lifecycle method (e.g., created:() = > thisFetchTodos ()).Copy the code<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Extraction life cycle</title>
<! Vue -->
<script type="text/javascript" src=".. /js/vue.js"></script>
</head>
<body>
<! -- Get a container ready -->
<div id="root">
<h2 :style="{opacity:opacity}">Welcome to Vue</h2>
<button @click="opacity = 1">Transparency is set to 1</button>
<button @click="stop">Point I stop the transformation</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
const vm = new Vue({
el: '#root'.data: {
opacity: 1
},
methods: {
stop() {
this.$destroy()
}
},
//Vue calls Mounted after the template has been parsed and the original real DOM element is placed on the page
// It is called once when the template is reparsed with subsequent data changes
mounted() {
console.log('mounted'.this)
this.timer = setInterval(() = > {
// If the arrow function does not have this, it automatically finds this in Mounted (), which refers to vm
console.log('setInterval')
this.opacity -= 0.01
if (this.opacity <= 0) this.opacity = 1
}, 16)},beforeDestroy() {
console.log('VM is about to be destroyed')
clearInterval(this.timer)
// Clear the timer}})// Using an external timer (not recommended)
// setInterval(() => {
/ / vm. Opacity - = 0.01
// if (vm.opacity <= 0) { vm.opacity = 1 }
// }, 16)
</script>
</html>
Copy the codeAnalysis life cycle
Life cycle process, with the above picture to eat, it is best to unpack the code in turn comments run again
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Analysis life cycle</title>
<! Vue -->
<script type="text/javascript" src=".. /js/vue.js"></script>
</head>
<body>
<! -- Get a container ready -->
<div id="root" :x="n">
<h2 v-text="n"></h2>
<h2>The current n value is: {{n}}</h2>
<button @click="add">I n + 1 point</button>
<button @click="bye">Click I destroy VM</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // Prevents vUE from generating production prompts at startup.
const vm = new Vue({
el: '#root'.// template: `
//
{{n}}
//
/ / `,
// With the template template, there is no need to put content inside the container, but the template template will overwrite the external root container when parsing.
// The template can only have one root element, so the h2 and button must be wrapped in a div, otherwise an error will be reported
data: {
n: 1
},
methods: {
add() {
console.log('add')
this.n++
},
bye() {
console.log('bye')
this.$destroy()
// Call the destruct function, but the previous work is still there, but can not manage later}},watch: {
n() {
console.log('n changed')}},beforeCreate() { // This is before the data broker and data monitor are created, not before the VM
console.log('beforeCreate')
// console.log(this);
// debugger
// If you open the console, you can see that there is no data in data
},
created() {
console.log('created')
// console.log(this);
// debugger
// If you open the console at this point, you can see that there is data in data, and there are add and bye methods
},
beforeMount() {
console.log('beforeMount')
// console.log(this);
// debugger
// The elements are loaded (uncompiled), but not yet mounted. The body structure of the HTML is still the template
// The DOM white manipulation in this will eventually be overwritten by the real DOM converted from the virtual DOM
},
mounted() {
console.log('mounted')
// console.log(this);
// debugger
// The elements are loaded (compiled) and mounted, and the body structure of the HTML is rendered the way you want it to be rendered
// Manipulating DOM in this context is valid, but not recommended
},
beforeUpdate() {
console.log('beforeUpdate')
// console.log(this.n);
// debugger
// Called when updating data, the data is new, but the page is still old and has not been updated
},
updated() {
console.log('updated')
// console.log(this.n);
// debugger
// The data is new, but the page is also new, and the data is kept in sync with the page
},
beforeDestroy() {
console.log('beforeDestroy')
// console.log(this.n);
// this.add()
// debugger
// The destruction phase is triggered
// Click destroy VM, n is printed, add is called, but the page is no longer updated,
// Can access data, call methods, but all changes to data will no longer trigger updates.
// The data methods instructions in the VM are available, and the destruction process is about to be executed.
// Usually in this phase: close timer, unsubscribe message, unbind custom events and other end operations
},
destroyed() {
// The destruction phase is triggered
console.log('destroyed')}})// vm.$mount("#root")
</script>
</html>
Copy the codeLife cycle summary
Common lifecycle hooks:1.Mounted: Sends Ajax requests, starts a timer, binds customized events, and subscribes messages.2.BeforeDestroy: Clear timers, unbind custom events, unsubscribe messages, and so on. About destroying Vue instances1.You can't see any information with Vue developer tools after destruction.2.Custom events are invalidated after destruction, but native DOM events are still valid.3.You typically do not manipulate data beforeDestroy, because even if you manipulate data, the update process is no longer triggered.Copy the code