Vue基础2Mustache语法常用的表达式写法、常用命令 v-for v-once v-html v-text v-pre v-bloak

目录

Mustache语法常用的表达式写法

vue常用指令

1. v-for指令

 v-once指令

 v-html指令

v-text指令

 v-pre指令

 v-cloak指令

---

Mustache语法常用的表达式写法

        Mustache英译是“胡须”，这里指{{}}，称为大括号语法，在vue中，{{}}可以进行运算：字符串连接、加减乘除。

    

			
{{msg}}-{{le}}
		
			
{{msg+'-'+le}}
		
			
{{count*7}}
		
		
		
		

        结果如下，可见字符串拼接可以在{{}}里面，也可以在{{}}外面。

vue常用指令

1. v-for指令

        基本语法：v-for="item in/(of) data"        中间既可以用in也可以用of

        遍历作用，遍历数组、对象中的value ，

    

			
			
{{arr}}
			
			
{{item}}
			
			
{{item}}
			
			
{{item}}
		
		

        结果如下

         遍历数组中的对象，添加key动态属性

    

            
{{item}}
			
			
{{item.realname}}
			
			
{{item}}--{{index}}
		
	

        结果如下

 v-once指令

        语法：使得data里面变量的值无法在控制台更改（正常情况下页面输出的值可以在控制台更改）

        为明显看出区别，第一行文字添加v-once属性，第二行不添加

        

			
{{msg}}
			
{{msg}}
		
		

        代码结果

        

         在控制台更改msg的值     app.msg='不倔强了'

         结果如下

 v-html指令

        语法：v-html=“url”  url为变量名

        当变量的值里面含有标签时，使用v-html属性，类似于js里面的innerHTML

结果如下

v-text指令

        语法：v-text=“msg”

        类似js里面的innerText，v-text会覆盖标签里面原来的值

        

			
{{msg}},world!
			
,world!
		
		

         结果

 

 v-pre指令

        语法：直接作为属性添加

        使变量值输出不出来，一般用不到

        

			
{{msg}}
			
{{msg}}
		
		

          结果

 

 v-cloak指令

        语法：直接作为属性（类名）使用

        用于异步，因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

        首先未添加v-clo也未设置v-cloak的css样式

    

			
{{msg}}
		
		

         添加v-cloak也设置v-cloak的css样式

    

			
{{msg}}
		

        结果：不会显示{{msg}}，会显示空白