Vue.js

2018-09-14

2018-09-17  本文已影响0人  天赐很棒

 $el 获取vue绑定的元素的

  $data 获取vue实例中的数据

  $options  获取vue实例中的自定义属性

  $refs    获取所有带ref属性的元素 


实例:


代码如下:

    <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="l+bx">

        {{msg}}

        <h1 ref='hello'>计算机网络技术</h1>

    </div>

js代码:

    <script src="js/vue.js"></script>

    <script>

        new Vue({

            el:'#lbx',

            data:{

                msg:'学好硬本领,赢在软实力'

            },

            uname:'盛邦升华',

            age:18

        })

        //$el

      console.log(vm.$el);

      vm.$el.style.color='red';

    //$data

    console.log(vm.$data);

    //$options

    console.log(vm.$options);

    console.log(vm.$options.uname);

    console.log(vm.$options.age);

        //refs

        console.log(vm.$refs);

        console.log(vm.$refs.hello);

    </script>

</body>

</html>

计算属性:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="lgy">

        <h1>{{msg}}</h1>

        <a href="">{{revMsg}}</a>

    </div>

    <script src="js/vue.js"></script>

    <script>

        new Vue({

            el:'#lgy',

            data:{

                msg:'hello vue'

            },

            computed:{

                revMsg:function(){

                    return this.msg.split(' ').reverse().join('===')

                }

            }

        })

    </script>

</body>

</html>

上一篇 下一篇

猜你喜欢

热点阅读