Vue急速入门-5

vue-cli创建项目

前端工程化，项目>>>(vue-cli)，创建处vue项目,单页面应用(spa)

vue-cli创建项目开发，在项目中开发，最后上线，一定要编译

			'纯粹的html，js，css'

vue-cli工具由于是nodejs编写的，所以我们需要node安装环境
1.下载node解释器

官网下载对应平台的nodejs解释器，一路下一步

    -安装后会自动添加环境变量：可执行文件路径  就在环境变量

    -下载完成后我们打开cmd，就可以运行node，他的使用和安装模块的命令，类似python的两个命令（这两个命令来自两个可执行文件）：

    	-node：    类似cmd中python命令

        -npm：     类似cmd中的pip命令

nodejs官网:http://nodejs.cn/

vue-cli项目创建

vue版本不同可以使用不同的项目脚手架

2.x 使用vue-cli ：https://cli.vuejs.org/zh/

3.x 使用vue-cli

3.x版本的vue项目还可以使用vite创建，vite 效率非常高，但不支持2.x版本的vue项目

1.安装cnpm工具

我们的nodejs自带的npm工具，npm会从国外的站点下载，速度慢
cnpm是淘宝出的工具，下载的时候，去淘宝镜像下载，速度快，
以后使用cnpm 代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装脚手架(vue-cli)
cnpm install -g @vue/cli

-g表示全局（全局变量）
安装完成后，cmd控制台就可以输入 vue 命令了（类似装了djagno可以使用django-admin创建django项目

如果遇到速度特别慢的情况，可以使用清空缓存处理（如果安装失败，需要执行清除缓存，再重新安装，创建项目时也是一样的流程）
npm cache clean --force

3.使用vue-cli创建项目

在输入命令执行之前需要自行选择创建项目的路径
速度可能会很慢，可以等，也可以ctrl+c停止（停止后如果需要重新创建，需要执行npm cache clean --force）
很慢的原因：
1.因为vue-cli需要很多依赖(下载的东西比较多)
2.需要从github上拉空项目

输入命令:
vue create myfirstvue

如果出现上图情况，y继续即可
执行命令结束会进入到选择界面

上下键进行选择，回车键确定
这里我们选择最后一个选项，前面两个默认选项由于使用了eslint会对代码进行格式化，比如我们如果漏写了分号，会报错，但是运行的时候其实并不影响
如果我们之前选择自定义并且进行了保存，这里也会展示出来的

配置选择

选择vue版本

历史模式选择

选择项目依赖安装位置

是否保存当前配置

输入保存后名称

创建成功如下图所示

博客参考:https://www.cnblogs.com/zhihuanzzh/p/17137995.html

vue项目目录介绍

# vue 项目目录介绍

myfirstvue      # 项目名

	node_modules  # 非常多第三方模块，以后把项目复制给别人时【上传git要忽略掉】，这个文件夹删掉，很多小文件，项目的依赖，项目要运行，没有它不行  如果没有只需要执行 cnpm install，根据package.json的依赖包，按装好依赖、

    public              # 文件夹

    	-favicon.ico    # 网站小图标（浏览器上方的略缩图）

        -index.html     # spa 单页面应用，以后整个vue项目都是用这一个html，但你不用动他

    src                  # 文件夹--以后咱们都动这里面的

        -assets          # 静态资源，以后前端用的图片，js，css。。都放在这里

    		logo.png       #  图片（我们访问的欢迎页面中的那个图片就是这个）

        -components        # 以后在这里放组件， xx.vue, 小组件

			HelloWorld.vue  # 提供的展示组件

        -router               # 安装了Router，就会有这个文件夹，下面有个index.js

            index.js

        -store               # 安装了Vuex，就会有这个文件夹，下面有个index.js

            -index.js

        -views               # 页面组件

            -AboutView.vue

            -HomeView.vue

        -App.vue            # 根组件，new Vue实例管理了 div，以后原来写在div中的东西，现在都写在App.vue

        -main.js            # 项目的启动入口

	.gitignore             # git的忽略文件，后面学了git就会了

    babel.config.js        # bable配置文件，不用动

    jsconfig.json          # 配置文件，不用动

    package.json

    # 不用动，安装了第三方模块，它自动增加

    # 内部的信息中有name属性，这就是我们项目的名称，项目启动后可以在浏览器的上方看到

    # name属性的下方，还有一个scripts属性，内部有一个serve键值对，这个serve就是对应：npm run serve中的serve的，如果我们在这里进行了更改，启动项目的命令也需要更改

    # 下方的dependencies中配置了项目所需模块的版本信息，版本前面的‘^’号表示的是可以往更高版本兼容，但实际使用的时候通常不这么设置（高版本容易出兼容性问题）

    package-lock.json      # 锁定文件，忽略掉

    README.md              #  用户手册

    vue.config.js          # vue的配置文件

