Vue.js数据绑定

今天阅读了项目代码，参看界面展示。发现不是之前所涉及过多的界面样式展示而是数据。

因为知道是应用Vue.js框架，所以想进一步去接触这个框架。

它的特点：Vue.js是一个构建数据驱动的web界面的库，

         目标：通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

安装：因为项目需要，要多熟练使用命令行。所以我这次的安装方法是命令行工具,并且我已将cnpm命令替换成npm.     

    //全局安装 vue-cli
   cnpm install -g vue-cli
   // 创建一个基于 "webpack" 模板的新项目
   vue init webpack my-project
   //安装依赖
   cd my-project
   cnpm install
   cnpm run dev

结果下载一个Vue的demo:my-project

数据的双向绑定：（在下载的demo里进行简单的操作）

1.new 一个vue对象的时候可以设置它的属性，最重要的包括三个：data,methods,watch

其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。

Vue对象的设置通过html指令进行关联

重要的指令：

-      v-text 渲染数据

-      v-if控制显示

-      v-on 绑定事件

-      v-for循环渲染

简单的demo操作：

控制数据的循环遍历：

基本事件

鼠标点击切换样式：

获取输入框的内容

数据的绑定简单结束