vue續集3

時間  2019-11-05
標籤 vue 續集 简体版
原文   原文鏈接

1.axios

1.1安裝

cd C:\Users\Administrator\Desktop\myvue
npm init --yes
npm install axios -S

vue續集3
vue續集3

1.2axios的get請求與post請求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <script type="text/javascript">
        var App = {
            data(){
                return {
                    msg:''
                }
            },
            template:`
                <div>
                    <button @click = 'sendAjax'>發Get</button>
                    <div v-html = 'msg'></div>
                    <button @click = 'sendAjaxByPost'>發post請求</button>
                </div>
            `,
            methods:{
                sendAjax(){
                    // 發送get請求
                    axios.get('http://127.0.0.1:8800/')
                    .then(res=>{
                        console.log("get----res.data--------------------",res.data);
                        console.log("get----typeof res.data--------------------",typeof res.data);
                        this.msg = res.data;

                    })
                    .catch(err=>{
                        console.log(err);
                    })

                },
                sendAjaxByPost(){
                    var params = new URLSearchParams();
                    params.append('name','vita');
                    axios.post('http://127.0.0.1:8800/create',params).then(function(res) {
                        console.log("post----res--------------------",res);
                    }).catch(err=>{
                        console.log("post----err--------------------",err);
                    })
                }
            }
        }

        new Vue({
            el:"#app",
            data(){
                return {

                }
            },
            components:{
                App
            },
            template:`<App />`
        })

    </script>

</body>
</html>

vue續集3

1.3axios的默認配置,this的箭頭指向

// 掛載 Vue.prototype.$axios = axios; 使用插件
        Vue.prototype.$axios = axios;
        // Vue.use(axios); 這個不要記了 刪掉,至關於上面一行
        // 配置公共的url
        axios.defaults.baseURL = 'http://127.0.0.1:8800';

sendAjaxByPost(){
                    // var _this = this;
                    var params = new URLSearchParams();
                    params.append('name','alex');
                    this.$axios.post('/create',params).then( (res)=>{

                        // 解決this的指向問題，在vue中用函數 建議使用箭頭函數
                        //不使用箭頭函數，this是window對象
                        console.log("post--this---------------",this);
                        console.log("post--res---------------",res);
                        // 初學者容易犯的錯
                        // _this.datas = res;
                        this.datas = res;

                    }).catch(err=>{
                        console.log(err);
                    })
                }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>

    <!-- vue和axios都是全局的對象  將來 axios會成爲局部做用域-->
    <script type="text/javascript">

        // 掛載 Vue.prototype.$axios = axios; 使用插件
        Vue.prototype.$axios = axios;
        // Vue.use(axios); 這個不要記了 刪掉,至關於上面一行
        // 配置公共的url
        axios.defaults.baseURL = 'http://127.0.0.1:8800';
        var App = {
            data(){
                return {
                    msg:'',
                    datas:[]
                }
            },
            template:`
                <div>
                    <button @click = 'sendAjax'>發Get</button>
                    <div v-html = 'msg'></div>
                    <button @click = 'sendAjaxByPost'>發post請求</button>
                    {{datas}}
                </div>
            `,
            methods:{
                sendAjax(){
                    // 發送get請求
                    this.$axios.get('/')
                    .then(res=>{
                        console.log(res.data);
                        console.log(typeof res.data);
                        this.msg = res.data;

                    })
                    .catch(err=>{
                        console.log(err);
                    })

                },
                sendAjaxByPost(){
                    // var _this = this;
                    var params = new URLSearchParams();
                    params.append('name','alex');
                    this.$axios.post('/create',params).then( (res)=>{

                        // 解決this的指向問題，在vue中用函數 建議使用箭頭函數
                        //不使用箭頭函數，this是window對象
                        console.log("post--this---------------",this);
                        console.log("post--res---------------",res);
                        // 初學者容易犯的錯
                        // _this.datas = res;
                        this.datas = res;

                    }).catch(err=>{
                        console.log(err);
                    })
                }
            }
        }

        new Vue({
            el:"#app",
            data(){
                return {

                }
            },
            components:{
                App
            },
            template:`<App />`
        })

    </script>

</body>
</html>

vue續集3

2.webpack

2.1webpack介紹

webpack: 對前端中的資源編譯打包、支持模塊化es6的module
前端中也是有模塊的，導入方式是下面這種用法
  ​ import xxx from './index.js'

1.下載webpack爲項目開發依賴
npm install webpack@3.12.0 -D
2.查看
webpack -v

vue續集3

2.2webpack基本使用

