What are the internal directives in Vue 2.0
1.Vue.js introduction
There are currently three mainstream front-end frameworks: Angular, React, and Vue. Due to the license controversy of React some time ago, the popularity of Vue has been rising. In addition, Vue’s friendly API documentation is a major feature. Vue.js is a very lightweight tool, more like a js library than an MVVM framework. Vue.js features responsive programming and componentization. Reactive programming means keeping the state and the view synchronized. The state can also be said to be data; and its componentization concept is the same as React, that is, "everything is a component. The componentization idea is convenient for modular development and is the front-end A major trend in the field
2. Internal instructions
##2-1.v-if v-else v-show: The first two. are generally used together, the effect of v-show is similar to v-if
The example is as follows:##
<body>
<div id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script>In the DOM structure, among the three p tags. Whether the content is displayed in the page depends on the Boolean attribute of flag. When flag is true, both if and show will be displayed, and else will not exist in the DOM structure. The difference between v-if and v-show is reflected in: v. -if determines whether to load based on the value of the condition, which can reduce the pressure on the server, but the disadvantage is that when the value of the condition is changed, the page has to be loaded again; v-show will load regardless of whether the value of the condition is true (if the condition is true, the display attribute is set to its default attribute, otherwise, it is set to none)2-2.v-for loop instruction
The example is as follows:
<body>
<div id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script>The page will display 5 li. The effect of interpolation is that li will display elements corresponding to array b one-to-one. v-for is somewhat similar to for in loop2-3 v-text v-html text (html string) instruction
<body>
<div id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>can be associated with jquery’s text(), html( ). Until now, you will find that the previous interpolation operation is used, that is, {{}}, which will affect the performance to a certain extent. 2-4 v-on binding event. The example of the listener
is as follows:
<body>
<div id="app">
<button v-on:click="Hi()">Button</button>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script>Similarly, it is analogous to the on() method of jquery, which is used to bind events. In the example, v -on:click can be abbreviated as @click. Click can be replaced by other mouse operations, such as mouseout, mouseover, etc.
##2-5 v-bind command
The example is as follows:
##
<body>
<div id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>The example is as follows:<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
The example is as follows:<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>
The function of the v-cloak instruction is to execute it after the DOM tree is built and the rendering of the page is completed, and it needs to be consistent with css Use together
2-9 v-once directiveThe v-once directive only works when the DOM tree is rendered for the first time.
The above is the detailed content of What are the internal directives in Vue 2.0. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
What kind of process is ccsvchst.exe?
Feb 19, 2024 pm 11:33 PM
ccsvchst.exe is a common process file that is part of the Symantec Endpoint Protection (SEP) software, and SEP is an endpoint protection solution developed by the well-known network security company Symantec. As part of the software, ccsvchst.exe is responsible for managing and monitoring SEP-related processes. First, let’s take a look at SymantecEndpointProtection(
How to get items using commands in Terraria? -How to collect items in Terraria?
Mar 19, 2024 am 08:13 AM
How to get items using commands in Terraria? 1. What is the command to give items in Terraria? In the Terraria game, giving command to items is a very practical function. Through this command, players can directly obtain the items they need without having to fight monsters or teleport to a certain location. This can greatly save time, improve the efficiency of the game, and allow players to focus more on exploring and building the world. Overall, this feature makes the gaming experience smoother and more enjoyable. 2. How to use Terraria to give item commands 1. Open the game and enter the game interface. 2. Press the "Enter" key on the keyboard to open the chat window. 3. Enter the command format in the chat window: "/give[player name][item ID][item quantity]".
VUE3 quick start: using Vue.js instructions to switch tabs
Jun 15, 2023 pm 11:45 PM
This article aims to help beginners quickly get started with Vue.js3 and achieve a simple tab switching effect. Vue.js is a popular JavaScript framework that can be used to build reusable components, easily manage the state of your application, and handle user interface interactions. Vue.js3 is the latest version of the framework. Compared with previous versions, it has undergone major changes, but the basic principles have not changed. In this article, we will use Vue.js instructions to implement the tab switching effect, with the purpose of making readers familiar with Vue.js
What is a dual-core browser?
Feb 20, 2024 am 08:22 AM
Dual-core browser is a browser software that integrates two different browser cores. The kernel is the core part of the browser, responsible for rendering web content and executing web scripts and other functions. Traditional browsers generally use only a single kernel, such as IE browser using Trident kernel, Chrome browser using WebKit/Blink kernel, Firefox browser using Gecko kernel, etc. The dual-core browser integrates two different cores into one browser, and users can freely switch between them as needed. The emergence of dual-core browsers
Explore the infinite possibilities of the input method that comes with MC commands (an innovative tool to create a perfect gaming experience - the input method that comes with MC commands)
May 02, 2024 pm 03:01 PM
Mobile devices have become an essential part of people's lives in modern society. Games have also become one of the main forms of entertainment in people's spare time. There are constantly people working on developing new tools and technologies to optimize gameplay and improve the gaming experience. The input method with its own MC command is one of the eye-catching innovations. And how it can bring a better gaming experience to players. This article will delve into the infinite possibilities of the built-in MC command input method. Introduction to the built-in MC command input method. The built-in MC command input method is an innovative tool that combines the functions of MC commands and intelligent input methods. This enables more operations and functions. By installing the input method on a mobile device, players can easily use various commands in the game. Enter commands quickly to improve game efficiency
What is a CPU? What does a CPU contain?
Feb 22, 2024 pm 05:55 PM
cpu is the central processing unit. Analysis 1 The central processing unit [CPU, Central Processing Unit] is a very large-scale integrated circuit, which is the computing core and control core of a computer. Its main function is to interpret computer instructions and process data information in computer software. Supplement: What does the CPU include? 1 The CPU includes computational thinking components, register components, control components, etc. The computational thinking component can perform specified address or floating-point arithmetic operations, shift operations and thinking operations, and can also perform address calculations and conversions. Summary/Notes CPU mainly explains computer instructions and processes data information in computer software.
What is ALICE coin?
Feb 23, 2024 am 09:28 AM
What is ALICE coin? ALICE coin is a digital cryptocurrency inspired by the English word "ALICE", which symbolizes the unique creativity and imagination of the creator. As a virtual currency based on blockchain technology, ALICE currency aims to provide users with a safe, convenient and privacy-protected transaction environment. Application of Blockchain Technology In order to achieve the recording and verification of transactions, ALICE currency uses blockchain technology. Blockchain is a distributed database that links transaction information together in chronological order to form an immutable chain. This technology greatly improves the security of transaction information, while also eliminating the need for trust in third-party institutions and reducing transaction costs. Due to the decentralized nature of blockchain, transaction participants can
What is WEB coin Webchain?
Feb 21, 2024 pm 06:28 PM
What are Webcoin and Webchain? Webcoin and Webchain are two closely related cryptocurrency projects that aim to provide global users with a secure and anonymous digital currency trading experience. Webcoin is a cryptocurrency based on blockchain technology, and Webchain is the underlying blockchain platform that supports the operation of Webcoin. The combination of these two projects enables users to conduct efficient and secure digital currency transactions with guaranteed anonymity. WebcoinWebcoin is a decentralized digital currency using blockchain technology, aiming to provide a safe and efficient trading environment for global users. Its open source design makes transaction recording and verification more transparent and reliable. W
