2. 程式人生 > 實用技巧 >Vue快速入門

Vue快速入門

阿新 • • 發佈：2020-10-26

Vue官網地址：https://cn.vuejs.org/
中文網：https://doc.vue-js.com/
js：https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js


1. MVVM模式
Model：模型層
View：檢視層
ViewModel：連線模型檢視的中介軟體



2. IDEA整合Vue無法建立專案解決問題
如圖：下載外掛 -> 配置模板




3. 第一個Vue程式
所有東西都是響應式的，可以在控制檯操作物件屬性，介面實時更新

<body>
    <div id="app">
      {{message}}   <!--拿到message裡面的資料-->
    </div>

        <script>
            var vm = new Vue({      /*建立一個Vue物件*/
                el:"#app",          /*繫結元素*/
                data:{message:"hello,Vue"}  /*資料，鍵值對*/
            });
        </script>
</body>




4. 語法

  • V-bind --繫結元素特性
<body>
    <div id="app" v-bind:title="message">
      指標懸停幾秒檢視動態繫結提示資訊！
    </div>

        <script>
            var vm = new Vue({      /*建立一個Vue物件*/
                el:"#app",          /*繫結元素*/
                data:{message:"hello,Vue"}  /*資料，鍵值對*/

            });
        </script>
</body>

v-bind被稱為指令，指令是帶有 v- 的字首，以表示是Vue提供的特殊屬性，這裡的這個指令意思是該節點上面的title屬性與Vue實列的message屬性保持一致

  • v-if
<body>
<div id="app">
    <h1 v-if="ok==='A'">A</h1>
    <h1 v-else-if="ok==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
    <script>
        var mv = new Vue({
            el:"#app",
            data:{ok: 'A'}
        });
    </script>
</body>
  • v-for
<body>
<div id="app">
    <li v-for="(arr,index) in array">
        {{arr.s}}--{{index}}
    </li>
</div>
    <script>
        var mv = new Vue({
            el:"#app",
            data: {
                array:[{s:"a"}, {s:"b"}, {s:"c"}]
            }
        });
    </script>
</body>

index下標是v-for自帶的引數，都是一些基本的流程控制




5. Vue的事件繫結

<body>
    <div id="app">
        <button v-on:click="f">按鈕</button>
    </div>
    <script>
        var mv = new Vue ({
           el:"#app",
           methods:{ /*想定義一個被Vue管理的事件,必須定義在methods這個屬性內,定義方式還是鍵值對*/
               f: function (){alert("hello，word");}
           }
        });
    </script>
</body>

v-on: 是事件繫結，後面一般是要繫結的事件型別和具體事件




6. 資料的雙向繫結

<body>
<div id="app">
    <select v-model="mag">
        <option value="" disabled>--請選擇--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    {{mag}}
</div>
<script>
    var mv = new Vue({
       el:"#app",
       data:{
           mag:""
       }
    });
</script>
</body>

v-model：是資料的雙向繫結，元件裡面的屬性和Vue裡面的屬性繫結到了一起，雙方的屬性是互相影響的，繫結之後會始終以Vue實列裡面的資料作為資料來源，會自動忽略value之類的預設值




7. 什麼是元件
元件是可複用的Vue實列，也就是一組可以重複利用的模板

<body>
<div id="app">
                            <!--繫結String接收遍歷出來的每一個值-->
    <liu v-for="m in msg" v-bind:String="m"></liu>
</div>

<script>
    Vue.component("liu",{   /*元件要通過Vue物件的component建立*/
        props:["String"],   /*接收引數*/
        template:'<li>{{String}}</li>' /*模板*/
    });

    var mv = new Vue({
       el:"#app",
       data:{
           msg:["a","b","c"]
       }
    });
</script>
</body>




8. Axios非同步通訊

<body>
<div id="app">  <!--拿到info裡面的屬性值-->
    <div>{{info.user.name}}</div>
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">點</a>
    <div v-for="l  in info.list ">{{l.name}}</div>
</div>
<script>
    var mv = new Vue({
       el:"#app",

        data(){
           return {
               info:{}
           }
        },
        mounted(){ /*鉤子函式,鏈式程式設計,ES6新特性*/
            axios.get("../data.json").then( response => (this.info = response.data) );
        }
    });
</script>
</body>




9. 什麼是計算屬性
這是能將計算結果快取起來的屬性，可以想象為快取

<body>
<div id="app">
    <p>{{tiem()}}</p>
    <p>{{tiem1}}</p>
</div>

<script>
    var mv = new Vue({
        el:"#app",
        data:{ msg:"A" },
        methods:{
            tiem:function (){return Date.now()}
        },
        computed:{ /*計算屬性,methods和computed裡面的方法不建議重名*/
          tiem1:function () { this.mag; return Date.now() }
        }
    });
</script>
</body>

