Vue基础指令

一、插值表达式

        插值表达式是Vue指令的基础，它是指在html标签里面插入js表达式，并用{{}}括起来。如下：

<div id="app">
	<h1>{{title}}</h1>
	<p>{{obj.age}}</p>
	<p>{{arr[1]}}</p>
	<p>{{fn()}}</p>
</div>
<script>
	new Vue({
		el:"#app",/
		data:{
		    title:"标题",//字符串
			obj:{age:20},//对象
			arr:["RJY","hello"],//数组
			fn:()=>22//函数
		}
	})
</script>

数据里面可以是任何东西：字符串，对象，数组，函数，甚至是运算。

二、指令

指令就是在标签内部加上这个属性。

这里我只写最最基础的指令。

• v-html：相当于innerHTML，能够识别标签
• v-text： 相当于innerText，不能够识别标签
• v-pre：  静默，不会编译到js代码，会直接渲染成html标签内部的内容
• v-cloak：常用于在CSS样式时设置隐藏，用于防抖

（这里解释一下为什么要设置v-cloak{display:none;}？

        在文档流中规定的从上到下依次渲染，于是就会先渲染html结构，也就是会将标签内部    的原始内容先渲染到页面上，然后才开始加载js代码，才会将js代码里面的数据加载渲   染上去，所以就会导致"抖动"。而设置了v-cloak进行防抖，就不会出现刚加载的页面出现"闪一下"的效果了。）

参考代码如下：

<style>
	[v-cloak]{
		display: none;
	}
</style>
<div id="qsq">
	<div v-html="msg1"></div>
	<div v-text="msg2"></div>
	<div v-pre>{{msg3}}pre</div>
	<div v-cloak>{{msg4}}</div>
</div>
<script>
	new Vue({
		el:"#qsq",
		data:{
			msg1:"<b>我是html，能识别标签</b>",
			msg2:"<b>我是test，不能识别标签</b>",
			msg3:"我是pre，跳过编译",
			msg4:"我是防抖"
		}
	})
</script>

结果如下：

 三、属性绑定

属性绑定就是给标签属性绑定js代码。

标准写法：v-bind:src="变量"

语法糖：:src="变量"

例如：

<style>
	[v-cloak]{
		display: none;
	}
	img{
		width: 150px;
		height: 100px;
	}
</style>
<div id="qsq" v-cloak>
	<img v-bind:src="obj.tx">
	<div>name:{{obj.name}}</div>
	<div>age:{{obj.age}}</div>
	<input type="text" v-bind:value="email">
	<br>
	<a v-bind:href="locate">点击我百度一下</a>
</div>
<script>
	new Vue({
		el: '#qsq',
		data: {
			obj:{
				name:"RJY",
				age:"22",
				tx:"./src/imgs/img1.jpeg"
			},
			email:"12345@qq.com",
			locate:"https://www.baidu.com/?tn=88093251_105_hao_pg"
		}
	})
</script>

结果如下：

这里点击“点击我百度一下”是可以正常跳转到百度页面的哦。