关于vue的那些事。。。。

vue——简单入门

一、什么是vue?

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

二、vue优点?

1、Vue 采用自底向上增量开发的设计

2、Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合
3、Vue单文件组件 & 第三方库 = SPA应用

4、vue-cli提供了高效、快速、便捷的项目搭建
5、提供了完整的文档体系

三、网站

1、官方网站：http : //www.vuejs.org

2、中文网站：http : //cn.vue.org

3、V1.x中文文档：http : //cn.vuejs.org/v1/guide

4、V2.x中文文档：http : //cn.vuejs.org/v2/guide/

四、基础语法

1、数据的双向绑定（字符串）

（1）、文本双向绑定

    在VUE中，数据双向绑定时，必须在data属性中申明这个变量

    {{}}  === v-text 进行文本的数据双向绑定

    以下代码为例：

 引入js;

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

     <div id="app">
        {{username}}
        <div v-text="username" ></div>
       </div>

script部分：

 <script>
        var app = new Vue({
            el : "#app",
            data : {
                username : "初始值",
                msg : "<h1>liujianhong is good good boy</h1>"
            }
        });

    </script>

   v-html 进行脚本的数据双向绑定 尽量不要使用，有安全问题--xss攻击问题

（1）、文本双向绑定

 <div v-html="msg"></div>

  <script>
        var app = new Vue({
            el : "#app",
            data : {
                msg : "<h1>liujianhong is good good boy</h1>",
            }
        });

（1）、属性数据的绑定

以下代码为例：

  v-bind:属性名="属性值"

 <div id="app">
        <div v-bind:title="'你真帅'">把鼠标放上去会显示</div>
        <div v-bind:title="box">把鼠标放上去会显示</div>
    </div>

<script>
        var app = new Vue({
                box : "你真帅"
            }
        });

    </script>