概述前端三要素 HTML（結構) ：超文本標記語言（Hyper Text Markup Language) ，決定網頁的結構和內容 CSS（表現) ：層疊樣式表（Cascading Style sheets) ，設定網頁的表現樣式 JavaScript （行為) ：是一種弱類型腳本語言，其源代碼不 ...

概述

前端三要素

HTML（結構) ：超文本標記語言（Hyper Text Markup Language) ，決定網頁的結構和內容
CSS（表現) ：層疊樣式表（Cascading Style sheets) ，設定網頁的表現樣式
JavaScript （行為) ：是一種弱類型腳本語言，其源代碼不需經過編譯，而是由瀏覽器解釋運行，用於控制網頁的行為

JavaScript框架

jQuery：大家熟知的JavaScript框架，優點是簡化了DOM操作，缺點是DOM操作太頻繁，影響前端性能；在前端眼裡使用它僅僅是為了相容IE6、7、8;

Angular：Google收購的前端框架，由一群Java程式員開發，其特點是將後臺的MVC模式搬到了前端並增加了模塊化開發的理念，與微軟合作，採用TypeScript語法開發；對後臺程式員友好，對前端程式員不太友好；最大的缺點是版本迭代不合理（如: 1代-> 2代，除了名字，基本就是兩個東西；截止發表博客時已推出了Angular6）

React：Facebook出品，一款高性能的JS前端框架；特點是提出了新概念【虛擬DOM】用於減少真實DOM操作，在記憶體中模擬DOM操作，有效的提升了前端渲染效率；缺點是使用複雜，因為需要額外學習一門【JSX】語言;

Vue：一款漸進式JavaScript框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發、路由、狀態管理等新特性。其特點是綜合了Angular（模塊化）和React（虛擬DOM）的優點；

Axios：前端通信框架；因為Vue 的邊界很明確，就是為了處理DOM，所以並不具備通信能力，此時就需要額外使用一個通信框架與伺服器交互；當然也可以直接選擇使用jQuery提供的AJAX通信功能；

前端三大框架：Angular、React、Vue

UI框架

Ant-Design：阿裡巴巴出品，基於React的UI框架
ElementUl，iview， ice：餓了麽出品，基於Vue的UI框架
Bootstrap：Twitter推出的一個用於前端開發的開源工具包
AmazeUl：又叫"妹子U1" ,一款HTML5跨屏前端框架

Vue.js

iView
iview是一個強大的基於Vue的UI庫，有很多實用的基礎組件比elementui的組件更豐富，主要服務於PC界面的中後臺產品。使用單文件的Vue組件化開發模式基於npm + webpack +babel開發，支持ES2015高質量、功能豐富友好的API ，自由靈活地使用空間。

ElementUI
Element是餓了麽前端開源維護的Vue UI組件庫，組件齊全，基本涵蓋後臺所需的所有組件，文檔講解詳細，例子也很豐富。主要用於開發PC端的頁面，是一個質量比較高的Vue UI組件庫。

瞭解前後分離的演變史

MVC時代

為了降低開發的複雜度，以後端為出發點，比如：Struts、Spring MVC等框架的使用，就是後端的MVC時代；
以SpringMVC流程為例。

發起請求到前端控制器(Dispatcher Servlet)
前端控制器請求HandlerMapping查找Handler，可以根據xml配置、註解進行查找
處理器映射器HandlerMapping向前端控制器返回Handler
前端控制器調用處理器適配器去執行Handler
處理器適配器去執行Handler
Handler執行完成給適配器返回ModelAndView
處理器適配器向前端控制器返回ModelAndView，ModelAndView是SpringMvc框架的一個底層對象，包括Model和View
前端控制器請求視圖解析器去進行視圖解析，根據邏輯視圖名解析成真正的視圖(JSP)
視圖解析器向前端控制器返回View
前端控制器進行視圖渲染，視圖渲染將模型數據(在ModelAndView對象中)填充到request域
前端控制器向用戶響應結果

基於AJAX帶來的SPA時代

