Vue 2 | PART 1 跟世界打個招呼吧

時間 2019-12-09

標籤 vue 世界打個招呼简体版

原文原文鏈接

這是一個純新手向的攻略系列（不是權威「教程」），它：javascript

√ 使用最簡單的文字進行解釋
√ 每期分享一個點，長度適中，適合碎片時間閱讀
√ 圖片均壓縮在50k如下，把流量消耗降到最低
（其中一期由於截屏了比較大的面積用來展現效果，因此會稍微超出這個限制）css

啓程：

本系列是對VueJS 2.0（使用版本v2.1.3）最基礎的東西的介紹，因此採用直接在html裏面引入vue.js的方式。爲了使界面稍微養眼一點，直接使用bootstrap的css。html

Sa，咱們立刻來跟世界問好吧！vue

假設咱們有這樣一個data對象，但願把data.info的值綁定到html中：java

var data = {
    info: 'hello hacker cafe'
}

操做很簡單（div#app和script之間還有vue的引入，爲了節省空間使用省略號代替）：git

<body>
    <!-- vue對象綁定的元素 -->
    <div id="app">
        <!-- 直接放入數據對應的key -->
        <h1>{{ info }}</h1>
    </div>

    <!-- ... ... -->

    <script type="text/javascript">
        var data = {
            info: 'hello hacker cafe'
        }

        var app = new Vue({
            // 綁定html元素
            el: '#app',
            // 綁定數據
            data: data
        })
    </script>
</body>

固然js的部分還能夠簡化爲：github

<script type="text/javascript">
    var app = new Vue({
        // 綁定html元素
        el: '#app',
        // 綁定數據
        data: {
            info: 'hello hacker cafe'
        }
    });
</script>

大鬍子（Mustache）

簡單地說一下雙重花括號這種語法。在Vue裏面它只接受JS表達式。因此下面這幾種寫法都是ok的：bootstrap

<div id="app">
        <!-- info值續上，爲了節省空間省略其它代碼 -->
        <h2>{{ info.concat('!!!') }}</h2>

        <h2>{{ info.length }}</h2>

        <h2>{{ info ? 'has info' : 'no info'}}</h2>
    </div>

可是不要覺得這就是在它裏面能夠寫任何代碼的意思，下面這些例子就會報錯（例子來源於官網）：app

<div id="app">
        <!-- 這是賦值 -->
        <h2>{{ var ok = 1 }}</h2>

        <!-- 條件控制使用二元表達式，見上面正確的寫法 -->
        <h2>{{ if (ok) { return info } }}</h2>
    </div>

順帶說一下爲何直接引入未壓縮的vue.js。在你跑上面這兩行錯誤代碼的時候，未壓縮的版本會在console裏面給出提示，而壓縮了的版本是不會有提示的。能夠自行嘗試一下。ide