在呼叫方法時，每次都需要計算，必定產生系統開銷，如果這個結果不是經常需要變化的，就可以用計算屬性快取起來，以節約我們的系統開銷，如果方法裡面的值發生變化，則快取就會重新重新整理。




10. 插槽
在Vue中可以使用元素作為承載分發內容的出口，可以應用在組合元件場景中

<body>

<div id="app">
    <doto>          <!--通過slot進行插槽繫結，bind拿到mv裡面的屬性值-->
        <doto-title slot="doto-title" v-bind:title="name"></doto-title>
        <doto-items slot="doto-items" v-for="time in todoitems" v-bind:title="time" ></doto-items>
    </doto>
</div>

<script>
    Vue.component("doto",{
        template: ' <div>\n' +
            '        <slot name="doto-title" ></slot>\n' + /*定義插槽模板通過name屬性繫結*/
            '        <ul>\n' +
            '            <slot name="doto-items"></slot>\n' +
            '        </ul>\n' +
            '    </div>'
    });

    Vue.component("doto-title", {
        props:["title"],
        template: '<li>{{title}}</li>'
    });

    Vue.component("doto-items",{
        props:["title"],
        template: '<li>{{title}}</li>',
    });

    var mv = new Vue({
        el:"#app",
        data:{
            name:"劉",
            todoitems:[1,2,3]
        },
    });
</script>

</body>

如果這節有疑問建議先看了解什麼是元件




11. 自定義事件
假如上面的程式碼需要刪除mv例項中的資料呢？此時就涉及到引數的傳遞和事件分發，Vue為我們提供很好的自定義事件用來解決這個問題，使用this.$emit("自定義事件名",引數)，如圖下：

<body>
<div id="app">
    <doto>
        <doto-title slot="doto-title" v-bind:title="name"></doto-title>
        <doto-items slot="doto-items" v-for="(time,index) in todoitems"
                    v-bind:title="time" v-bind:index="index"  v-on:diya="remove(index)" >
                                                            <!--自定義一個事件繫結mv裡面的函式-->
        </doto-items>
    </doto>
</div>

<script>
    Vue.component("doto",{
       template: ' <div>\n' +
           '        <slot name="doto-title" ></slot>\n' +
           '        <ul>\n' +
           '            <slot name="doto-items"></slot>\n' +
           '        </ul>\n' +
           '    </div>'
    });

    Vue.component("doto-title", {
        props:["title"],
        template: '<li>{{title}}</li>'
    });

    Vue.component("doto-items",{
        props:["title","index"],                        /*只能繫結該元件中的函式*/
        template: '<li>{{title}}--------{{index}}<button @click="diy">刪除</button></li>',
        methods:{
           diy:function (index){
                this.$emit("diya",index); /*呼叫自定義事件,傳遞引數*/
               /* mv.remove(index);*/ /*也可以直接呼叫mv裡面的函式傳參這是簡便方式*/
           }
        }
    });

    var mv = new Vue({
       el:"#app",
       data:{
           name:"劉",
           todoitems:[1,2,3]
       },
       methods:{
           remove:function (index){
               this.todoitems.splice(index,1); /*刪除一個元素*/
           }
       }

    });
</script>
</body>




12. 第一個Vue-cli

  • 安裝node.js
    中文網：http://nodejs.cn/
    測試安裝成功：
    node -v，打印出對應版本號即可
    npm -v，打印出對應版本號即可
    如圖下：

  • 安裝淘寶加速器
    命令列輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org，等待安裝

  • 安裝Vue-cli手腳架
    命令列輸入：cnpm install -g vue-cli，等待安裝

命令列輸入：vue-list，如圖下：

安裝成功，建議所有命令用管理員身份執行

  • 建立專案
    可以在指定的檔案路徑下使用：vue init webpack my-project（自定義專案名稱）命令來建立一個vue-cli專案這裡有一些配置預設回車即可，進入建立的專案路徑用命令列輸入：cnpm install安裝依賴，安裝完成之後，測試環境是否搭建成功在當前專案路徑啟動命令列輸入：npm run dev來執行專案，使用瀏覽器訪問：http://localhost:8080

13. webpack
命令列輸入：
cnpm install webpack -g
cnpm install webpack-cli -g，等待安裝
測試安裝成功，命令列輸入：
webpack -v
webpack-cli -v，列印對應版本號，如圖下：

  • 建立webpack.config.js檔案，並配置
/*檔名*/
module.exports = {
    entry:"./module/main.js",   /*入口*/
    output:{
        filename:"./js/bundle.js"   /*打包檔案存放路徑*/
    }
}

配置之後可以使用webpack命令進行打包，會在同級目錄生成一個js資料夾裡面會生成一個bundle.js檔案




14. vue-router路由選擇
在當前專案使用命令：cnpm install vue-router --save-dev 安裝外掛

  • 配置檔案
import Vue from 'vue'
import VueRouter from 'vue-router' /*匯入路由外掛*/

import components from "../components/components";
import Main from "../components/Main";

Vue.use(VueRouter)  /*安裝路由*/

