学习vue.js 第一天

最近听到很多人都在用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>