文章目錄

3.vue進階

3.1. vue路由

1.vue簡介

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。

關於vue語法學習網站(語法就不在教程體現了):

2.vue入門

這裏演示不使用腳手架vue-cli方式開發，擡高入門門檻，利於學習原理。

2.1 安裝初始環境

安裝最新版webpack，各種loader等

cnpm i -D clean-webpack-plugin css-loader extract-text-webpack-plugin@next file-loader html-loader html-webpack-plugin style-loader vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015

其中 vue-loader vue-template-compiler 是vue相關的
webpack標準配置(webpack.config.js)

//import path from 'path'
path=require("path")
htmlWebpackPlugin=require("html-webpack-plugin")
ExtractTextPlugin=require("extract-text-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin');
Webpack=require("webpack")
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports={
    // devtool: 'cheap-module-source-map',
    devtool: "source-map",
    //執行webpack 默認的主js文件
    entry: {
        main: "./src/main.js",
    },
    output: {
        //__dirname是當前webpack執行命令的目錄
        path: path.join(__dirname,"./dist"),
        //[name]是entry對應文件名稱 chunkhash是文件hash值
        //filename: "[name]-[chunkhash].js",
        filename: "[name].js",
    },
    //默認的loader都在node_modules 額外追加./loader目錄
    resolveLoader: {
        modules: [path.join(__dirname,"./src/loader"),"node_modules"]
    },
    devServer: {
      contentBase:"./dist"
    },
    module: {
        rules: [
            {
            test:/.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader", //use出現了錯誤使用fallback對應的loader
                use: "css-loader"
            })
        },
            {
            test:/(.jpg|.png)$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "[name].[hash].[ext]"
                }
            }

        },{
            test: /\.html$/,
            use: [ "html-loader" ]
        },{
                test: /.vue$/,
                use: [
                    'vue-loader'
                ]
            },{
            test: /.txt$/,
            exclude: /node_modules/,
            use:[ {
                loader:"txt-loader",
                options: {
                    resources: {
                        name: "張三"
                    }
                }}]

            }]
    },
    plugins: [
        new CleanWebpackPlugin({
            root:__dirname
        }),
        new htmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new ExtractTextPlugin("styles.css"),
        new Webpack.EnvironmentPlugin(['PATH']),
        new VueLoaderPlugin()
    ]
}

新版本vue需要搭配VueLoaderPlugin一起使用，.vue文件使用vue-loader處理
配置package.json

  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

2.2 vue helloworld

安裝vue庫

npm i vue vue-router --save

新建src目錄，新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="app">
  </div>
</body>
</html>

其中id=app的div用於渲染生成的vue代碼
新建entry chunk main.js

import Vue from 'vue'
import Hello from './Hello.vue'
new Vue({
    el:'#app',//表示生成的代碼存放在app這個元素中
    render: h => h(Hello) //從哪個控件中生成代碼
})

創建第一個vue類 Hello.vue

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
  export default {
        data:function () {
            return {
                msg:"helloworld"
            }
        }
  }
</script>
<style>

</style>

vue文件語言塊介紹：

<template>
默認語言：html。
每個 .vue 文件最多包含一個 <template> 塊。
內容將被提取爲字符串，將編譯並用作 Vue 組件的 template 選項。
<script>
默認語言：js (在檢測到 babel-loader 或 buble-loader 配置時自動支持ES2015)。
每個 .vue 文件最多包含一個 <script> 塊。
該腳本在類 CommonJS 環境中執行 (就像通過 Webpack 打包的正常 js 模塊)，這意味這你可以 require() 其它依賴。在 ES2015 支持下，你也可以使用 import 和 export 語法。
腳本必須導出 Vue.js 組件對象。
<style>
默認語言：css。
一個 .vue 文件可以包含多個 <style> 標籤。
<style> 標籤可以有 scoped 或者 module 屬性 (查看 CSS 作用域和 CSS Modules) 以幫助你將樣式封裝到當前組件。具有不同封裝模式的多個 <style> 標籤可以在同一個組件中混合使用。
默認情況下，將會使用 style-loader 提取內容，並通過 <style> 標籤動態加入文檔的 <head> 中，也可以配置 Webpack 將所有 styles 提取到單個 CSS 文件中。

運行

npm run dev

久違的helloworld出現了

2.3 比較data和computed和watch

頁面渲染用到的數據

<template>
    <div>
     用戶名<input type="text" v-model="userName"/><br/>
        用戶性別<input type="text" v-model="userSex"/>
        描述1：{{userDesc1}}
        描述:{{userDesc}}
    </div>


</template>
<script>
  export default {
      data(){
          return {
              userName: "",
              userSex: "",
              userDesc1: this.userName + this.userSex
          }
      },
      computed: {
                  userDesc() {
                     return "您的姓名是:"+this.userName+",您的性別:"+this.userSex
                  }
      },
      watch:{
          userName(newValue,oldValue){
              console.log("userName被修改了"+newValue+",舊值:"+oldValue)
          }
      }
  }
</script>
<style>

</style>