時間回到2005年A OAX(Asynchronous JavaScript And XML，非同步JavaScript和XML，老技術新用法)被正式提出並開始使用CDN作為靜態資源存儲，於是出現了JavaScript王者歸來(在這之前JS都是用來在網頁上貼狗皮膏藥廣告的) 的SPA(Single Page Application) 單頁面應用時代。

前端為主的MV*時代

MVC(同步通信為主) ：Model、View、Controller
MVP(非同步通信為主) ：Model、View、Presenter
MVVM(非同步通信為主)：Model、View、View Model為了降低前端開發複雜度，涌現了大量的前端框架，比如：Angular JS、React、Vue.js、Ember JS等，這些框架總的原則是先按類型分層，比如Templates、Controllers、Models，然後再在層內做切分，如下圖：

第一個Vue程式

什麼是MVVM

MVVM源自於經典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel層，負責轉換Model中的數據對象來讓數據變得更容易管理和使用。

該層向上與視圖層進行雙向數據綁定
向下與Model層通過介面請求進行數據交互

為什麼要使用MVVM

低耦合：視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可復用：你可以把一些視圖邏輯放在一個ViewModel裡面，讓很多View重用這段視圖邏輯。
獨立開發：開發人員可以專註於業務邏輯和數據的開發（ViewMode），設計人員可以專註於頁面設計。
可測試：界面素來是比較難以測試的，而現在測試可以針對ViewModel來寫。

View

View是視圖層，也就是用戶界面。前端主要由HTH L和csS來構建，為了更方便地展現vi eu to del或者Hodel層的數據，已經產生了各種各樣的前後端模板語言，比如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來構建用戶界面的內置模板語言。

Model

Model是指數據模型，泛指後端進行的各種業務邏輯處理和數據操控，主要圍繞資料庫系統展開。這裡的難點主要在於需要和前端約定統一的介面規則

ViewModel

ViewModel是由前端開發人員組織生成和維護的視圖數據層。在這一層，前端開發者對從後端獲取的Model數據進行轉換處理，做二次封裝，以生成符合View層使用預期的視圖數據模型。
需要註意的是View Model所封裝出來的數據模型包括視圖的狀態和行為兩部分，而Model層的數據模型是只包含狀態的

比如頁面的這一塊展示什麼，那一塊展示什麼這些都屬於視圖狀態(展示)
頁面載入進來時發生什麼，點擊這一塊發生什麼，這一塊滾動時發生什麼這些都屬於視圖行為(交互)
視圖狀態和行為都封裝在了View Model里。這樣的封裝使得View Model可以完整地去描述View層。由於實現了雙向綁定， View Model的內容會實時展現在View層，這是激動人心的，因為前端開發者再也不必低效又麻煩地通過操縱DOM去更新視圖。
MVVM框架已經把最臟最累的一塊做好了，我們開發者只需要處理和維護View Model，更新數據視圖就會自動得到相應更新，真正實現事件驅動編程。
View層展現的不是Model層的數據，而是ViewModel的數據，由ViewModel負責與Model層交互，這就完全解耦了View層和Model層，這個解耦是至關重要的，它是前後端分離方案實施的重要一環。

Vue

Vue(讀音/vju/，類似於view) 是一套用於構建用戶界面的漸進式框架，發佈於2014年2月。與其它大型框架不同的是， Vue被設計為可以自底向上逐層應用。Vue的核心庫只關註視圖層，不僅易於上手，還便於與第三方庫(如：vue-router，vue-resource，vue x) 或既有項目整合。

MVVM模式的實現者

Model：模型層，在這裡表示JavaScript對象
View：視圖層，在這裡表示DOM(HTML操作的元素)
ViewModel：連接視圖和數據的中間件， Vue.js就是MVVM中的View Model層的實現者
在MVVM架構中，是不允許數據和視圖直接通信的，只能通過ViewModel來通信，而View Model就是定義了一個Observer觀察者

