master

分支 (1)

管理

管理

master

learn-vue
/
demo_025.html

<!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="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
       <div ref="d1">{{msg}}</div>
       <button @click="f1">点我</button>
    </div>
    <script>
        /*
            我们已经知道，Vue不提倡我们直接进行DOM操作，Vue为我们制作了双向绑定的功能，
            就是为了把程序员从繁琐的DOM操作中解放出来！

            但是，Vue毕竟的底层毕竟是js，我们当然能使用js的方式来操作DOM元素了。

            既然Vue不提倡我们直接使用document.getElementById()来过去一个元素，那么Vue
            一定提供了自己的方式，来获取DOm元素。
        */
        var app = new Vue({
            el: "#app",
            data : {
                msg: "九阴真经"
            },
            methods: {
               f1() {
                    // this.msg = "天之道，损有余而补不足。";

                    // var d1 = document.getElementById("d1");
                    // d1.innerHTML = "天之道，损有余而补不足!!!";


                    // this.$refs表示获取到当前Vue实例中，所有拥有ref属性的元素。

                    this.$refs.d1.innerHTML = "天之道，损有余而补不足~~~";
               }
            }
        });
    </script>
</body>
</html>