码迷,mamicode.com
首页 > 其他好文 > 详细

Vue组件信息传递和Vue项目开发

时间:2019-02-18 21:37:42      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:持久化存储   tle   官网   name   入口   class   mode   依赖包   this   

一.全局组件

<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>

二.父组件传递信息给子组件

‘‘‘
采用属性绑定的方式
1,父级提供数据
2.绑定给子组件的自定义属性
3.子组件通过props的数组拿到自定义属性从而拿到数据
‘‘‘

<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>

三.子组件传递信息给父组件

‘‘‘
采用发生事件的方式:
1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
‘‘‘

<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项目开发

‘‘‘
一个.vue文件就是一个组件
一个个小组件(存放在conponents文件夹下)组成一个可以代表页面的大组件(存放在views文件夹下)
每一个组件(.vue文件)都由 <template><template> <script></script> <style></style>

要打开一个已有的项目并运行,不需要项目的node_modules文件夹,今日项目目录执行npm install会自动安装项目的依赖包
‘‘‘

#### 1、环境搭建

- 安装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
```

2

#### 2、项目的创建

- 创建项目

```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()

 

Vue组件信息传递和Vue项目开发

标签:持久化存储   tle   官网   name   入口   class   mode   依赖包   this   

原文地址:https://www.cnblogs.com/ye-hui/p/10398026.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!