computed表示計算屬性，不能在data中預先定義，userDesc定義了一個屬性（其實是函數），只要關聯的username和userSex發生變化userDesc自動發生變化，computed屬性不變化時直接讀取緩存，發生變化更新緩存，可以直接用 {{userDesc}} 訪問當然也可以調用函數 userDesc()。
data表示關聯屬性，userDesc1比如隨着username和userSex改變而改變。
watch用於監控某個屬性是否發生變化，參數1：新值，參數2：舊值。

3.vue進階

3.1. vue路由

3.1.1路由入門

在vue一般一個應用一個統一的vue入口文件，一般命名爲App.vue,所有的代碼從這個文件引入。main.js在new Vue時需指定該應用文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

render: h => h(App)表示使用./App.vue作爲渲染頁面的應用文件
新建App.vue，該頁面編寫首頁邏輯：

<template>
    <div id="app">
        <h1>功能列表</h1>
        <ul>
            <li><a href="#/userList">用戶列表</a></li>
            <li><a href="#/roleList">角色列表</a></li>
        </ul>
        <router-view></router-view>
    </div>
</template>

其中router-view表示當點擊了上面超鏈接時顯示對應鏈接對應控件的內容

接下來需要定義userList和roleList兩個路由。
新建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserList from './UserList.vue'
import Role from './RoleList.vue'
Vue.use(VueRouter)
// 這裏直接默認導出 new 出來的 router 實例
export default new VueRouter({
    routes: [
        {
            path: '/userList',
            component: UserList
        },
        {
            path: '/roleList',
            component: Role
        }
    ]
})

新建UserList.vue

<template>
    <div>
        <table>
            <tr><td>用戶id</td><td>用戶姓名</td></tr>
            <tr v-for="u in userList"><td>{{u.id}}</td><td>{{u.name}}</td></tr>
        </table>
    </div>
</template>
<script>
  export default {
        data:function () {
            return {
                userList:[
                    {id:1,name:"張三"},
                    {id:2,name:"李四"}
                ]
            }
        }
  }
</script>
<style>

</style>

新建RoleList.vue

<template>
    <div>
        <table>
            <tr><td>角色id</td><td>角色姓名</td></tr>
            <tr v-for="r in roleList"><td>{{r.id}}</td><td>{{r.name}}</td></tr>
        </table>
    </div>
</template>
<script>
  export default {
        data:function () {
            return {
                roleList:[
                    {id:1,name:"管理員"},
                    {id:2,name:"DBA"}
                ]
            }
        }
  }
</script>
<style>

</style>

3.1.2子路由

假設在用戶列表頁上有個子頁面當用戶點擊張三時顯示用戶id：1，點擊李四是顯示用戶id：2

修改router.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserList from './UserList.vue'
import Role from './RoleList.vue'
import UserDefail from './UserDefail.vue'
Vue.use(VueRouter)
// 這裏直接默認導出 new 出來的 router 實例
export default new VueRouter({
    routes: [
        {
            path: '/userList',
            component: UserList,
            children:[{
                path: ':id',
                component: UserDetail,
            }]
        },
        {
            path: '/roleList',
            component: Role
        }
    ]
})

新建UserDetail：

<template>
    <font color="red">用戶id:{{this.$route.params.id}}</font>
</template>

UserDetail是屬於UserList子頁面屬於它的一部分說以需要在UserList加上路由標籤

<template>
    <div>
        <table>
            <tr><td>用戶id</td><td>用戶姓名</td></tr>
            <tr v-for="u in userList"><td>{{u.id}}</td><td>{{u.name}}</td></tr>
        </table>
        <router-view></router-view>
    </div>

</template>
<script>
  export default {
        data:function () {
            return {
                userList:[
                    {id:1,name:"張三"},
                    {id:2,name:"李四"}
                ]
            }
        }
  }
</script>
<style>

</style>

3.1.3 路由常用操作

router是VueRouter的一個對象，通過Vue.use(VueRouter)和VueRouter構造函數得到一個router的實例對象，
這個對象中是一個全局的對象，他包含了所有的路由包含了許多關鍵的對象和屬性。
route是一個跳轉的路由對象，每一個路由都會有一個route對象，是一個局部的對象，可以獲取對應的name,path,params,query等
對應值就是當前路徑對應的路由。

控件中獲取當前路由對象

 當前路由路徑:{{this.$route.path}}
 當前路由參數:{{this.$route.params.參數名稱}}

跳轉到指定路由

this.$router.push("/roleList")

其他路由操作參考

vue進階02-vue入門（helloworld和路由應用）

文章目錄

1.vue簡介

2.vue入門

2.1 安裝初始環境

2.2 vue helloworld

2.3 比較data和computed和watch

3.vue進階

3.1. vue路由

3.1.1路由入門

3.1.2子路由

3.1.3 路由常用操作

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

linux下gcc編程10-clion編譯調試nginx

vue進階02-vue入門（helloworld和路由應用）

vue進階03-vue語法學習實戰

tensorflow入門教程02-tensorflow基本概念（數據流圖，張量，tensorboard）

springsecurity05-第三方登錄到微信和支付寶

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結