VUEJS入门学习 - 爱码网

1. VUEJS的官网：

https://cn.vuejs.org/

2.引入vuejs时的注意事项：

1).在head标签内引入，如果在body标签内引入会产生抖屏的现象；

VUEJS入门学习

3.创建vue实例

当在head中通过script标签引入vuejs库时，即可在body标签内写一段js代码，创建vue对象实例：

<body>
    <div id="root">{{msg}}</div>

    <script>
        //创建一个vue的实例
        //如果引入了vuejs库，即可通过new来创建一个vue实例
        //创建一个vue实例后，可以传递一个参数：即{}内的对象
        new Vue({
            //参数内大致分为以下几个部分
            //1.首先必须写一个： el:"" ; --> el表示vue实例和哪一个dom节点进行绑定；
            //下面一个代表：这个vue实例和id为root的dom节点进行绑定
            //#号表示id等于root的意思
            el:"#root",
            //VUE实例里面的数据放在data中
            data:{
                //由于vue实例已经绑定id为root的dom节点，在div标签内以 {{msg}}即可将下面msg所携带的值填充到div标签内；
                msg:"hello world"
            },

        });

    </script>
</body>

创建vue对象，通过el标签将vue对象和div节点(通过id进行绑定，#代表以id的形式进行绑定)绑定在一起，然后在div节点中可以通过{{msg}}来获取vue实例中data标签内msg所赋的值。下面的图片即上面代码在网页上展示的结果：

VUEJS入门学习