/*配置匯出路由*/
export default new VueRouter({
  routes:[
    {
      path:'/components', /*跳轉路徑*/
      name:'content',
      component:components  /*跳轉元件*/
    },
    {
      path:'/Main',
      name:'content',
      component:Main
    }
  ]
});
  • 引入資源
import Vue from 'vue'
import App from './App'
import router from './router/inde'/*匯入路由*/

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router, /*配置路由*/
  components: { App },
  template: '<App/>'
})
  • 開始使用
<template>
  <div id="app">
    <router-link to="/Main">首頁</router-link>  <!--請求指定路徑-->
    <router-link to="/components">內容</router-link>
    <router-view></router-view> <!--展示模板，資料-->
  </div>
</template>

相關推薦

Vue快速入門

Vue官網地址：https://cn.vuejs.org/ 中文網：https://doc.vue-js.com/ js：https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js

vue 快速入門 系列 —— vue loader 擴充套件

其他章節請看： vue 快速入門 系列 vue loader 擴充套件 在vue loader一文中，我們學會了從零搭建一個簡單的，用於單檔案元件開發的腳手架。本篇將在此基礎上繼續引入一些常用的庫：vue-router、vuex、axios、moc

Vue快速入門（其二）

axios： axios+Vue： 案例：天知道 簡陋無樣式的自己的程式碼如下： <!DOCTYPE html>

Vue快速入門（一）

目錄 Vue快速入門（一） 介紹 Vue.js 是什麼 M-V-VM思想 安裝 CDN引入 下載到本地 快速使用雙向資料繫結測試

Vue.js——元件快速入門（下篇）

概述 上一篇我們重點介紹了元件的建立、註冊和使用，熟練這幾個步驟將有助於深入元件的開發。

Vue.js——60分鐘browserify專案模板快速入門

概述 在之前的一系列vue.js文章，我們都是用傳統模式引用vue.js以及其他的js檔案的，這在開發時會產生一些問題。

Vue.js——webpack專案模板快速入門

概述 rowserify是一個 CommonJS風格的模組管理和打包工具，上一篇我們簡單地介紹了Vue.js官方基於browserify構築的一套開發模板。

Vue.js快速入門

VueJS介紹 概述 Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的前端框架。Vue 的核心庫只關注檢視層

Vue-vue基礎快速入門

技術標籤：vuevue 1.認識vue Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的漸進式框架。

react如何快速入門？vue開發者看過來

技術標籤：經驗總結 前言： 本文皆在以最短的時間帶vue開發者對react有個大致的瞭解。

Vue + OpenLayers 快速入門學習教程

Openlayers 是一個模組化、高效能並且功能豐富的WebGIS客戶端的包，用於顯示地圖及空間資料，並與之進行互動，具有靈活的擴充套件機制。

vue + electron 快速入門

什麼是 Electron？ Electron官網只有一句簡單的話：使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程式。簡單點講，就是有了Electron，我們就可以用前端技術來寫web頁面，它可以轉化為一個桌面應用。除此之前，

VUE 2.0 快速入門

準備工作 安裝Node.js 安裝 CNPM 或將NPM源更換為國內映象源（可省略） 使用NPM或CNPM安裝vue/cli

SwiftUI快速入門

SwiftUI 是一種非常簡單的創新方法，可以利用 Swift 的強大能力在所有蘋果裝置平臺上構建使用者介面。通過 SwiftUI，開發者僅使用一組工具和 API 就能為所有蘋果裝置構建使用者介面。SwiftUI 使用易於閱讀和編寫的

快速入門開發實現訂單類圖片識別結果抽象解析

一、背景 面對訂單資料紙質檔案或圖片，僅靠人眼識別的話效率很低，需引入機器學習來識別和解析圖片以提高效率。當前市面上已有收費的圖片識別服務，包括阿里、百度等，識別效果較好，但針對訂單類圖片，不僅要關注圖

Mybatis快速入門指南

搭建mybatis的環境 匯入相關jar包 mybatis-3.5.3.jar commons-logging-1.1.1.jar log4j-1.2.16.jar cglib-2.2.2.jar

【SpringBoot-In-Action】一、Spring Boot快速入門

本系列教程根據本人實際學習使用 SpringBoot2.x 過程總結整理而來。 1、Spring Boot 簡介

Swift快速入門指南

一、常量&變數 在Swift中規定:在定義一個識別符號時必須明確說明該識別符號是一個常量還是變數

Spring Boot WebFlux 快速入門實踐

02：WebFlux 快速入門實踐 Spring Boot 2.0 spring.io 官網有句醒目的話是： BUILD ANYTHING WITH SPRING BOOT複製程式碼

快速入門 Java 後端開發的正確姿勢

這篇文章本是我的收費專欄裡的一篇文章，發現有很多人會付費閱讀這篇文章，因此決定將其免費分享出來，希望可以將其擴散幫到更多想快速入門Java的開發人員。