App.jsjavascript

// 聲明入口的組件
var App = {
    template:`<div>我是入口組件</div>`
};

// 聲明並導出
export var num = 2; //做爲一整個對象的key拋出

// 聲明在導出
var num2 = 4;
export {num2}

// 拋出一個函數
export function add(x,y) {
    return console.log(x+y);
}
// 先拋出
export default App;

main.jscss

// 整個程序的入口

// 引入第三方的庫  es6Module模塊導入方法
import Vue from './vue.js'

//再導入
// import App from './App.js'

// 對象的解構
// import {num,num2,add} from './App.js'

import * as  object from './App.js'
console.log("object--------------", object);
console.log("object.num--------------", object.num);

// console.log(num);
// console.log(num2);
// add(3,5)

new Vue({
    el:"#app",
    data(){
        return {

        }
    },
    components:{
        App:object.default
    },
    template:`<App />`
});

vue續集3

注意：
進入到你的項目目錄執行命令
每次有修改，須要從新執行上面的命令，使其生效

module.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <!-- bundle.js是經過webpack編譯打包輸出的js文件 -->
    <script type="text/javascript" src="./bundle.js"></script>

    <!-- webpack  ./main.js   ./bundle.js -->

    <!-- 這種語法瀏覽器不兼容 -->
    <!-- <script type="text/javascript">
        import Vue from './vue.js'
    </script>
     -->
</body>
</html>

vue續集3
vue續集3

2.3webpack的深刻使用

上面咱們每次修改js代碼，都要從新手動執行webpack命令
下面配置下，不須要每次手動執行

vue續集3
vue續集3

./webpack.config.js 文件名只能是這個前端

//自帶nodejs環境  cmd規範
// module.exports = {}
// var a = require('./webpack.config.js')
// 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件
module.exports = {
    // 入口
    entry:{
        "main":'./main.js'
    },
    // 出口
    output:{
        filename:'./bundle.js'
    },
    watch:true

}

vue續集3
vue續集3

2.4再次靈活配置

在上面的基礎上，再次修改下配置

vue續集3
vue續集3

2.5多個webpack.config.js

vue續集3
vue續集3
vue續集3

2.6css-loader

vue續集3
vue續集3
vue續集3
vue續集3
vue續集3
vue續集3

2.7webpack插件介紹

vue續集3

// 插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',//參照物
        })
    ]

webpack.prod.config.jsvue

//自帶nodejs環境  cmd規範
// module.exports = {}
// var a = require('./webpack.config.js')

// nodejs中內容模塊
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// html-webpack-plugin
// 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件
module.exports = {
    // 入口
    entry:{
        "main":'./src/main.js'
    },
    // 出口
    output:{
        path:path.resolve('./dist'),//相對轉絕對
        filename:'./bundle.js'
    },
    // 模塊中的loader  loader加載器 它能對css、json png jpg mp3 mp4 es6的js代碼
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'

            }
        ]
    },
    // 插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',//參照物
        })
    ]
}

vue續集3

npm  install -g http-server
  使用：
  Hs -o -p 8888

vue續集3

2.8 webpack-dev-server

npm install webpack-dev-server@2.9.0 -D

vue續集3
vue續集3
vue續集3
vue續集3
vue續集3

2.9vue-loader和單頁組件

npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 -D
npm install vue@2.5.17 -D

vue續集3
vue續集3

App.vuejava

<!--  組件結構 html
     業務邏輯 js
     組件樣式 css
 -->
 <template>
    <!-- 必定是閉合標籤 -->
    <div class="app">

        <h3>{{msg}}</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <Header />
    </div>

 </template>
 <script>
 import Header from './Header.vue'
    export default{
        data(){
            return {
                msg:'學習單頁組件'
            }
        },
        methods:{

        },
        computed:{

        },
        components:{
            Header
        }
    }
 </script>
 <!-- scoped 它表示只對當前組件的樣式起做用 -->
 <style scoped>
 /*全局的*/
 h3{
    color: yellow;
 }

 </style>

Header.vuenode

<template>
    <div>

        <h3>{{att}}</h3>
    </div>
</template>

<script>
export default {

  name: 'Header',

  data() {
    return {
        att:"alex"
    };
  },
};
</script>

<style scoped>
h3{
    color: green;
}

</style>

main.jswebpack

import Vue from './vue.js'

import App from './App.vue'

// 導入css
import './main.css'
new Vue({
    el:'#app',
    data(){
        return {

        }
    },
    components:{
        App
    },
    template:`<App />`
});

vue續集3
vue續集3

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程