Vue組件信息傳遞和Vue項目開發

時間  2019-11-20
標籤 vue 組件 信息 傳遞 項目 開發 简体版
原文   原文鏈接

一.全局組件vue

<body>
    <!-- 兩個全局vue實例能夠不用註冊全局組件,就能夠使用 -->
    <div id="app">
        <global-tag></global-tag>
    </div>
    <div id="main">
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 建立全局組件 組件名 {}
    Vue.component('global-tag', {
        template: "<div @click='fn'>全局組件點擊了 {{ count }} 次</div>",
        data: function () {
            return {
                count: 0
            }
        },
        methods: {
            fn: function () {
                this.count++;
            }
        }
    });
    // 兩個掛載點
    new Vue({
        el: "#app",
    });
    new Vue({
        el: "#main",
    });
</script>

二.父組件傳遞信息給子組件node

'''
採用屬性綁定的方式
1,父級提供數據
2.綁定給子組件的自定義屬性
3.子組件經過props的數組拿到自定義屬性從而拿到數據
'''ios

<body>
    <div id="app">
        <input type="text" v-model="sup_data">
        <!-- 2 -->
        <global-tag :abcde="sup_msg" :sup_data="sup_data"></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 建立全局組件
    Vue.component('global-tag', {
        // 3
        props: ['abcde', 'sup_data'],
        template: "<div @click='fn'>{{ abcde }}</div>",
           methods: {
            fn: function () {
                alert(this.sup_data)
            }
        }
    });
    // 將父組件的信息傳遞給子組件
    // 採用屬性綁定的方式: 1,父級提供數據 2.綁定給子組件的自定義屬性 3.子組件經過props的數組拿到自定義屬性從而拿到數據
    new Vue({
        el: "#app",
        data: {
            // 1
            sup_msg: "父級的msg",
            sup_data: ""
        }
    });
</script>

三.子組件傳遞信息給父組件ajax

'''
採用發生事件的方式:
1.在子組件的內容系統事件中來定義一個自定義事件,採用$emit發生到自定義組件名上(能夠攜帶子組件內容數據)
2.在父組件複用子組件時, 實現子組件自定義數據的功能, 在父組件中的methods中爲功能綁定函數(函數的參數就是攜帶出來的數據)
3.當在組件內部激活系統事件,就會激活自定義事件,$emit發生給父級,激活父級綁定的函數,該函數被執行,同時拿到數據
'''vue-router

<body>
    <div id="app">
        <!-- abc爲子組件的自定義事件,該事件的含義要在子組件內容聲明規定 -->
        <!-- 2 -->
        <global-tag @abc="action"></global-tag>
        <global-tag @abc="action"></global-tag>
        {{ sup_info }}
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    // 建立全局組件
    Vue.component('global-tag', {
        template: "<div><input v-model='info'><p @click='sendMsg'>子組件</p></div>",
        data: function () {
            return {
                info: "",
                msg: "子組件的信息"
            }
        },
        methods: {
            // 1
            sendMsg: function () {
//                alert(123)
                // 激活自定義事件 abc
                this.$emit('abc', this.msg, this.info)
            },

        }
    });
    // 將子組件的信息傳遞給父組件
    // 採用發生事件的方式:
    // 1.在子組件的內容系統事件中來定義一個自定義事件,採用$emit發生到自定義組件名上(能夠攜帶子組件內容數據)
    // 2.在父組件複用子組件時, 實現子組件自定義數據的功能, 在父組件中的methods中爲功能綁定函數(函數的參數就是攜帶出來的數據)
    // 3.當在組件內部激活系統事件,就會激活自定義事件,$emit發生給父級,激活父級綁定的函數,該函數被執行,同時拿到數據
    new Vue({
        el: "#app",
        data: {
            sup_info: ""
        },
        methods: {
            // 3
            action: function (msg, info) {
                alert(msg)
                this.sup_info = info
            }
        }
    });
</script>

四.Vue項目開發vuex

'''
一個.vue文件就是一個組件
一個個小組件(存放在conponents文件夾下)組成一個能夠表明頁面的大組件(存放在views文件夾下)
每個組件(.vue文件)都由 <template><template> <script></script> <style></style>npm

要打開一個已有的項目並運行,不須要項目的node_modules文件夾,今日項目目錄執行npm install會自動安裝項目的依賴包
'''flask

#### 一、環境搭建

- 安裝node

```
官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/
```

- 安裝cnpm

