VUE-框架指令

Vue中的指令

{{ }} 被称作大胡子语法、双花括号语法，在 Vue 的使用中很常见
可以存放变量名，存放表达式（ 一些运算，只要最终的结果 ）

{{x+y}}
<h1>Hello,{{title}}</h1>

但是它有着自身的局限性，只允许出现在内容区域，怎么办？！
我想改 class类名！ 想改id名！想改属性名！

Vue 指令

为迎合属性（类名，id，name）变化的需要，Vue 提供了 指令
指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式

• 指令格式
  v-指令名称 = 表达式（不是普通的字符串）

v-text

操作，修改 文本内容
这个方法有一个弊端,会替换掉所有的内容,相当于innerHTML

<h2 v-text="title"></h2>

v-html

为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的 ( 不使用 v-html 就是普通的字符串 )
使用之后 将内容当作一个html标签来解析
覆盖原有的文本内容

   <div id="app">
    	<p v-html="content">测试v-html</p>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                content:"<style>body{color:purple} </style>"
            }
        })
    </script>

v-cloak ( 不需要表达式 )

编译完成才会生效，很少使用的指令
编译结束时效果失效

v-once ( 不需要表达式 )

只渲染生效一次 之后无论再怎么修改都不再改变

<div id="app">
		<div v-once>
			<p>{{num}}</p>
		</div>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                num:"我不变的，你可劲儿改"
            }
        })
    </script>

v-pre ( 不需要表达式 )

直接忽略不加载
标签所在的范围内，全部失效（ 视为字符串 ）

<div v-pre>
		<p>{{title}}</p>
		<p>{{num}}</p>
	</div>

v-show

控制显示隐藏 ( 操控 display 属性 ) 适用于变化频繁的场景
例如：轮播图

 <div v-show="isLogin" > 机密文件 </div>

v-if

创建 / 销毁元素 ( 页面上就不存在 ) 适用于变换不频繁的场景
例如：购物车商品 添加 / 删除

  <div v-if="isLogin"> 绝密文件 </div>

v-else

作为 v-if 的结束指令，不可单独存在（否则直接报错）
通常与 v-if 或者 v-else-if

   <div v-else> 公开文件 </div>

注意

v-if / v-else 及 v-else-if 之间
不能出现其他的元素

  <div id="app">
        <div v-show="isLogin" > 机密文件 </div>
        <div v-if="isLogin"> 绝密文件 </div>
        <div v-else> 公开文件 </div>
        <!-- 
            v-if / v-else 及 v-else-if 之间 
            不能出现其他的元素
        -->
    </div>
	<script>
	/**
	 * v-show 切换元素的显示与隐藏（display 属性）
	 * v-if 改变的是元素的结构（渲染或删除）
	**/ 
        let app = new Vue({
            el:"#app",
            data:{
               isLogin:false
            }
        })
    </script>

v-for

指令中的循环

  <div id="app">
        <ul>
            <!-- of / in 没有实际的区别 -->
            <li v-for="user of users">
                <input type="checkbox" name="" id="">
                {{user.id}} - {{user.name}}
            </li> 
        </ul>
        <div v-for="(val,name,index) in object">
            <span>索引值：{{index}}</span>
            <span>属性名：{{name}}; 值：{{val}}</span>
        </div>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
              users:[
                {id:1,name:"白"},
                {id:2,name:"百"},
                {id:3,name:"掰掰"},
                {id:4,name:"小白"}
              ],
              object:{
                x:"a",
                y:"b",
                z:"c"
              }
            }
        });
    </script>