02vue学习——五种自带的v-指令

最新推荐文章于 2023-01-03 18:02:41 发布

0563xixi

最新推荐文章于 2023-01-03 18:02:41 发布

阅读量286

点赞数 5

本文链接：https://blog.csdn.net/weixin_42530160/article/details/96834628

版权

02vue学习——五种自带的v-指令

vue自带的五种v-指令：

差值表达式——{{插入的值}}
v-cloak：解决差值表达式的闪烁问题
v-text：将指令中的变量插入到页面中
v-html：将指令中的html代码插入到页面中
v-bind：是vue提供属性绑定机制（缩写为“ : ”)
v-on：是vue提供事件绑定机制（缩写为“ @ ”)

0.插值表达式

我们如何将js代码中的Model中的数据插入到页面中去呢？这就需要我们的插值表达式来帮助我们了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式</title>
     <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
   	 	<div class="body">
       		 <p >{{msg}}</p>
   		 </div>
     
   		<script>
        let vm = new Vue({
            el:".body",
            data:{
                msg:"我是用来学习插值表达式的例子！",
            }
        }) 
    </script>
</body>
</html>

注意：
（1）插值表达式就是将 Model 的数据即 data 中值显示到 View 上面去
（2）插值表达式内的值为 data 中的对象名
（3）插值表达式在页面中的显示会出现闪烁问题，则需要用到下面的 v-cloak 指令
（4）插值表达式可以在两个花括号的前后再加上任意的字符串，都会正常的显示在页面中

1.v-cloak指令

为了解决差值表达式带来的闪烁问题，vue为我们提供了 v-cloak 指令，帮我们解决了这个烦恼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>使用 v-cloak 指令</title>
     <script src="lib/vue-2.4.0.js"></script>
     
	<!-- 使用了 v-cloak 指令 -->
	<style>
    	[v-cloak]{
        	display: none;
    	}
	</style>
	
</head>
<body>
   	 	<div class="body">
       		 <p v-cloak>{{msg}}</p>
   		 </div>
     
   		<script>
        let vm = new Vue({
            el:".body",
            data:{
                msg:"我是用来学习 v-cloak 指令的例子！",
            }
        }) 
    </script>
</body>
</html>

（1）将含有 v-cloak 属性的元素的display的值设置为none——还没将js中的值加载出来时不会显示该元素，加载出来之后才会显示该元素以及值
（2）上面的这个特性刚好就可以解决差值表达式闪烁的问题

2.v-text指令

为了解决插值表达式带来的闪烁问题，我们上面提到了使用 v-cloak 指令来解决，但是有时候我们也可能不想专门去写一个 css 样式来控制解决这个问题，这时候我们就可以使用 v-text 指令来替代插值表达式了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>使用 v-text 指令</title>
     <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
   	 	<div class="body">
       		 <p  v-text="msg"></p>
   		 </div>
     
   		<script>
        let vm = new Vue({
            el:".body",
            data:{
                msg:"我是用来学习 v-text 指令的例子！",
            }
        }) 
    </script>
</body>
</html>

v-text=“msg” 和 {{msg}} 两个插值方法的区别
（1）v-text="msg"是默认没有闪烁问题的
（2.1）v-text=“msg” 会覆盖元素中原本的内容
（2.2）{{msg}} 插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

3.v-html指令

在插值表达式和 v-text 指令中插入的值都是字符串，当我们想要把一个html代码片段插入到页面中渲染时会出现什么现象呢？经过实验，插值表达式和 v-text 指令都会将html代码当作普通字符串来显示，导致将html代码原样输出。这时候就需要 v-html 来帮助我们了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>使用 v-html 指令</title>
     <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
   	 	<div class="body">
       		 <p  v-html="html"></p>
   		 </div>
     
   		<script>
        let vm = new Vue({
            el:".body",
            data:{
             html:"<h1>我是用来学习 v-html 指令的例子！</h1>",
            }
        }) 
    </script>
</body>
</html>

（0）{{msg}} 和 v-text 都是将数据作为普通文本来显示的
（1）将数据作为html来解析
（2）会清空整个元素的内容

4.v-bind 指令

前面提到的插值表达式、v-text 和 v-html 都是将内容作为元素的内容来插入到元素中的，那当我们要给元素的属性赋值应该怎么办呢？这时候就需要 v-bind 来帮助我们了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 v-bind 指令</title>
     <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
   	 	<!-- v-bind 指令的学习 —— 该指令是vue提供属性绑定机制 -->
         <input type="button" value="按钮" v-bind:title="mytitle">
         <!-- 如果没有使用v-bind属性。则该按钮的title直接是mytitle -->
         <input type="button" value="按钮" title="mytitle"> 
         <!-- 在v-bind中属性的值是一个变量，可以在其前后加字符串 -->
         <input type="button" value="按钮" v-bind:title="'-------' + mytitle + '--------'">
         <!-- : == v-bind: -->
         <input type="button" value="按钮" :title="mytitle">
     
   		<script>
        let vm = new Vue({
            el:".body",
            data:{
             mytitle:"我是用来学习 v-bind mytitle",
            }
        }) 
    </script>
</body>
</html>

（1）如果没有使用 v-bind 属性。则该按钮的title直接是双引号内的内容，而不会到Model模块中查找
（2）在 v-bind 中属性的值是一个变量，可以在其前后加字符串
（3） v-bind 的缩写为英文的 :

4.v-on 指令

前面提到的 v-bind 指令是用于绑定属性的，当我们要给一个元素绑定一个事件时，我们就需要用到 v-on 指令来协助我们了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 v-on 指令</title>
     <script src="lib/vue-2.4.0.js"></script>
</head>
<body> 	 	
     <input type="button" value="按钮" v-on:click="alert">
<script>
let vm = new Vue({
	el:".body",
	methods:{
		alert:function(){
			alert("我是v-on绑定完弹出的弹框");
		}
	}
})
</script>
</body>
</html>