個人 Vue.js 學習日記（一）

時間 2019-11-08

原文原文鏈接

前言

我是一名很普通的.net程序員，作了幾些年的winform的開發，有過一點點的asp.net經驗，前端近瞎；恰巧公司最近須要開發一個很小的網站，那麼便藉此機會順便學習一下web應用方面的知識吧。html

Why Vue.js

那麼是什麼緣由讓我選擇了Vue呢？如今的我並不知道Vue其餘的優點，只知道他作到了雙向綁定，這很方便，那麼就是他吧！前端

起步

首先，我來到了Vue的官方網址https://cn.vuejs.org/；看了視頻，其意思是說Vue是響應式的，大約是JS裏的值在發生變化後，頁面上對應的顯示也會變化，因爲我沒有經歷過那麼沒有Vue的年代，因此我惟一的感受就是 - 這東西貌似很方便 = =...；不皮了，點擊起步！vue

門檻

官方友情提示：HTML、CSS 和 JavaScript 的中級知識，我好像不達標？簡單的HTML，CSS，JS我仍是能看懂的！先往下看吧。程序員

引用

兩種方式web

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

或vue-cli

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

這裏提到新手不推薦用vue-cli，這個我還真達標了！不過什麼是vue-cli？簡單查了下，大體是這樣中文名叫腳手架工具，英文名叫vue-cli，做用是配合已有模版快速搭建項目，吐槽一下，英文名看不懂就算了，這個中文名其實也看不懂...什麼叫腳手架？？？過過過！npm

Hello World先鋒Demo官

好，看到代碼了，先跟着敲一遍再說。
工具：VS2013瀏覽器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

輸出app

Hello Vue!

...沒有得到哪怕一絲絲成就感。asp.net

你問我爲啥把引用放下面而再也不Head裏？那你確定跟我是一個級別的程序員，啊哈哈哈~由於有大佬說這樣不影響上面HTML的加載速度。

經過觀察，大體能夠看出來，首先你的有一個div，而且他要有一個id，而後兩對大括號{{}}是顯示下面var app這個Vue對象的data中的一個屬性message的值。el視頻中也提到了，對應<div id="app">中的app，而後這個div和這個var app倆人就配對成功了！

官方提到：經過瀏覽器的JS控制檯修改app.message值，會看到變化

友情提示：在谷歌瀏覽器，按F12，切換到Console，輸入app.message='大哥別殺我！'回車，他變了，沒了。

真的，你不知道我經歷了什麼！

綁定元素Demo

先敲，先敲...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br/>
        <span v-bind:title="message">
            鼠標懸停幾秒聽說有看頭？
        </span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

沒有智能感知，代碼也不停報錯，不過編譯不會報錯，運行也能夠看到結果，老樣子用F12修改app.message的值，效果好像與上一個Demo是同樣的。

說明：v-bind是指令，指令帶前綴v-，v-bind將message的值綁定:給title，v-bind:title="message"

顯示隱藏元素Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br />
        <span v-bind:title="message">
            鼠標懸停幾秒聽說有看頭？
        </span>
        <br />
        <p v-if="seen">Now you see me - 我倫</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString(),
                seen: true
            }
        })
    </script>
</body>
</html>

友情提示：data中用,分割多個屬性，姑且就叫屬性吧。
老樣子F12 - Console - app.seen=false，結果是我倫不見了。
因此說v-if用來控制元素是否顯示的吧。

v-for

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br />
        <span v-bind:title="message">
            鼠標懸停幾秒聽說有看頭？
        </span>
        <br />
        <p v-if="seen">Now you see me - 我倫</p>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString(),
                seen: true,
                todos: [
                    { text: '第一個' },
                    { text: '第2個' },
                    { text: '第三個' }
                ]
            }
        })
    </script>
</body>
</html>

結果：

Hello Vue!2018/5/1 下午10:44:59 
鼠標懸停幾秒聽說有看頭？ 
Now you see me - 我倫

第一個
第2個
第三個

在控制檯輸入：app.todos.push({ text: '新項目' })

結果：

Hello Vue!2018/5/1 下午10:44:59 
鼠標懸停幾秒聽說有看頭？ 
Now you see me - 我倫

第一個
第2個
第三個
新項目

多了一個新項目

感受官方在不停地炫耀這個值同步改變的功能。

目測是個click事件的Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <br />
        <span v-bind:title="message">
            鼠標懸停幾秒聽說有看頭？
        </span>
        <br />
        <p v-if="seen">Now you see me - 我倫</p>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <button v-on:click="reverseMessage">啥叫逆轉消息？？？</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!' + new Date().toLocaleString(),
                seen: true,
                todos: [
                    { text: '第一個' },
                    { text: '第2個' },
                    { text: '第三個' }
                ]
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

今天先到這裏吧。