es6导入导出语法

App.vue,main.js是什么



### 看xx.vue 组件学到的重点#########

#  记住，以后开发vue项目，都按照这个模式来

1 新建xx.vue(创建新的组件页面组件)

2 在xx.vue中就三块内容

	#1 以后组件的html内容，都写在这里

	<template>

	</template>

    #2 以后该组件使用的样式，都写在这

    <style>

    </style>

    # 3 以后js的东西，都写在这

    <script>

	</script>

#### main.js 学到的

# 找到index.html 中的id为app的div，以后都在App.vue中写（相当于我们之前在html中编写vue时的el属性）

new Vue({

  render: h => h(App)

}).$mount('#app')

python中创建包，可以在其他py文件中导入
js 从es6开始，也支持包的导入和导出
我们编写下方的代码时需要创建一个文件夹，在文件夹内创建一个js文件，在他的内部编写vue代码，为了使这个代码生效我们需要在main.js中进行导入

默认导出语法(使用的多)

	-导出语法

    	export default 一般是个对象

    -导入语法

    	import 别名  from '路径'

        以后 别名   就是 导出的对象

命名导入导出语法(了解)
命名导出语法可以写多个，这样就可以导出多个变量
导出的导入的时候需要用大括号包裹导入的变量，并用逗号隔开，需要什么变量就导入什么变量
ps：导出的时候需要注意，const定义的导出的变量名不能跟前面代码中的变量名重复，会报错

导入的简写形式

包下的 index.js 导入的时候，不用具体到index.js的路径
它等同于ptyhon的init.py

    -例如：

    	# 包是

    	xiaoming

          -index.js

        #导入的时候

        	import xiaoming from './xiaoming'

vue项目编写步骤

# 1 以后只需要写xx.vue

	-页面组件（views文件夹内创建）

    -小组件   给页面组件用的（components文件夹内创建）

# 2 组件中导出

'HelloWorld.vue组件导出后，导入到HomeView.vue组件中(小组件导入到页面组件中)'

'如果组件内部定义了变量需要用data来接收，但是要写成方法return值'

	export default {

          name: 'HelloWorld',

          data() {

            return {

              xx: '彭于晏'

            }

          },

          props: {

    	msg: String

  		  }

	}

'如果外面有自定义属性就需要用props来接收'

    <HelloWorld msg="Welcome to Your Vue.js App"/>

# 3 组件如果要在别的组件中使用，需要导入、注册

	'这里也是以HelloWorld.vue组件导入到HomeView.vue组件中为例子'

	# 导入

    import HelloWorld from '@/components/HelloWorld.vue'

    # 这里的@符号就是指代src文件夹

	import HelloWorld from '../components/HelloWorld.vue'

    # 注册

    export default {

      components: {

        HelloWorld

      }

    }

 # 4 注册以后，在这个组件中就可以使用导入的组件 ，写在<template>

	# 自定义属性

    '可以写但个标签，也可以写两个标签进行包裹，包裹后内部可以用更多的操作，比如插值语法'

	<HelloWorld msg="传进来的p"/>

props配置项

props配置项在里面写接受父传子自定义的属性

# props配置项有三种写法:

	-1 数组写法

    -2 对象对象写法

    -3 对象套对象写法

# 写法总结

  # 方式一：使用数组

  	props: ['msg'],

  # 方式二：使用对象

  	props: {msg: String}, // 属性验证

  # 方式三：使用对象，指定类型、默认值和必填

  	props: {

    	msg: {

      	type: String, //类型

      	required: true, //必要性

      	default: '老王' //默认值

    	}

  	}

