03-vue复杂数据&指令

1、复杂数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
        <h1>{{user.id}} ==== {{user.name}} ==== {{user.age}}</h1>
        <h1>{{schools[0]}}</h1>
        <h1>{{users[0].id}} ==== {{users[0].name}} ==== {{users[0].age}}</h1>
    </div>
</body>
</html>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            count: 0,
            user: {id:21, name: "小明", age: 21},
            schools: ["河南校区", "北京校区", "天津校区"],
            users: [
                {id:21, name: "小明", age: 21},
                {id:21, name: "小明", age: 21},
                {id:21, name: "小明", age: 21}
            ]
        }
    });
</script>

2、v-text v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    v-text 和 v-html：作用：用来获取vue实例中data属性声明数据
                使用语法：在哪个标签上获取直接在哪个标签上定义v-text v-html

    {{}}}取值和v-text取值区别：
        1、{{}}取值不会将标签原始的数据清空，使用v-text取值清空原始数据    {{}}这种方式取值：插值表达式
        2、{{}}取值存在插值闪烁，v-text v-html取值。不存在插值闪烁

    v-text  (innerText)  、 v-html  (innerHtml)区别：
        1、使用v-text取值：直接将获取数据渲染到指定标签中
        2、使用v-html取值，先将获取数据进行html标签解析，解析之后在渲染到指定标签中
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 v-text="msg">666</h1>

        <span v-text="content"></span> <br>
        <span v-html="content"></span>
    </div>
</body>
</html>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            content: "<a href='http://www.baidu.com'>点我查看详细</a>"
        }
    });
</script>

3、v-on指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--
        js中的事件：事件三要素：
                        事件源：发生特定动作html标签
                        事件：发生特定动作事件
                        监听器：事件处理程序  一般在js中时事件处理函数  function(){}

        v-on指令：作用：用来给页面中标签绑定事件用的  语法：在对应标签上使用v-on:事件名="事件处理函数名"
        -->

        <button v-on:click="test">vue点击事件绑定</button>
        <button v-on:mousemove="test1">鼠标移入事件</button>
        <button v-on:click="test2">鼠标点击加一{{count}}</button>
    </div>
</body>
</html>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
          count: 0
        },
        methods: {
            test: function () {
                alert("事件发生")
            },
            test1: function () {
                alert("鼠标移入")
            },
            test2: function () {
                //如果在vue定义方法中获取data中数据   注意：在自定义方法中可以直接使用this，this代表当前的vue实例
                this.count = this.count + 1;
                this.test3();
                //还可以通过this调用其他方法
            },
            test3: function () {
                alert("this调用的其他方法")
            }
        }
    });
</script>
posted @ 2021-09-21 16:02  不是孩子了  阅读(91)  评论(0)    收藏  举报