ViewModel能夠觀察到數據的變化，並對視圖對應的內容進行更新
ViewModel能夠監聽到視圖的變化，並能夠通知數據發生改變
至此，我們就明白了， Vue.js就是一個MV VM的實現者，他的核心就是實現了DOM監聽與數據綁定

為什麼要使用Vue.js

輕量級，體積小是一個重要指標。Vue.js壓縮後有隻有20多kb(Angular壓縮後56kb+，React壓縮後44kb+)
移動優先。更適合移動端，比如移動端的Touch事件
易上手，學習曲線平穩，文檔齊全
吸取了Angular(模塊化) 和React(虛擬DOＭ) 的長處，並擁有自己獨特的功能，如：計算屬性
開源，社區活躍度高

第一個Vue程式

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

        <div id="app">{{message}}</div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:"Hello World"}});
    </script>   
</HTML>

基礎語法指令

v-bind

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind</title>
    </head>
    <body>
        <div id="app">
            <span v-bind:title="message">
                過來過來過來！！！！！！！！
            </span>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:'Hello World'+ new Date().toLocaleString()}});
    </script>   
</HTML>

v-if,v-else

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if##v-else</title>
    </head>
    <body>
        <div id="app">
            <h1 v-if="ok">Yes</h1>
            <h2 v-else>No</h2>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{ok:true}});
    </script>   
</HTML>

v-for

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
    </head>
    <body>
        <div id="app">
           <li v-for="(item,index) in items">
                {{item.message}}----{{index}}
           </li>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{items:[{message:'白日依山盡'},{message:'黃河入海流'},{message:'欲窮千里目'},{message:'更上一層樓'}]}});
    </script>   
</HTML>

v-on

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-on</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="hello">按鈕</button>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:'hello world'},methods:{hello:function(event){alert(this.message)}}});
    </script>   
</HTML>

v-model

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app">
            請輸入的文本: <input type="text" v-model="message" value="hello"/>{{message}}
        </div>
        <div id="app1">
            多行文本： <textarea v-model="message"></textarea>  {{message}}
        </div>
        <div id="app2">
            單覆選框：
            <input type="checkbox" id="checkbox" v-model="checked"/>
            <label for="checkbox">{{checked}}</label>
        </div>
        <div id="app3">
            多覆選框：
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="jack">Jack</label>
            <input type="checkbox" id="join" value="Join" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="join">Join</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="mike">Mike</label>
            <span>選中的值：{{checkedNames}}</span>
        </div>
        <div id="app4">
            單選框按鈕
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <span>選中的值：{{picked}}</span>
        </div>
        <div id="app5">
                下拉框:
                <select v-model="pan">
                    <option value="" disabled>---請選擇---</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                    <option>D</option>
                </select>
                <span>value:{{pan}}</span>
            </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:""}});
        new Vue({el:'#app1',data:{message:"白日依山盡，黃河入海流。欲窮千里目，更上一層樓。"}});
        new Vue({el:'#app2',data:{checked:true}})
        new Vue({el:'#app3',data:{checkedNames:[]}})
        new Vue({el:'#app4',data:{picked:'Two'}})
        new Vue({el:'#app5',data:{pan:''}})
    </script>   
</HTML>

component

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>component</title>
    </head>
    <body>

        <!-- <div id="app">
            <pan></pan>
        </div> -->
        <div id="app1">
            <pan v-for="item in items" v-bind:panh="item"></pan>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        Vue.component("pan",{props:["panh"],template:'<li>{{panh}}</li>'});
        // new Vue({el:"#app"});
        new Vue({el:"#app1",data:{items:["java","c++","c#","go"]}})
    </script>   
</HTML>

axios

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>axios</title>
    </head>
    <body>

    <style>
        /* 解決閃爍問題 */
        /* [v-cloak]{
            display: none;
        } */
    </style>
    <div id="app">
        <div>姓名: {{info.name}}</div>
        <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
        <div>連接：<a v-bind:href="info.url" target="_bank">{{info.url}}</a></div>
    </div>
    </body>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript"> 
     new Vue({el:"#app",data(){return{info:{name:null,address:{country:null,city:null,street:null},url:null}}},mounted(){axios.get('http://172.30.3.216:3000/mock/465/get').then(response=>(this.info=response.data))}});
    </script>   

