学习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>