props使用

新建组件child.vue
在根组件app中引入child.vue,并注册(在components中)
根组件可以通过自定属性进行父传子(可以写多个自定义属性)
子组件通过props配置项接收数据(数组写法/对象写法)
可以进行属性的验证,虽然会在前端控制台报错(不影响正常显示)

Mixin混入

# mixin(混入) 可以把多个组件共用的配置提取成一个混入对象

	-把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用

# 使用步骤

	-1 定义混入对象，新建mixin包，下新建index.js

    -2 在 index.js中写代码（组件中会用到的，比如data，methods、配置项）

        export const hunhe = {

            data() {

            return {

              name: '彭于晏'

            }

          },

            methods: {

                handlePrintName() {

                    alert(this.name)

                }

            },

        }

    -3 局部导入：在组件中

        import {hunhe} from "@/mixin";

        # 配置项：

        mixins:[hunhe,]

    -4 全局使用，在main.js 中  以后所有组件都可以用

        import {hunhe} from "@/mixin";

        Vue.mixin(hunhe)

        // Vue.mixin(lqz2) 多个混入需要注册多次

        // Vue.mixin(lqz3)

    -5 在组件中，直接使用即可

局部使用mixins

新建组件并将其导入到根组件中
编写根组件代码/编写子组件代码
根组件和子组件有相同的(数据/方法)
在src目录下新建mixin文件夹并且在其中新建index.js编写相同的(数据/方法)
我们就可以在子组件/父组件中配置项配置mixin，导入共同拥有的(数据/方法)

注意：如上示例中，混入导入的和methods中的函数都是同一个名字。
直接说结论：先使用methods中的函数，如果在methods中找不到，再用mixins的。
扩展：
混入不仅仅可以抽取methods中的函数，还可以抽取data()数据。
查找顺序和之前的一样，先使用组件自己的数据，如果没有数据，再去mixins中找数据。
create()这种生命周期钩子函数也可以抽取到mixins。

全局引用mixin

需要在main.js中导入mixin包：

全局引入之后，相当于在所有组件中都加入了mixins配置项，所有组件就都可以使用混入的函数和数据了。
mixins具体使用情景:
比如有一个记录用户浏览记录的功能，通过引入mxins，可以实现在每个组件都可以使用这个功能。

插件

# 功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

	- elementui相当于是Vue的插件

# 使用步骤

	-新建包plugins，新建index.js

    import Vue from "vue";

    import axios from "axios";

    import {hunhe} from '@/mixin'

    export default {

        install(miVue) {

            // console.log(miVue)

            // 1 vue 实例上放个变量

            // Vue.prototype.$name = 'lqz'  // 类比python，在类上放了一个属性，所有对象都能取到

            // Vue.prototype.$ajax = axios

            // 2 使用插件，加入混入

            // 全局使用混入

            // Vue.mixin(hunhe)

            // 3 定义全局组件

            // 4 定义自定义指令  v-lqz

            Vue.directive("fbind", {

                //指令与元素成功绑定时（一上来）

                bind(element, binding) {

                    element.value = binding.value;

                },

                //指令所在元素被插入页面时

                inserted(element, binding) {

                    element.focus();

                },

                //指令所在的模板被重新解析时

                update(element, binding) {

                    element.value = binding.value;

                },

            });

        }

    }

    2 在main.js 中使用插件

    import plugins from '@/plugins'

	Vue.use(plugins)  // 本子，使用use，会自动触发插件对象中得install

    3 以后再组件中可以直接用插件中写的东西

# 插件可以做的事：

 1 了解，自定义指令(不了解没关系)

 2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax  就是axios对象

 3 使用全局混入

 4 自定义全局组件

使用插件给Vue对象添加属性

在src目录中新建plugings文件夹，并且新建index.js文件在其中
在index.js文件中编写代码

插件是包含install方法的一个对象。如上图我们在index.js导出这个对象。install方法的第一个参数是Vue实例，第二个以后的参数是插件使用者传递的数据
需求：在Vue实例上存放一个变量，在任意位置通过this.变量名就可以获取到这个变量的数据。（本质上增强了Vue的功能）
导入Vue，这里的Vue是源码中的Vue构造函数（把他当作python中的类）

