一.全局组件

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

'''

采用属性绑定的方式

1,父级提供数据

2.绑定给子组件的自定义属性

3.子组件通过props的数组拿到自定义属性从而拿到数据

'''

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

'''

采用发生事件的方式:

1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)

2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)

3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据

'''

    
     
        
              
              
              
              {
    { sup_info }}    
     

四.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、项目的创建- 创建项目```jsvue creat 项目名// 要提前进入目标目录(项目应该创建在哪个目录下)// 选择自定义方式创建项目，选取Router, Vuex插件```- 启动/停止项目```jsnpm run serve / ctrl+c// 要提前进入项目根目录```- 打包项目```jsnpm 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文件

4.项目功能

(1)vue-router

{    path: '/',    name: 'home',    // 路由的重定向    redirect: '/home'}{    // 一级路由, 在根组件中被渲染, 替换根组件的
     标签    path: '/one-view',    name: 'one',    component: () => import('./views/OneView.vue')}{    // 多级路由, 在根组件中被渲染, 替换根组件的
     标签    path: '/one-view/one-detail',    component: () => import('./views/OneDetail.vue'),    // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的
     标签    children: [{        path: 'show',        component: () => import('./components/OneShow.vue')    }]}

     
     
      Home
      |
     
      About
      |
     
      One
      |
     
     

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-cookieimport 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// 为项目配置全局axiosimport Axios from 'axios'Vue.prototype.$ajax = Axios

let _this = thisthis.$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_templatefrom flask_cors import CORSapp = Flask(__name__)CORS(app, supports_credentials=True)@app.route('/')def index():    return "
主页
"@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()