vuejs 指令的使用

前面我们已经学习了 vue 的安装和基本用法，还有插值表达式，这次我们来学一下指令的基本使用
vuejs 提供指令： 在 vuejs 以 v-开头的标签叫做指令，扩展html本身标签的能力
1. 指令要作为元素的属性使用（也就是说要放在标签里面） 2. 指令提供一个js执行环境（也就是，在引号里的东西会被当做 js 进行解析）

v-text

更新元素的 textContent，如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值（官网解释）。
也就是：设置元素的 innerText 为模型变量的值
我们用一个例子来说明一下

<div id="box">
//这样就可以把 name 里的内容放进来了
	 <p v-text="name"></p>
	 <p>{{ name }}</p>
//以上的结果是一样的
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili"
        }
    })
</script>

思考：既然两种方法都一样，为什么还要用 v-text 呢？

	一：因为虽然两种方法的结果都一样，但是插值表达式会有一个页面的闪烁问题（如果用户的电脑网络较差或者是电脑的配置较差，第一次加载页面的时候，用户可以看到的 {{ }}  效果），而 v-text 指令则解决了这个问题
	**二：如果标签内部有内容的话，那么 v-text 的值会覆盖原来的（一定要注意）**

v-cloak

这个指令保持在元素上直到关联实例结束编译，不需要表达式（官网解释）
也就是： v-cloak : 1. 不希望出现闪烁的标签设置 v-cloak属性
2. 设置 style 样式，使用该属性选择器：display:none
3. 当执行完毕后,vuejs 会把所有有 v-cloak指令移除

<style>
        [v-cloak]{
            display: none;
        }
    </style>
<div id="box">
//这样元素的属性就是 diaplay ：none，等到后面，vue 移除 v-cloak ，display 属性也就被移除，元素可以出现
    <p v-cloak>{{ name }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili"
        }
    })
</script>

v-html

设置元素的innerHTML属性为模型变量的值
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译,也就是你插入进去的 html 标签会被解析。因为有时候我们需要插入一个，而我们如果是用插值表达式的话，那标签是不会被解析的，所以我们要用 v-html指令

<div id="box">
	 <p>{{ cont}}</p>
	 //这样会把 ul li标签页打印出来
	 //<ul> <li>hello</li> <li>hello</li> <li>hello</li> </ul>
	 <p v-html="cont"></p>
	 //这样就能把标签解析出来了 
	/*	hello
		hello
		hello*/
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili"，
            cont: `
                        <ul>
                            <li>hello</li>
                            <li>hello</li>
                            <li>hello</li>
                        </ul>
                `
        }
    })
</script>

注意：指令里面不要使用插值表达式 插值表达式可以提供js执行 指令也可以提供 js执行环境
但是我们要注意的是：-vuejs作者担心模型变量的数据存在安全的隐患（xss攻击：要显示的数据存在了可执行的代码 ）
在输出数据之前，会把数据进行转义处理，转换实体符号：< ==> < > >
v-html使用的时候要慎重，确保数据是安全的。不然很容易造成 xss 攻击（1. xss 2.csrf：token）。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上

补充：

XSS 攻击：XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器 执行，达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列 表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实 施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨 大的，是web安全的头号大敌。

v-show

根据表达式之真假值，切换元素的 display属性，我们来看一个例子就知道了

<div id="box">
	<p v-show="true">hello</p>  //display:不为 none，在页面上可以显示
	<p v-show="flase">hello</p>  //display：none, 在页面上不会显示
	//它也可以是动态的,可以根据模型中 isShow  的值来改变（isShow 是个变量）
	<p v-show="isShow">hello</p>
//以上的结果是一样的
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili",
            isShow: true
        }
    })
</script>

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建,也就是说，它的值如果为 flase，那么这个标签就会被移除，在 审查元素 的地方是看不到这个标签的
我们也用一段代码来写一下

<div id="box">
	<p v-if="true">hello</p>  //在页面上可以显示,
	<p v-if="flase">hello</p>  //在页面上不会显示，标签页不会存在(移除了这个元素)
	//它也可以是动态的,可以根据模型中 isShow  的值来改变（isShow 是个变量）
	<p v-if="isTrue">hello</p>
//以上的结果是一样的
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili",
            isTrue: true
        }
    })
</script>

思考：v-if 和 v-show 有什么区别

它们都可以做元素的显示和隐藏，但是两者之间不同的是，v-show 是display 属性为 none，在控制台还是能见到这个元素的，而 v-if 则是将这个元素移除，不会出现在控制台上

v-if 和 v-show 该如何取舍

页面的某个元素频繁的切换，肯定是v-show ；如果某个元素只需要显示隐藏一次 v-if

v-else

要和前面的 v-if连用，前面为true，这里就为false，就像if(){}…else{}一样

 <p v-if="false">{{ name }}</p> //不会显示
 <p v-if="true">{{ name }}</p>  //显示( 如果前面的为 true， 则这里就为 false)

v-for

遍历数组和对象，我们用代码来演示

<div id="box">
    <p>{{ arr }}</p>
    <p>{{ obj }}</p>
    <!--这样的话就会把数组和对象里的内容全部显示出来，而有时候我们需要获取其中一个或者遍历，这时候我们就可以用 v-for -->
    <hr />

    <!--我们可以用下标-->
    <p>{{ arr[1] }}</p>
    <!--但是上面那种方法就不能遍历，所以我们可以使用 v-for 这个我们一般使用列表-->
    <ul>
        <li v-for="item in arr">item</li>
        <!--item:是我们自己定义的变量，arr就是数据里的数组-->
        <!--如果要把下标也遍历出来，可以在变量哪里用个括号括起来,前面的参数是值，后面的参数是下标-->
        <li v-for="(item,index) in arr">index:{{ index }} item：{{ item }}</li>
    </ul>
    <hr />
    <!--遍历对象-->
    <ul>
        <li v-for="(value, key) in obj"> {{ key }}  {{ value }}</li>
    </ul>


</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili",
            arr: [1,2,4,56,7],
            obj: {id: 1, name: "xiaoxiao"}

        }
    })
</script>

v-pre

跳过这个元素和它的子元素的编译过程。（官网解释）
也就是：v-pre标签：不会解析vuejs语法，原封不动输出
我们来看下面的代码

<div id="box">
	<div v-pre>
        我今天学习了 vuejs 里面的插值表达式
        //{{ title }}不会被解析，而是以{{ title }} 这样的形式原封不动的打印出来
        <p>{{ title }}</p>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',
        }
    });
</script>