在Vue类上存放了一个属性$name，以后Vue类产生的对象，都可以拿到这个属性。
使用插件，在main.js中导入插件

并且使用对插件使用Vue.use()，相当于自动触发插件对象中的install方法。Vue.use()会给自动插件的第一个参数传入Vue构造方法（相当于python中的类）。
还可以给插件传更多的参数如：Vue.use(plugins, 1, '你好')
在插件中接收参数

在根组件里打印this：

这个this是当前的组件对象。查看控制台，发现并没有我们添加的$name属性。
那到底如何使用插件，给Vue对象添加属性呢？使用原型prototype。
修改插件代码：

这里有个类似python中属性查找属性的问题。我们使用Vue.prototype.$name='lqz'将属性放入prototype。Vue对象查找属性时，会先在自己身上找，如果找不到，就会去prototype找$name属性。prototype类比python中的类。
使用插件引入axios：

这样写，在任意页面都可以通过this.$ajax直接使用axios，不用每次使用都导入了

为什么属性的名字前，都需要加一个$?

防止和组件内部的属性名冲突。

插件配合混入

之前我们是在main.js使用Vue.mixin()实现全局混入。
通过插件实现全局混入：
也相当于所有组件都添加了mixin配置项。

在插件定义全局组件

elementui插件定义很多全局组件，我们可以直接使用：

scoped

# 父组件写了style，子组件都会使用父组件的style

	如果在根组件中写了样式，会在所有页面组件都生效，这样不太好，所有需要使用scoped。

# 父组件的样式，在子组件中会生效，在style上写 <style scoped>

# </style>让该样式只在当前组件中生效

# 示例

<style scoped>

h1 {

  background-color: chartreuse;

}

</style>

localStorage和sessionStorage

# 是window浏览器对象(BOM)有的东西

localStorage和sessionStorage和Vue没有必然联系。

# 如果想在浏览器中存储数据：

有三个地方：

	1.永久存储：localStorage   不登录加购物车，没登录 搜索过的商品

    2.临时存储：sessionStorage 关闭页面数据就没了

    3.设定一个时间，到时候就过期：cookie

 # 补充：序列化和反序列化

      // 对象转json字符串

      // JSON.stringify(person)

      // json字符串转对象

      // JSON.parse()

# 都是在浏览器存储数据的--》存数据有什么用？

	-登录成功 token存在本地

    -不登录加入购物车功能，迪卡侬存在了localStorage中

    -组件间通信----》 跨组件

# localStorage

	-永久存储，除非清空缓存，手动删除，代码删除

    -localStorage.setItem('userinfo', JSON.stringify(this.userInfo))

    -localStorage.getItem('userinfo')

    -localStorage.clear()  // 清空全部

    -localStorage.removeItem('userinfo')

# sessionStorage

	-关闭浏览器，自动清理

    -sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))

    -sessionStorage.getItem('userinfo')

    -sessionStorage.clear()  // 清空全部

    -sessionStorage.removeItem('userinfo')

# cookie

	-有过期时间，到过期时间自动清理

    -借助于第三方 vue-cookies

    -cookies.set('userinfo', JSON.stringify(this.userInfo))

    -cookies.get('userinfo')

    -cookies.delete('userinfo')

cookies操作

# 安装Vue cookies第三方插件：

cnpm install vue-cookies -S

# 导入：

import cookies from 'vue-cookies'

<template>

  <div id="app">

    <h1>localStorage操作</h1>

    <button @click="saveStorage">点我向localStorage放数据</button>

    <button @click="getStorage">点我获取localStorage数据</button>

    <button @click="removeStorage">点我删除localStorage放数据</button>

    <h1>sessionStorage操作</h1>

    <button @click="saveSessionStorage">点我向localStorage放数据</button>

    <button @click="getSessionStorage">点我获取localStorage数据</button>

    <button @click="removeSessionStorage">点我删除localStorage放数据</button>

    <h1>cookie操作</h1>

    <button @click="saveCookie">点我向localStorage放数据</button>

    <button @click="getCookie">点我获取localStorage数据</button>

    <button @click="removeCookie">点我删除localStorage放数据</button>

  </div>

