最近听到很多人都在用Vue.js ,我也想凑凑热闹，来个入门 啥的 ，要不以后人家说，啥都不知道，多low
看到官网 是这样介绍Vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。
在我第一天的学习后，我觉得它和angular.js 有点像，至于到底是不是这样 还需要深入学习。
我的理解 这个框架 让我在前端数据显示方面很简单 ，不用再写一堆js “+=” 什么的 ，这只是我目前浅层的理解 ，更深的以后会学习再说。
下面是我今天学习的代码，里面有很多注释 是我自己的理解，希望对有需要的人有帮助，不需要的人，自动略过，谢谢。
（一）
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>vue01</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <!-- 声明式渲染 将数据渲染进DOM系统 有一个特点 元素是响应式的 在浏览器控制台里改变 app.message 的值 相应页面上的值也会改变 --> <div id="app"> {{message}} <!-- 数据 --> </div> <script> var app = new Vue({ el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的 data:{ message:"Hello Vue!" // 渲染在页面上的数据 } }) </script> </body> </html>
（二）
<body> <!--条件判断指令--> <div id ="app"> <p v-if="seen">我在呢</p> <p v-if="noseen">我在呢</p> </div> <!-- 条件循环指令 在控制台里输入 app1.items.push({text:"第四条"}) 页面会多加一条--> <div id="app1"> <ol> <li v-for="item in items"> {{item.text}} </li> </ol> </div> <script> var app = new Vue({ el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的 data:{ seen:true, // 渲染在页面上的数据 noseen:false } }) var app1 = new Vue({ el:"#app1",//这个应该就是包含data数据的元素的class或者id，我是这么理解的 data:{ items:[ {text:"第一条"}, {text:"第二条"}, {text:"第三条"} ] } }) </script> </body>
（三）
<body> <!--绑定事件 单击事件v-on:click--> <div id ="app"> <p v-on:mouseenter="change">{{message}}</p> <button v-on:click="reverse">reverse</button> </div> <script> var app = new Vue({ el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的 data:{ message:'Hello Vue.js!' }, methods:{ //方法 reverse:function(){ this.message = this.message.split("").reverse().join("") }, change:function(){ this.message = "你好吗？"; } } }) </script> </body>
（四）
<body> <!--双向数据绑定 用v-model 连接数据--> <div id ="app"> <p>{{message}}</p> <input v-model="message"> </div> <script> var app = new Vue({ el:"#app",//这个应该就是包含data数据的元素的class或者id，我是这么理解的 data:{ message:'Hello Vue.js!' }, }) </script> </body>