</HTML>

{
    "name": "狂神說Java",
    "url": "https://blog.kuangstudy.com",
    "page": 1,
    "isNonProfit": true,
    "address": {
      "street": "含光門",
      "city": "陝西西安",
      "country": "中國"
    },
    "links": [
      {
        "name": "bilibili",
        "url": "https://space.bilibili.com/95256449"
      },
      {
        "name": "狂神說Java",
        "url": "https://blog.kuangstudy.com"
      },
      {
        "name": "百度",
        "url": "https://www.baidu.com/"
      }
    ]
  }

computed

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>computed</title>
    </head>
    <body>    
    <div id="app">
        <div>time:{{time()}}</div>
        <div>time1:{{time1}}</div>
    </div>
    </body>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript"> 
     var vm = new Vue({el:"#app",data:{message:'11'},mounted(){},methods:{time:function(){return Date.now()}},computed:{time1:function(){ this.message; return Date.now();}}});
    </script>   

</HTML>

slot

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>slot</title>
    </head>
    <body>
        <div id="app">
            <todo>
                <todo-title slot="todo-title" :title="title"></todo-title>
                <todo-input slot="todo-input"   v-on:add="add_method"></todo-input>
                <todo-items slot="todo-items"  v-for="(item,index) in todoitems" :item="item" :index="index" v-on:remove="remove_method(index)" :key="index"></todo-items>
            </todo>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">


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

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

		//仿寫插入
        Vue.component('todo-input',{
            template:'<div><form>\
            請輸入: <input type="text" v-model="arr" value="請輸入"><br>\
            <button type="button"@click="add_component">提交</button>\
             </div>',
             props:["arr"],
             methods:{
                   add_component:function(){this.$emit('add',this.arr);}}
             })
        Vue.component('todo-items',{
            props:["item","index"],
            template:"<li>{{index+1}},{{item}} <button @click='remove_component'>刪除</button></li>",
            methods:{remove_component:function(index){this.$emit('remove',index);}}
        })


        var vue = new Vue({
            el:"#app",
            data:{title:"登鸛雀樓",todoitems:['白日依山盡,','黃河入海流.','欲窮千里目,','更上一層樓.'],arr:''},
            methods:{
                remove_method:function(index){
                    console.log("刪除了"+this.todoitems[index]+"OK");
                    this.todoitems.splice(index,1);
                },
                add_method:function(arr){
                    console.log("添加元素"+arr);
                    this.todoitems.splice(this.todoitems.size,0,arr);
                }
            }
        
        })
    </script>   
</HTML>

Webpack

npm install webpack

vue-router

npm install vue-router --save-dev

項目

創建項目

vue init webpack hello-vue
#進入工程目錄
cd hello-vue
#安裝vue-routern 
npm install vue-router --save-dev
#安裝element-ui
npm i element-ui -S
#安裝依賴
npm install
# 安裝SASS載入器
cnpm install sass-loader node-sass --save-dev
#啟功測試
npm run dev

sass-loader node-sass 老是安裝失敗，後來發現和node版本有關係, 解決辦法：

PS C:\代碼\vue> node -v
v14.17.1

安裝版本為：
"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",

目錄結構

assets：用於存放資源文件
components：用於存放Vue功能組件
views：用於存放Vue視圖組件
router：用於存放vue-router配置

代碼

views/user/User.vue

<template>
  <div>
    <h1>個人信息</h1>
    {{$route.params.id}}
  </div>
</template>
<script>
  export default {
    name: "User",
     beforeRouteEnter: (to, from, next) => {
      console.log("準備進入個人信息頁");
     next(vm => {
        //進入路由之前執行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("準備離開個人信息頁");
      next();
    },
    methods:{
        getData: function(){
             this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/user.json'
        }).then(function (response) {
          console.log(response)
        })
        }
    }
  }
