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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。