Vue 初學指南

時間 2019-11-17

標籤 vue 初學指南简体版

原文原文鏈接

前言

一直作java開發,新公司,分配了前端的工做,一臉懵逼,有朋友說:你能夠跑路了,確定很坑html

更多時候遇到這樣的狀況懼怕的不是本身不會等問題,而是更怕被技術甩掉一個世紀線------好好學習,每天向上前端

就把項目最接近的vue開始入手,官方不推薦使用腳手架cli的,那就不用唄,先一步一步來,以往一直聽着前端的大神說什麼vue+webpack+npm的開發,很流利,也不知道是什麼vue

在Vue構建大型應用獲得時候官方推薦使用NPM來安裝,NPM很好的和webpack 或者 Browserify 模塊打包工具配合使用java

下面開始學習Vue基礎指南,node事先都安裝好了,若是npm的速度慢,能夠換成cnpm(淘寶鏡像會快一些),編輯器用vscode,很好使,並且Vue對中文支持很不錯,會很舒坦,說白了對本身英語能力,內心仍是有點逼數的node

瞭解Vue

Vue是漸進式框架, 設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，易於上手，便於與第三方庫或既有項目整合依賴jquery

漸進式框架!? 自底向上逐層應用!? 這兩個是什麼意思? Vue 1.0 的官方定位是視圖管理，Vue 2.0 的官方定位是漸進式框架webpack

漸進式框架 : 我的理解面對新業務或者成型項目使用vue,能夠針對功能的需求,使用vue的特定功能,不須要像Angular,React,須要理解其全套規則,意味着以最少,即實現web

好比處理form表單提交或者jquery的ajax提交,能夠把vue當成一個js庫來使用ajax

好比使用jquery生成DOM,換成讓vue來管理DOM,從關注操做DOM節點到關注數據變化算法

好比:再現有web項目,再加一個webapp項目,可使用vue路由器,webpack能夠做爲前端的構建器

好比和後端的接口訪問愈來愈頻繁,須要大量數據在組件中共享數據,可使用vuex處理數據在組件之間的流動

再好比一步一步發現項目中使用了不少vue組件,最後發現項目的seo項目不是很好,又可使用vue的SSR作seo優化

.......發現已是一個Vue全家桶了,在各步依然不影響其餘已有組件效果

自底向上逐層: 原來英文是 from ground up ,這個比較好理解,從上面的分析也能看出問題,也有一個自底向上的設計/算法,就是先編寫出基礎程序段,而後再逐步擴大規模、補充和升級某些功能,是一種自底向上構造完整應用的過程

Hello Vue

全部的語言都是那麼有情懷,從Hello開始,建立一個Html,名字隨意取,而後基礎操做步驟

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一步 引入環境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 第二步 建立一個div -->
    <div id="app">
        <p>{{ message }}</p>
    </div>
</body>
<!-- 第三步 Dom數據渲染 -->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    })
</script>
</html>

成功的寫好了一個Vue 文本插值應用,message數據和Dom創建了關聯,且都是響應式的,打開瀏覽器的控制檯，並修改的值，看到相應地更新

結合上面的文件插值,來綁定元素操做

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一步 引入環境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 第二步 建立一個div -->
    <div id="app">
        <span v-bind:title="msg">
            {{ message }}
        </span>
    </div>
</body>
<!-- 第三步 Dom數據渲染 -->
<script>
    var app=new Vue({
        el: '#app',
        data: {
            message: '懸停查看信息',
            msg: "懸停-信息"
        }
    })
</script>
</html>

------效果

其中有一個屬性v-bind成爲指令,指令帶有前綴v-,是vue提供的,能夠猜測,其餘的指令也都是v-xxxx的形式,會在渲染的DOM上應用特殊的響應式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 第一步 引入環境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 第二步 建立一個div -->
    <div id="app">
        <span v-bind:title="msg">
            {{ message }}
        </span>
        <p v-if="flag">this is Tag-P</p>

        <ol>
            <li v-for="item in items">{{item.id}}</li>
        </ol>
        <button v-on:click="fun">拼接</button>
        <input v-model="message">
    </div>
</body>
<!-- 第三步 Dom數據渲染 -->
<script>
    var app=new Vue({
        el: '#app',
        data: {
            message: '懸停查看信息',
            msg: "懸停-信息",
            flag: true,
            items: [
                {id: "a"},
                {id: "b"},
                {id: "c"}
            ]
        },
        methods:{
            fun:function(){
                this.message = this.message + "拼接字符串";
            }
        }
    })
</script>
</html>

v-for指令能夠綁定數組的數據來渲染一個列表,可使用app.items.push來添加元素

v-on指令添加一個事件監聽器,出發事件函數

v-model指令輸入和應用狀態之間的雙向綁定,input和message的值一致變化

學到這裏,會發現,一旦DOM寫好了,就不須要去關心操做DOM的事情,都由vue來處理,更多的是關注邏輯或者數據

--------------------------------------------------------------------------------------------