2018-09-14

 $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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容