0一、Vue.js 開篇－－－Vue的介紹及準備工做

時間 2019-11-13

標籤 vue.js vue 開篇介紹準備欄目 JavaScript 简体版

原文原文鏈接

1. MVVM模式

model view view-model：數據視圖模型模型視圖數據css

model: 數據模型，PHP／JAVA等任何後臺服務語言從數據庫中獲取的數據html

view: 視圖模型；html頁面vue

view-model: 視圖數據橋樑，mvvm框架自動完成頁面的渲染和數據提交（js dom操做）程序員

MVVM表明框架有：Angular、Vue.js等。面試

2. Vue.js 簡介

官網介紹：Vue.js (讀音 /vjuː/，相似於 view) 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。數據庫

對於漸進式框架有兩種使用方法：頁面引用和Node.js 模塊開發。npm

做爲入門，咱們使用頁面引用方法，學習vue.js的語法。模塊開發後面再說。瀏覽器

3. 安裝Vue.js

方法一：官網下載 vue.js 文件。app

方法二：npm install vue框架

4. 開發工具推薦

Sublime Text 3 或者 Visual Studio Code。

我使用的是 Visual Studio Code（VSCode）。若是你也是使用該開發工具的話，這裏給出幾個好用的小插件：

☛ path intellisense 路徑提示插件

☛ live server 熱加載

☛ vue 2 Snippets Vue的代碼提示工具

5. 在瀏覽器中加載調試組件

火狐安裝：在火狐的官方插件庫進行查詢安裝；

Chrome瀏覽器：經過三方網站獲取下載地址，手動安裝插件

三方下載地址：crx.2333.me

vue devtools.crx 的ID：nhdogjmejiglipccpnnnanhbledajbpd

6. hello world

每一次學習新的語言、新的框架，都必將經歷 Hello World 程序。

直接上代碼：

<!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="../js/vue.js"></script>
    <script>
        window.onload = function (){

            //新建Vue的實例
            new Vue({
                el: "#app",//el表達式，css的元素選擇器
                data: {//vue 中定義數據，用於頁面中進行加載
                    hello:"Hello word !"//變量名：內容
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <!-- 插值 {{ }} -->
        {{ hello }}
    </div>
</body>
</html>

好，hello word 出來了。你覺得我這樣就會結束了嗎？固然不是。

接下來在上段代碼倒數第四行 {{ hello }} 下一行加一行代碼：

<hr />
<input type="text" v-model = "hello" />

來看看結果如何：

驚不驚喜，哈哈。簡單的幾行代碼就實現了。

七、生命週期視圖

Vue.js 官網的原話是這樣的：下圖說明了實例的生命週期。你不須要立馬弄明白全部的東西，不過隨着你的不斷學習和使用，它的參考價值會愈來愈高。

那我就先把圖放在這，慢慢看。

每篇一結尾：

一程序員去面試，面試官問：「你畢業才兩年，這三年工做經驗是怎麼來的？！」程序員答：「加班。」

相關標籤/搜索

每日一句

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