Vue.js官方文檔學習筆記(一)起步篇

時間 2020-05-22

標籤 vue.js vue 官方文檔學習筆記起步欄目 JavaScript 简体版

原文原文鏈接

Vue.js起步

Vue.js介紹

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。javascript

起步

導入

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

文本插值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

結果

1.如今數據和dom建立了關聯 2.全部的東西都是響應式的html

綁定元素特性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app-2">
        <span v-bind:title="message">
            鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
        </span>
    </div>
    <script>
        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: '頁面加載於 ' + new Date().toLocaleString()
            }
        })
    </script>
</body>

</html>

v-bind特性稱爲指令，該指令的意思是：「將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致再次打開瀏覽器的 JavaScript 控制檯，輸入 app2.message = '新消息'，就會再一次看到這個綁定了 title 特性的 HTML 已經進行了更新。 v-bind特性稱爲指令:將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致vue

條件與循環

條件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-3">
        <p v-if="seen">如今你看到我了</p>
    </div>
    <script>
        var app3=new Vue({
            el:'#app-3',
            data:{
                seen:true
            }
        })
    </script>
</body>
</html>

不只能夠將數據綁定到DOM文本或者特性，還能夠綁定到DOM結構。除此以外，Vue 也提供一個強大的過渡效果系統，能夠在 Vue 插入/更新/移除元素時自動應用過渡效果。java

循環

v-for命令渲染一個任務列表python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">{{todo.text}}</li><!--顯示出每一項中的text屬性-->
        </ol><!--v-for命令相似於python中的for...in語法-->
    </div>
    <script>
        var app4=new Vue({
            el:"#app-4",
            data:{
                todos:[
                    {text:"學習javascript"},
                    {text:"學習Vue"},
                    {text:"整個牛項目"}
                ]
            }
        })
    </script>
</body>
</html>

在控制檯輸入app4.todos.push(text:"新項目") 結果 npm

處理用戶輸入

v-on指令

v-on指令添加一個事件監視器，經過它調用在vue實例中定義的方法瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反轉消息</button>
    </div>
    <script>
        var app5=new Vue({
            el:'#app-5',
            data:{
                message:"Hello Vue.js!"
            },
            methods:{
                reverseMessage:function(){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
</html>

**注意:**reverseMessage方法中更新了應用的狀態，可是並無觸碰dom,全部的DOM操做都是由Vue實現的，編寫代碼時候只須要關注邏輯層就能夠了app

v-model指令

功能:實現表單輸入和應用狀態的雙向的綁定框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <script>
        var app6=new Vue({
            el:"#app-6",
            data:{
                message:"Hello Vue.js!"
            }
        })
    </script>
</body>
</html>

同步綁定就是，當input欄輸入改變的時候，message和它同時改變dom