</template>

<script>

import cookies from 'vue-cookies'

export default {

  name: 'App',

  data() {

    return {}

  },

  methods: {

    saveStorage() {

      var person = {

        name: '彭于晏',

        age: 38

      }

      localStorage.setItem('userinfo', JSON.stringify(person))

    },

    getStorage() {

      let userinfo = localStorage.getItem('userinfo')

      console.log(userinfo)

      console.log(typeof userinfo)

    },

    removeStorage() {

      // localStorage.clear()

      localStorage.removeItem('userinfo')

    },

    saveSessionStorage() {

      var person = {

        name: '彭于晏',

        age: 38

      }

      sessionStorage.setItem('userinfo', JSON.stringify(person))

    },

    getSessionStorage() {

      let userinfo = sessionStorage.getItem('userinfo')

      console.log(userinfo)

      console.log(typeof userinfo)

    },

    removeSessionStorage() {

      // localStorage.clear()

      sessionStorage.removeItem('userinfo')

    },

    saveCookie() {

      cookies.set('name','lqz','7d')  // 按秒计

    },

    getCookie() {

      console.log(cookies.get('name'))

    },

    removeCookie() {

      cookies.remove('name')

    }

  }

}

</script>

<style scoped>

h1 {

  background-color: aqua;

}

</style>

element-ui

# 在vue上，css样式，用的最多的是elementui，但是还有其他的

	-elementui        做网页端 样式用的多  vue2的 饿了吗团队开发的

    -elementui-plus   第三方团队继续基于vue3写的

    -vant             做app的样式 基于Vue3

    -iview            pc端用www.iviewui.com 基于Vue3

element-ui使用



# 使用步骤

	1 安装

    	cnpm i element-ui -S

	2- 在main.js中引入插件

    	- 完整引入 （导致项目过大）

        - 按需引入 （专业前端）

    2.1 配置完整引入  在 main.js 中写入以下内容

        import ElementUI from 'element-ui';

        import 'element-ui/lib/theme-chalk/index.css';

        Vue.use(ElementUI)  // 以后在咱们组件中直接使用elementui提供的全局组件即可

    3 在组件中使用

    	-去官网看到好的，复制贴到你的项目中

练习

1.`创建vue项目`

使用导入导出语法，把登录功能的发送请求，抽取到一个包中

对项目文件中的的路由部分进行配置

# loginView组件页面

<template>

  <div>

    <h2 class="top">登录页面</h2>

    <br>

    <p>用户名:<input type="text"></p>

    <p>密码:<input type="text"></p>

    <p><button>登录</button></p>

  </div>

</template>

<script>

export default {

  name: 'loginView',

  components: {

  }

}

</script>

<style>

.top {

  align-content: center;

}

</style>

我们需要绑定给按钮点击事件，给后端发送登录请求..

后端部分编写(django-drf)

因为我们等下会用到django的 authuser表

所以需要我们在 settings文件中配置

AUTH_USER_MODEL = 'app01.UserInfo'

数据库部分我们使用默认的即可

INSTALLED_APPS = [

    ...

    'rest_framework'  #需要注册app进行使用Drf

]

在model层创建表

from django.db import models

from django.contrib.auth.models import AbstractUser

# Create your models here.

class UserInfo(AbstractUser):

    mobile = models.CharField(max_length=32,null=True)

class CarModel(models.Model):

    name = models.CharField(max_length=32)

    price = models.CharField(max_length=32)

    car_factory = models.ForeignKey(to='CarFactory',on_delete=models.CASCADE)

    distributors = models.ManyToManyField(to='Distributors')

class CarFactory(models.Model):

    name = models.CharField(max_length=32)

    addr = models.CharField(max_length=32)

    phone = models.CharField(max_length=32)

class Distributors(models.Model):

    name = models.CharField(max_length=32)

    phone = models.CharField(max_length=32)

    addr = models.CharField(max_length=32)

终端中进行 makemigrations,migrate数据库迁移操作
创建超级管理员create superuser
填充数据
编写视图函数(登录功能)

from rest_framework.viewsets import ModelViewSet, ViewSetMixin

from rest_framework.generics import CreateAPIView

