Vue（js框架）

单页技术应用：页面不会跳转，只是局部刷新，利用的是锚点原理。

Vue特点：1）组件化  2）数据驱动

Vue的开始使用：

1）先引入Vue文件，引入方式和jquery类似，可以直接引入

<script type="text/javascript" src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

或者下载Vue文件到本地，再进行引入。

2）创建一个容器，id属性值可以随便写，这里是app。{{  }}是占位的（跟模板引擎似的吧~），里面的msg是变量。

<div id="app">
   {{msg}}
</div>

 

3）绑定数据

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
           msg:123456
        }
    });
</script>

el:'#app',  是绑定div容器。data是一个对象。里面的数据就是要在div中显示的数据。

二、属性值

需要再属性前加上冒号，看下面代码中的title，

<div id="app">
        {{msg}}
        <div :title="v" style="width:50px;height:50px;background: #000;"></div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                msg:123456,
                v:123
            }
        });
    </script>

三、条件显示

看这里