</script>
<style scoped>
</style>

views/user/UserList.vue

<template>
    <div>
  <h1>用戶列表</h1>
  {{id}}
  </div>
</template>
<script>
  export default {
    name: "UserList",
      props: ['id']
  }
</script>
<style scoped>
</style>

views/Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">歡迎登錄</h3>
      <el-form-item label="賬號" prop="username">
        <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="溫馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>請輸入賬號和密碼</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">確定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            form:{
              username:'',
              password:''
            },
            //表單驗證，需要在 el-form-item 元素中增加prop屬性
            rules:{
              username:[
                {required:true,message:"賬號不可為空",trigger:"blur"}
              ],
              password:[
                {required:true,message:"密碼不可為空",tigger:"blur"}
              ]
            },

            //對話框顯示和隱藏
            dialogVisible:false
          }
      },
      methods:{
          onSubmit(formName){
            //為表單綁定驗證功能
            this.$refs[formName].validate((valid)=>{
              if(valid){
                //使用vue-router路由到指定界面，該方式稱為編程式導航
                this.$router.push('/main');
              }else{
                this.dialogVisible=true;
                return false;
              }
            });
          }
      }
    }
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

views/Main.vue

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <!-- <router-link to="/user/user">個人信息</router-link> -->
				  <router-link :to="{name:'User',params:{id:1}}">個人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <!-- <router-link to="/user/userlist">用戶列表</router-link> -->
					<router-link :to="{name:'UserList',params:{id:222}}">用戶列表</router-link>
                </el-menu-item>
				<el-menu-item index="1-3">
    				<router-link to="/goHome">回到首頁</router-link>
				</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>內容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分類管理</el-menu-item>
                <el-menu-item index="2-2">內容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>個人信息</el-dropdown-item>
                <el-dropdown-item>退出登錄</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在這裡展示視圖-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

views/NotFound.vue

<template>
    <div>
      <h1>404,你的頁面走丟了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

router/index.js

import Vue from'vue'
//導入路由插件
import Router from 'vue-router'
//導入上面定義的組件
import Main from "../views/Main";
import Login from "../views/Login";

import User from "../views/user/User";
import UserList from "../views/user/UserList";
import NotFound from '../views/NotFound'
//安裝路由
Vue.use(Router) ;
//配置路由
export default new Router({
	//路徑不帶 # 符號
	mode: 'history',
	routes:[
		   {
			//路由路徑
			path:'/main',
			//路由名稱
			name:'main',
			children: [
				{
				//   path: '/user/user/',
				  path: '/user/user/:id',
				  name: 'User',
				  component: User,
				}, {
				  path: '/user/userlist/:id',
				  name: 'UserList',
				  component: UserList,
				  props: true
				},
			  ],
			//跳轉到組件
			component:Main
			},{
			//路由路徑
			path:'/',
			//路由名稱
			name:'login',
			//跳轉到組件
			component:Login
			},{
				path: '/goHome',
				redirect: '/main'
			  },{
				path: '*',
				component: NotFound
			 }
		]
	});

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//導入上面創建的路由配置目錄
import router from './router'//自動掃描裡面的路由配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'



// Vue.config.productionTip = false
Vue.use(router);
Vue.use(ElementUI);
Vue.use(VueAxios, axios);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App)
})

狂神--Vue

概述

前端三要素

JavaScript框架

UI框架

瞭解前後分離的演變史

MVC時代

基於AJAX帶來的SPA時代

前端為主的MV*時代

第一個Vue程式

什麼是MVVM

為什麼要使用MVVM

View

Model

ViewModel

Vue

MVVM模式的實現者

為什麼要使用Vue.js

第一個Vue程式

基礎語法指令

v-bind

v-if,v-else

v-for

v-on

v-model

component

axios

computed

slot

Webpack

vue-router

項目

創建項目

目錄結構

代碼

views/user/User.vue

views/user/UserList.vue

views/Login.vue

views/Main.vue

views/NotFound.vue

router/index.js

main.js