Vue基础指令介绍及用法讲解

vue中的指令按照不同的用途可以分为如下6大类:
内容渲染指令、 属性绑定指令、 事件绑定指令、 双向绑定指令、 条件渲染指令和 列表渲染指令。

内容渲染指令(v-text、v-html）

  v-text 指令（更新元素的文本内容。如果要更新部分的文本内容，需要使用 { { }} 插值。)、v-html 指令（更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译)。

<div id="app">
	<!-- 默认写法会替换所有内容，使用插值表达式{
   {
   }}可以替换指定内容 -->
	<!-- 注意：v-text、v-html都会将所有的文本值用获得的数据替换掉,v-text也可进行字符串的拼接操作 -->

	<h3 v-text="message + '呀!'">柳小姐</h3>  //你好呀!
	<h3>{
   {
   message + '呀!'}}柳小姐</h3>  //你好呀!柳小姐

	<!-- v-html会把html结构解析成标签，v-text无论内容是什么都只会解析成文本 -->
	<p v-html="message"></p>  //你好
	<p v-text="message"></p>  //你好
	<p v-html="web"></p>  //一个百度的链接
	<p v-text="web"></p>  //<a href='https://www.baidu.com'>百度</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	let app = new Vue({
   
		el: '#app',
		data: {
   
			message: '你好',
			web: "<a href='https://www.baidu.com'>百度</a>",
		}
	})
</script>

属性绑定指令(v-bind）

  插值表达式只能使用在元素的文本节点上，不能使用在元素的属性节点中。所以可以使用该指令：v-bind 指令：为元素的属性动态绑定属性值。语法糖为:。操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div id="app">
	<img v-bind:src="imgSrc" width="270px" height="400px">
	<!-- 语法糖（简写方法）-->  
	<img :src="imgSrc" width="270px" height="400px">
	<!-- 此外，v-bind:class指令也可以与普通的class属性共存。以下结果：<div class="static active"></div>-->
	<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
	<!-- 表达式结果的类型是对象（对象语法）--> 
	<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 
	<div :style="styleObject"></div>
	<div :class="[activeColor,width]"></div> <!-- 表达式结果的类型是数组（数组语法）--> 
</div>
<!