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中，{{}}可以进行运算：字符串连接、加减乘除。

    <div id="app">
			<h2>{{msg}}-{{le}}</h2>		<!-- 字符串连接 -->
			<h2>{{msg+'-'+le}}</h2>		<!-- 字符串连接 -->
			<h2>{{count*7}}</h2>		<!-- 数学运算	 -->
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						msg:'haa',
						le:'drt',
						count:2,
					}
				}
			})
		</script>

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

vue常用指令

1. v-for指令

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

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

    <div id="app">
			<!-- arr作为变量输出 -->
			<h2 v-for=>{{arr}}</h2>
			<!-- 输出arr数组中value -->
			<h2 v-for="item in arr">{{item}}</h2>
			<!-- 输出对象中value，中间为“in” -->
			<h2 v-for="item in obj">{{item}}</h2>
			<!-- 输出对象中value，中间为“of” -->
			<h2 v-for="item of obj">{{item}}</h2>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						arr: ['a','b','c'],
						obj: {realname:'张三',age:23},
						
					}
				}
			})
		</script>

        结果如下

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

    <div id="app">
            <h2 v-for="item in per">{{item}}</h2>
			<!-- 输出对象里面的值 -->
			<h2 v-for="item in per">{{item.realname}}</h2>
			<!-- 添加key属性，这里使用的索引，实际开发中一般用‘id’ -->
			<h2 v-for="(item,index) in per" :key="index">{{item}}--{{index}}</h2>
		</div>
	<script>
        const app = new Vue({
				el: '#app',
				data(){
					return {
                        per:[
							{realname:'Tom',age:12},
							{realname:'Lily',age:13},
							{realname:'ken',age:20}
						]
					}
				}
			})
		</script>

        结果如下

 v-once指令

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

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

        <div id="app">
			<h2 v-once>{{msg}}</h2>
			<h2>{{msg}}</h2>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						msg: '一行倔强的文字'
					}
				}
			})
		</script>

        代码结果

        

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

         结果如下

 v-html指令

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

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

        <div id="app">
			<h2 v-html="url"></h2>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						url: '<a href="https://www.baidu.com/?tn=49055317_3_hao_pg">百度一下</a>'
					}
				}
			})
		</script>

结果如下

v-text指令

        语法：v-text=“msg”

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

        <div id="app">
			<h2>{{msg}},world!</h2>
			<h2 v-text='msg'>,world!</h2>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						msg: 'hello'
					}
				}
			})
		</script>

         结果

 

 v-pre指令

        语法：直接作为属性添加

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

        <div id="app">
			<h2 v-pre>{{msg}}</h2>
			<h2>{{msg}}</h2>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						msg: '一行倔强的文字'
					}
				}
			})
		</script>

          结果

 

 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样式

    <div id="app">
			<h2>{{msg}}</h2>
		</div>
		<script>
			setTimeout(function(){
				const app = new Vue({
					el: '#app',
					data(){
						return {
							msg: '一行倔强的文字'
						}
					}
				})
			},2000)
		</script>

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

<style>
			[v-cloak]{
				display: none !important;
			}
</style>

    <div id="app">
			<h2 v-cloak>{{msg}}</h2>
		</div>

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