```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

- 安裝腳手架

```
cnpm install -g @vue/cli
```

- 清空緩存處理

```
npm cache clean --force
```

2axios

#### 二、項目的建立

- 建立項目

```js
vue creat 項目名
// 要提早進入目標目錄(項目應該建立在哪一個目錄下)
// 選擇自定義方式建立項目，選取Router, Vuex插件
```

- 啓動/中止項目

```js
npm run serve / ctrl+c
// 要提早進入項目根目錄
```

- 打包項目

```js
npm run build
// 要在項目根目錄下進行打包操做
```

3認識項目數組

(1)項目目錄

dist: 打包的項目目錄(打包後會生成)
node_modules: 項目依賴
public: 共用資源
src: 項目目標,書寫代碼的地方
    -- assets:資源
    -- components:組件
    -- views:視圖組件
    -- App.vue:根組件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 狀態庫文件
vue.config.js: 項目配置文件(沒有能夠本身新建)

(2)配置文件：vue.config.js

module.exports={
    devServer: {
        port: 8888
    }
}
// 修改端口,選作

 

(3)main.js

new Vue({
    el: "#app",
    router: router,
    store: store,
    render: function (h) {
        return h(App)
    }
})

(4)vue文件

<template>
    <!-- 模板區域 -->
</template>
<script>
    // 邏輯代碼區域
    // 該語法和script綁定出現
    export default {
        
    }
</script>
<style scoped>
    /* 樣式區域 */
    /* scoped表示這裏的樣式只適用於組件內部, scoped與style綁定出現 */
</style>

4.項目功能

(1)vue-router

{
    path: '/',
    name: 'home',
    // 路由的重定向
    redirect: '/home'
}

{
    // 一級路由, 在根組件中被渲染, 替換根組件的<router-view/>標籤
    path: '/one-view',
    name: 'one',
    component: () => import('./views/OneView.vue')
}

{
    // 多級路由, 在根組件中被渲染, 替換根組件的<router-view/>標籤
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),
    // 子路由, 在所屬路由指向的組件中被渲染, 替換該組件(OneDetail)的<router-view/>標籤
    children: [{
        path: 'show',
        component: () => import('./components/OneShow.vue')
    }]
}
<!-- router-link渲染爲a標籤 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'one'}">One</router-link> |

<!-- 爲路由渲染的組件佔位 -->
<router-view />
a.router-link-exact-active {    color: #42b983;}
// router的邏輯轉跳
this.$router.push('/one-view')
// router採用history方式訪問上一級
this.$router.go(-1)

(2)vuex

// 在任何一個組件中,都可以經過this.$store.state.msg訪問msg的數據
// state永遠只能擁有一種狀態值
state: {
    msg: "狀態管理器"
},
// 讓state擁有多個狀態值
mutations: {
    // 在一個一個組件中,都可以經過this.$store.commit('setMsg', new_msg)來修改state中的msg
    setMsg(state, new_msg) {
        state.msg = new_msg
    }
},
// 讓mutations擁有多個狀態值
actions: {

}

(2)vue-cookie

// 安裝cookie的命令
// npm install vue-cookie --save
// 爲項目配置全局vue-cookie
import VueCookie from 'vue-cookie'
// 將插件設置給Vue原型,做爲全局的屬性,在任何地方均可以經過this.$cookie進行訪問
Vue.prototype.$cookie = VueCookie
// 持久化存儲val的值到cookie中
this.$cookie.set('val', this.val)
// 獲取cookie中val字段值
this.$cookie.get('val')

(2)axios

// 安裝 axios(ajax)的命令
// npm install axios--save
// 爲項目配置全局axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios
let _this = this
this.$ajax({
    method: 'post',
    url: 'http://127.0.0.1:5000/loginAction',
    params: {
        usr: this.usr,
        ps: this.ps
    }
}).then(function(res) {
    // this表明的是回調then這個方法的調用者(axios插件),也就是發生了this的重指向
    // 要更新頁面的title變量,title屬於vue實例
    // res爲回調的對象,該對象的data屬性就是後臺返回的數據
    _this.title = res.data
}).catch(function(err) {
    window.console.log(err)
})
# 用pycharm啓動該文件模擬後臺
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/')
def index():
    return "<h1>主頁</h1>"

@app.route('/loginAction', methods=['GET', 'POST'])
def test_action():
    # print(request.args)
    # print(request.form)
    # print(request.values)
    usr = request.args['usr']
    ps = request.args['ps']
    if usr != 'abc' or ps != '123':
        return 'login failed'
    return 'login success'


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