from .models import CarModel, UserInfo, CarFactory, Distributor

from .serializer import UserSerializer, CarFactorySerializer, CarModelSerializer, DistributorSerializer

from rest_framework.response import Response

from rest_framework_jwt.settings import api_settings

from django.contrib import auth

jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER

jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER

class UserView(ViewSetMixin, CreateAPIView):

    # queryset = UserInfo.objects.all()

    # serializer_class = UserSerializer

    def login(self, request, *args, **kwargs):

        username = request.data.get('username')

        password = request.data.get('password')

        user_obj = auth.authenticate(request,username=username,password=password)

        if user_obj:

            payload = jwt_payload_handler(user_obj)

            # 通过payload得到token

            token = jwt_encode_handler(payload)

            return Response({

                'code': 100,

                'msg': '登录成功',

                'token': token,

                'username': user_obj.username,

                'url': ''

            })

        return Response({'msg': '用户名或密码错误', 'code': 101})

class CarModelView(ModelViewSet):

    queryset = CarModel.objects.all()

    serializer_class = CarModelSerializer

class CarFactoryView(ModelViewSet):

    queryset = CarFactory.objects.all()

    serializer_class = CarFactorySerializer

class DistributorView(ModelViewSet):

    queryset = Distributor.objects.all()

    serializer_class = DistributorSerializer

路由层：

from django.contrib import admin

from django.urls import path, include

from app01 import views

from rest_framework.routers import SimpleRouter

router = SimpleRouter()

router.register('car_factory', views.CarFactoryView, 'car_factory')

router.register('car_model', views.CarModelView, 'car_model')

router.register('distributor', views.DistributorView, 'distributor')

urlpatterns = [

    path('admin/', admin.site.urls),

    path('login/', views.UserView.as_view({'post':"login"})),

    path('user/', include(router.urls)),

]

序列化类:

from rest_framework.serializers import ModelSerializer

from .models import CarModel, UserInfo,CarFactory,Distributor

class UserSerializer(ModelSerializer):

    class Meta:

        model = UserInfo

        fields = "__all__"

class CarModelSerializer(ModelSerializer):

    class Meta:

        model = CarModel

        fields = ['name','price','distributors','car_factory','distributor_list','car_factory_detail','id']

        extra_kwargs = {

            'distributors': {"write_only": True},

            'car_factory': {"write_only": True},

        }

class CarFactorySerializer(ModelSerializer):

    class Meta:

        model = CarFactory

        fields = '__all__'

class DistributorSerializer(ModelSerializer):

    class Meta:

        model = Distributor

        fields = '__all__'

后端代码编写完后我们在回到前端部分
绑定给button按钮点击事件,向后端发送post请求

<template>

  <div>

    <h2 class="top">登录页面</h2>

    <br>

    <p>用户名:<input type="text" v-model="username"></p>

    <p>密码:<input type="password" v-model="password"></p>

    <p>

      <button @click="handleLogin">登录</button>

    </p>

  </div>

</template>

<script>

import axios from "axios"

export default {

  name: 'loginView',

  components: {},

  data(){

    return{

      username:"",

      password:"",

      token:''

    }

  },

  methods: {

    handleLogin(){

      axios.post('http://127.0.0.1:8000/login/',{username:this.username,password:this.password}).then(

          res=>{

            if (res.data.code === 100){

              this.token = res.data.token

            }else {

              alert(res.data.msg)

            }

          }

      )

    }

  }

}

</script>

<style>

.top {

  align-content: center;

}

</style>

前端代码修改

效果：

我们可以将登录功能抽取出来，放到src下面的文件夹中

新建文件夹method,并创建js文件index

在index文件中编写代码

import axios from "axios"// 这里必须导入axios,因为别的包会直接调用下面的函数，而下面的函数需要使用这个axios

// 默认导出

export default {

    handleLogin() {

      axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(

          res => {

            if (res.data.code === 100) {

              console.log(res.data)

              this.token = res.data.token

            } else {

              alert(res.data.msg)

            }

          }

      )

    }

}

export const ajaxfunc = function handleLogin () { // 这里如果使用匿名函数,由于匿名函数没有this,在别的组件中使用会导致获取不了数据。

      axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(

          res => {

            if (res.data.code === 100) {

              console.log(res.data)

              this.token = res.data.token

            } else {

              alert(res.data.msg)

            }

          }

      )

    }

