学习vue.js 第一天

时间 2019-11-12

标签学习 vue.js vue 第一天栏目 JavaScript 繁體版

原文原文链接

最近听到不少人都在用Vue.js ,我也想凑凑热闹，来个入门啥的，要不之后人家说，啥都不知道，多lowjavascript

看到官网是这样介绍Vue.jshtml

Vue.js（读音 /vjuː/, 相似于 view）是一套构建用户界面的 渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。前端

在我第一天的学习后，我以为它和angular.js 有点像，至于究竟是不是这样还须要深刻学习。vue

个人理解这个框架让我在前端数据显示方面很简单，不用再写一堆js “+=” 什么的，这只是我目前浅层的理解，更深的之后会学习再说。java

下面是我今天学习的代码，里面有不少注释是我本身的理解，但愿对有须要的人有帮助，不须要的人，自动略过，谢谢。浏览器

（一）app

<!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>

（四）this

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