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 loop 2-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 effect is that the a tag displays red, and its src attribute is vm.message. The v-bind instruction is mainly used to set the attributes of the html tag. The abbreviated form is v-bind:——>: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>When the input value changes, the content contained in the p tag will also change and remain consistent with the former.
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 first p tag outputs "front-end engineer", while the second The p tag will skip vue compilation and output the original value, namely {{message}}.
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!
请问ccsvchst.exe是哪种进程？Feb 19, 2024 pm 11:33 PMccsvchst.exe是一种常见的进程文件，它是SymantecEndpointProtection（SEP）软件的一部分，而SEP则是一款由著名的网络安全公司Symantec开发的终端保护解决方案。作为该软件的一部分，ccsvchst.exe负责管理和监控SEP的相关进程。首先，我们来了解一下SymantecEndpointProtection（
泰拉瑞亚怎么用指令获得物品？-泰拉瑞亚怎么收藏物品?Mar 19, 2024 am 08:13 AM泰拉瑞亚怎么用指令获得物品？一、什么是泰拉瑞亚给予物品指令在泰拉瑞亚游戏中，给予物品指令是一项非常实用的功能。通过这个指令，玩家可以直接获取需要的物品，而不必费力地去打怪或者传送到某个地点。这样可以极大地节省时间，提高游戏的效率，让玩家更专注于探索和建设世界。总的来说，这个功能让游戏体验变得更加流畅和愉快。二、如何使用泰拉瑞亚给予物品指令1.打开游戏并进入游戏界面。2.按下键盘上的“Enter”键，打开聊天窗口。3.在聊天窗口中输入指令的格式：“/give[玩家名称][物品ID][物品数量]”。
VUE3快速入门：使用Vue.js指令实现选项卡切换Jun 15, 2023 pm 11:45 PM本文旨在帮助初学者快速入手Vue.js3，实现简单的选项卡切换效果。Vue.js是一个流行的JavaScript框架，可用于构建可重用的组件、轻松管理应用程序的状态和处理用户界面的交互操作。Vue.js3是该框架的最新版本，相较于之前的版本变动较大，但基本原理并未改变。在本文中，我们将使用Vue.js指令实现选项卡切换效果，目的是让读者熟悉Vue.js的
双核浏览器是什么浏览器Feb 20, 2024 am 08:22 AM双核浏览器是一种集成了两个不同浏览器内核的浏览器软件。内核是浏览器的核心部分，负责渲染网页内容和执行网页脚本等功能。传统浏览器一般只使用单一的内核，如IE浏览器使用Trident内核，Chrome浏览器使用WebKit/Blink内核，火狐浏览器使用Gecko内核等。而双核浏览器则将两个不同内核集成在一个浏览器中，用户可以根据需要自由切换使用。双核浏览器的出
探索自带MC指令的输入法的无限可能性（打造完美游戏体验的创新工具——自带MC指令输入法）May 02, 2024 pm 03:01 PM移动设备成为人们生活中必不可少的一部分，在现代社会。而游戏也成为人们闲暇时的主要娱乐方式之一。不断有人致力于开发新的工具和技术来优化游戏玩法，为了提高游戏体验。而自带MC指令的输入法就是其中一种引人注目的创新。以及它如何为玩家们带来更好的游戏体验，本文将深入探讨自带MC指令输入法的无限可能性。自带MC指令输入法简介自带MC指令输入法是一种结合了MC指令和智能输入法功能的创新工具。从而实现更多的操作和功能，通过在移动设备上安装该输入法、玩家可以方便地在游戏中使用各种指令。快速输入指令，提高游戏效率
cpu是什么 CPU包含哪些Feb 22, 2024 pm 05:55 PMcpu是中央处理器。解析1中央处理器【CPU，CentralProcessingUnit】是一个超大规模的集成电路，是1台电脑的计算核心和操控核心，它的作用主要是说明计算机指令，及其解决计算机软件中的数据信息。补充：CPU包含哪些1CPU包含计算思维部件、寄存器部件和控制部件等，计算思维部件，可以实行指定地点或浮点算术运算操作、移位操作及其思维操作，也可实行地点计算和转化。总结/注意事项cpu主要是说明计算机指令，及其解决计算机软件中的数据信息。
ALICE币是什么币？Feb 23, 2024 am 09:28 AMALICE币是什么币？ALICE币是一种数字加密货币，其灵感源自英文单词"ALICE"，象征着创作者的独特创意和想象力。作为基于区块链技术的虚拟货币，ALICE币旨在为用户提供安全、便捷和隐私保护的交易环境。区块链技术的应用为了实现交易的记录和验证，ALICE币采用了区块链技术。区块链是一种分布式数据库，它通过将交易信息按照时间顺序链接在一起，形成一个不可篡改的链条。这种技术极大地提高了交易信息的安全性，同时也消除了对第三方机构的信任需求，并降低了交易成本。由于区块链的去中心化特性，交易参与者可
WEB币Webchain是什么？Feb 21, 2024 pm 06:28 PMWebcoin和Webchain是什么？Webcoin和Webchain是两个密切相关的加密货币项目，旨在为全球用户提供安全、匿名的数字货币交易体验。Webcoin是一种基于区块链技术的加密货币，而Webchain则是支持Webcoin运行的底层区块链平台。这两个项目的结合使得用户能够进行高效、安全的数字货币交易，并在匿名性方面得到保障。WebcoinWebcoin是一种采用区块链技术的去中心化数字货币，旨在为全球用户提供安全高效的交易环境。其开放源代码的设计使得交易记录和验证更加透明和可靠。W
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
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Dreamweaver Mac version
Visual web development tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Linux new version
SublimeText3 Linux latest version
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