2.创建一个组件，显示一张图片，图片地址通过父组件传入 aboutView 中使用这个组件

<template>

  <img :src="imgaddr" alt="">

  </template>

<script>

  export default {

    name: "imgShow",

    data(){

      return {

        imgaddr:""

      }

    }

  }

</script>

<template>

  <div class="about">

    <h1>父传子图片</h1>

    <br>

      <button @click="handleSend">点击按钮将图片地址发送到子组件上</button>

      <br>

        <hr>

          <imgShow ref="myimg"></imgShow>

          <hr>

          </div>

</template>

<script>

  import imgShow from '@/components/imgShow'

  export default {

    data(){

      return {

        addr:"http://img.pconline.com.cn/images/upload/upc/tx/ladyproduct/1703/14/c0/39464462_1489489032090_medium.jpg"

      }

    },

    components:{

      imgShow

    },

    methods:{

      handleSend(){

        this.$refs.myimg.imgaddr = this.addr

      }

    }

  }

</script>

3. 在图片页组件，加一个button，点击把图片地址显示在父组件中（子传父）

<template>

  <div class="about">

    <h1>父传子图片</h1>

    <br>

    <button @click="handleSend">点击按钮将图片地址发送到子组件上</button>

    <br>

    <hr>

    <imgShow ref="myimg" @myevent="eventFunc"></imgShow>

    <hr>

    <h1>子传父图片</h1>

    <img :src="text" alt="">

  </div>

</template>

<script>

import imgShow from '@/components/imgShow'

export default {

  data(){

    return {

      addr:"http://img.pconline.com.cn/images/upload/upc/tx/ladyproduct/1703/14/c0/39464462_1489489032090_medium.jpg",

      text:''

    }

  },

  components:{

    imgShow

  },

  methods:{

    handleSend(){

      this.$refs.myimg.imgaddr = this.addr

    },

    eventFunc(info){

      console.log(info)

      this.text = info

    }

  }

}

</script>

<template>

  <div>

  <img :src="imgaddr" alt="">

  <br>

  <button @click="handleFsend">点击按钮给父组件发送图片地址</button>

  </div>

</template>

<script>

export default {

  name: "imgShow",

  data(){

    return {

      imgaddr:"",

      imgsrc:"http://img.pconline.com.cn/images/upload/upc/tx/ladyproduct/1703/14/c0/39464462_1489489037173_medium.jpg"

    }

  },

  methods:{

    handleFsend(){

      this.$emit('myevent',this.imgsrc)

    }

  }

}

</script>

巴特西

Vue急速入门-5

vue-cli创建项目

vue-cli项目创建

vue项目目录介绍

es6导入导出语法

App.vue,main.js是什么

vue项目编写步骤

props配置项

props使用

Mixin混入

局部使用mixins

全局引用mixin

插件

使用插件给Vue对象添加属性

插件配合混入

在插件定义全局组件

scoped

localStorage和sessionStorage

cookies操作

element-ui

element-ui使用

练习

1.`创建vue项目`

2.创建一个组件，显示一张图片，图片地址通过父组件传入 aboutView 中使用这个组件

3. 在图片页组件，加一个button，点击把图片地址显示在父组件中（子传父）

最新文章

热门文章

巴特西

Vue急速入门-5

vue-cli创建项目

vue-cli项目创建

vue项目目录介绍

es6导入导出语法

App.vue,main.js是什么

vue项目编写步骤

props配置项

props使用

Mixin混入

局部使用mixins

全局引用mixin

插件

使用插件给Vue对象添加属性

插件配合混入

在插件定义全局组件

scoped

localStorage和sessionStorage

cookies操作

element-ui

element-ui使用

练习

1.创建vue项目

2.创建一个组件，显示一张图片，图片地址通过父组件传入 aboutView 中使用这个组件

3. 在图片页组件，加一个button，点击把图片地址显示在父组件中 （子传父）

最新文章

热门文章

1.`创建vue项目`

3. 在图片页组件，加一个button，点击把图片地址显示在父组件中（子传父）