vuejs之插值表达式

本文链接： https://blog.csdn.net/RyleeLouth/article/details/102753081

什么是插值表达式？

插值表达式是Vuejs中实现数据渲染到页面的一种手段，可以直接让数据从模型到视图，不需要dom操作，在大括号里面给我们提供了js语境,可以执行简单的js代码
插值表达式就是{{ }}，如下操作，将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果，

<body>
    <div>
        {{ title }}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'div',
        data:{
            title:'hello Vuejs!'
        }
    })
</script>

插值表达式的js语境支持哪些js语法?

简单插值
1，字面量，number，string，boolean等
2，四则运算，+，-，*，/,%, （这里+可以做字符串拼接）
3，逻辑运算，&&，||，！
4，三目运算、
5，全局函数
复杂插值
1，对象
2，数组
3，对象数组

<body>
<!--要让下面的东西在vue的管理区域才可以使用插值表达式-->
<!--插值表达式提供了js的语义环境,可以执行简单的js代码-->
<div id="box">
    <h1>简单插值</h1>
    <h2>字面量</h2>
    <p>{{ number }}</p>
    <p>{{ string }}</p>
    <h2>四则运算</h2>
    <p>{{ 1+1 }}</p>
    <p>{{ 1-1 }}</p>
    <p>{{ '鼠标'+'world' }}</p>
    <h2>逻辑运算</h2>
    <p>{{ !true }}</p>
    <p>{{ false && true }}</p>
    <p>{{ false || true }}</p>
    <h2>三目运算</h2>
    <p> {{ 20 > 18 ? '成年': '未成年' }} </p>
    <h2>全局函数</h2>
    <p>{{ Math.random() }}</p>
    <p>{{ parseInt(10,2) }}</p>
    <h1>复杂</h1>
    <!--1，数组，2，对象，3，数组对象-->
    <h2>数组</h2>
    <ul>
        <li v-for="item in arr">{{ item }}</li>
    </ul>
    <h2>对象</h2>
    <ul>
        <li>{{ obj.name }}</li>
        <li>{{ obj.age }}</li>
    </ul>
    <h2>对象数组</h2>
    <ul>
        <li v-for="item in arr1">{{ item.name }}---{{ item.age}}</li>

    </ul>
    <h2>在 vuejs 如何实现HTML代码的正常展示</h2>
    <div>{{ html1 }}</div>//这里的标签会被当成字符串，不会被解析
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({

        el: "#box",
        data: {
            string:'abc',
            number:111,
            arr:[1,2,3,4],
            obj:{
                name:'lily',
                age:'18'
            },
            arr1:[{name:'aa',age:18},{name:'bb',age:19}],
            html1:`<ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>`
        }
    })

</script>
</body>

为什么插值表达式只能支持简单的js语法？

为了防止xss攻击，如果有人在插值表达式中恶意的写入一些不好的js或者是html代码，如果插值表达式可以执行这些js代码
那么就会对页面的结构造成破坏和影响，盗取cookie篡改页面，这样就不好了
所以vuejs也考虑到了这个xss攻击，让插值表达式只能支持一些简单的语法

什么是xss攻击？

xss：Cross Site Scripting，跨域脚本攻击，
原理：用户不需要登录，可以在输入框或者是url输入，向你的页面输入一些js脚本语言
后果：盗取cookie，破坏页面结构

什么是csrf攻击？

csrf：Cross-site request forgery，跨站请求伪造
在这里插入图片描述
危害：在用户不知情的情况下，模拟用户的操作，购买商品，发邮件，甚至转账