gpt4 book ai didi

【Vue】vue项目目录介绍es6的导入导出语法vue项目开发规范Vue项目编写步骤

转载 作者:我是一只小鸟 更新时间:2023-02-20 22:31:53 25 4
gpt4 key购买 nike

目录
  • 昨日回顾
  • 今日内容
    • 0 vue-cli创建项目
      • node.js环境
      • 创建vue-cli项目
    • 1 vue项目目录介绍
      • node_modules
      • index.html
      • app.vue
      • package.json
      • package-lock.json
    • 2 es6的导入导出语法
      • main.js文件介绍
      • 前期准备
      • 默认导出
      • 命名导出
      • index文件的特殊含义
    • 3 vue项目开发规范
      • Vue项目编写步骤
      • main.js导入根组件
    • 4 vue项目集成axios、vue项目前后端打通
      • 4.1 前后端交互版登录功能
    • 5 props配置项
    • 6 混入
      • 局部使用mixins
      • 全局引入mixins
    • 7 插件
    • 8 scoped样式
    • 9 localStorage和sessionStorage
    • 10 集成elementui
  • 练习
    • 登录功能
    • 父子通信展示图片
    • 使用插槽展示图片

昨日回顾

                        
                          # 1 计算属性
	-属性放在data配置项中,方法放在methods中
    -computed:{
        方法名(){}
    }
    -把它当属性用,缓存:只有当该计算属性使用的变量发生变化时,它才重新运算
    
   
# 2 重写过滤案例
    - 通过计算属性,重写过滤案例
    	-newDataList做成计算属性,v-for直接循环它
        -newDataList使用的变量只要发生变化,它就会重新运算,使用了mytext,只要input输入内容,它就会重新运算,不需要加事件了
        
# 3 监听属性
	- data中定义的属性,可以使用watch绑定一个方法,以后只要这个属性发生变化,就会触发方法的执行
    - watch:{
        page(){
            
        }
    }
    
# 4 组件:有自己的html,css,js,以后相用,直接注册使用即可
	-全局,局部
    -var child={template:``,data(){return {}},methods:{}}
	-组件中注册:components:{child}
    
# 5 组件间通信-组件间数据,方法都是隔离的
	-父传子:自定义属性
        <child :myname='lqz'></child>
        -在子组件中:props:['myname']
        
    -子传父:自定义事件
    	-子组件中某种情况下把子组件的数据传给父组件
        <child @myevnet='handleClick'></child>
        -点击事件函数内部:this.$emit('自定义事件名字',name)
        
        
    -ref属性:
    	-放在普通标签上: this.$refs.标签上的名字  原生dom对象
        -放在组件上:this.$refs.组件上的名字       组件对象  它有变量,方法
    
 # 6 动态组件
	-不确定显示的组件是什么,动态变化的
    <component :is='变量'></component>
    -<keep-alive></keep-alive>
    
# 7 插槽
	-写了组件,组件内部,空一个位置 <slot></slot>
    -<child >   <div></div>  </child>
    
    -默认插槽
    -具名插槽:挖多个坑,给每个坑命个名
    <slot name="b"></slot>
    
    
    <child >   <div slot="b"></div>  </child>
    <child >   <div v-slot:b></div>  </child>
    
# 8 vue-cli 
	-对比djagno,创建djagno项目需要怎么做?
    	-装python解释器,安装模块django,django-admin创建项目
    
    -nodejs,安装模块vue-cli
    	-npm install @vue/cli -g
        -vue 可执行文件
        -vue create项目名
        	-bable
            -vuex
            -vue-router
            
    -编辑器选择
    	-jetbrains公司:Pycharm,goland,phpstorm,IDEA,webstorm
    		-pycharm+vue插件  开发前端
        -vscode:微软出的,轻量级,免费
		-eclipse my eclipse
        -谷歌买了jetbrains授权, AndroidStadio
        -sublime Text
        -vim+插件
    
    -vue项目运行的两种方式
    	-命令行中执行:npm run serve
        -pycharm的绿色箭头运行
        
   # 9 学过的配置项
	- el(template)
    - data :组建中 方法
    - methods
    - 8个生命周期钩子
    - components  
    - watch
    - computed 
    

                        
                      

今日内容

0 vue-cli创建项目

node.js环境

                        
                          # 前端做成项目----》使用工具(vue-cli),创建出vue项目,单页面应用(spa),组件化开发,  把 xx.vue,ts,saas,less-----》编译---》在浏览器中执行


# vue-cli创建项目开发,在项目中开发,最后上线,一定要编译--->纯粹的html,js,css

# 浏览器只能识别 js  html  css

# vue-cli 工具,使用nodejs写的,要运行,需要node环境

# 下载node解释器
	-一路下一步 
    -环境变量:可执行文件路径  就在环境变量
    -两个可执行文件:
    	-node:    python
        -npm:     pip

# nodejs 怎么来的
	-js只能运行在浏览器中,因为浏览器中有它的解释器环境
    -基于谷歌浏览器的v8引擎,使它可以运行在操作系统之上   网络包,文件,数据库。。。 用c写的
    	-js语法 完成后端的编写,全栈
    -号称性能高,大量使用协程

# 文件防篡改校验
	-把文件生成md5值
    -以后被下载下来,再生成md5值肯定是一样,如果不一样说明被篡改了,不能用了
    
    -1 百度网盘 
    	-秒传   
        	-传到服务器上---》生成md5---》存着
            -本地生成md5---》发送到服务端---》一查----》有---》不传了
            
        - 屏蔽
        

    -2 王小云 破解md5 
        		

        
        
# 解释型语言和编译型语言
	-js,node,php,python    解释型语言   运行解释器之上   pyinstaller
    -c,go,c++               编译型语言   直接把源代码编译成不同平台的可执行文件
    	-cpython解释器用c写的----》编译成不同平台的可执行文件---》在不同平台双击运行即可
        	-win
            -mac
            -linux
    -java:一处编码处处运行
    	-java 虚拟机 ---》虚拟机跨平台
        -java字节码文件运行在虚拟机之上
        -java写了代码----》编译成字节(区别与可执行文件  jar,war,.class)
 

                        
                      

创建vue-cli项目

                        
                          # 创建vue项目使用什么?
	-2.x 使用vue-cli :https://cli.vuejs.org/zh/
    -3.x 使用vue-cli
    -vite只能创建vue3 效率非常高

    
 # 按装vue-cli
	npm install -g @vue/cli  
    # 使用cnpm替换npm    cnpm淘宝出的工具,下载的时候,去淘宝镜像下载,速度快
    # -g 表示装全局
    #--registry=https://registry.npm.taobao.org 指定淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
        
    # 以后使用cnpm 代替npm
    
    cnpm install -g @vue/cli
    
    # cmd控制台就可以输入 vue 命令(装了djagno可以使用django-admin创建django项目)
    	-vue 创建vue项目
    
# 使用vue-cli创建项目(找个目录)
	vue create myfirstvue   # 速度很慢,等,可以ctrl+c停止 执行npm cache clean --force
    # 很慢的原因
    	-从github拉一个空项目
        -按照该项目所有的依赖,npm装
    # 按下图操作
    
    
    vue ui # 使用图形化界面创建项目 ,自己点击即可

                        
                      

1 vue项目目录介绍

                        
                          myfirstvue                    # 项目名字
    node_modules              # 文件夹,内部有很多当前项目依赖的模块,可以删除,npm install
    public                    # 文件夹
        -favicon.ico           # 网站小图标
        -index.html            # spa:单页面应用  
    src                       # 以后咱们写代码,都在这下面
    	-assets                # 静态资源,js,css,图片  类似于static文件夹
    		logo.png          # 静态资源的图片
    	-components           # 组件:小组件,用在别的大(页面组件)组件中
    		-HelloWorld.vue   # 默认了一个hello world组件
    	-router                    # 装了vue-router自动生成的,如果不装就没有
    		index.js              # vue-router的配置
    	-store                # 装了vuex自动生成的,如果不装就没有
    		index.js          # vuex的配置
    	-views                # 放了一堆组件,页面组件
            AboutView.vue     # 关于 页面组件
            HomeView.vue      # 主页  页面组件
    	-App.vue              # 根组件
    	-main.js              # 整个项目启动入口
    .gitignore                # git的忽略文件 不用动
    babel.config.js           # babel的配置 不用动
    jsconfig.json             # 配置文件 不用动
    package.json              # 重要:类似于python项目的requirements.txt  当前项目所有依赖
    package-lock.json         # 锁定文件:package.json中写了依赖的版本,这个文件锁定所有版本
    README.md                 # 读我,项目的介绍
    vue.config.js             # vue项目的配置文件

                        
                      

node_modules

                        
                          # node_modules是个文件夹,内部有很多当前项目依赖的模块(第三方模块)
# 没有node_modules项目不能运行
# 发送给别人的时候需要删除【上传git要忽略掉】,删除了使用cnpm install可以重新安装回来

                        
                      

比如创建python项目时,如果勾选了虚拟环境,会创建一个venv文件夹:

image-20230219153017766

这个venv文件夹,放置了一个python解释器的环境,如果你再下了第三方依赖,是安装在这个venv文件夹下的python环境的。好处是,每一个项目都不会互相影响。相当于每一个python项目都有一个自己的解释器.

而这个node_modules也是类似的效果,存放了很多项目的第三方依赖模块。node_modules是可以删除的(这个文件比较大),如果你要提交到仓库、发送给别人,需要把它删除掉。但是你把node_modules删除掉了,项目就无法启动了(缺乏第三方依赖)。但是可以使用npm install命令,该命令会根据package.json文件给你重新装上这些依赖.

补充:webpack是代码编译的工具 ---> 编译成只有html、js、css 。

index.html

                        
                            public                    # 文件夹
        -favicon.ico           # 网站小图标
        -index.html            # spa:单页面应用 
        -assets                # 静态资源,js,css,图片  类似于static文件夹

                        
                      

现在我们写的项目只有一个index.html页面.

image-20230219154657958

首页页面组件、登录页面组件、注册页面组件.

查看index.html内容:

image-20230219154759382

所有组件都在这个div内部切换,也就实现首页、登录页面、注册页面切换。这个div很重要,不要在这个标签内写东西.

通过 <%= BASE_URL %> 可以找到在public文件夹下的小图标.

image-20230219155224178

网站名字是在 package.json 里面定义的:

image-20230219155440625

noscript:

如果你的网站禁用了js:

就会显示上面的提示语句:

image-20230219155635787

app.vue

                        
                          # app.vue是根组件

                        
                      

image-20230219161637404

根组件的内容会直接替换到index.html页面下的这个div内.

package.json

                        
                          # package.json当前项目的依赖项

                        
                      

image-20230219162010797

如果删除, npm install 就不知道装什么了.

image-20230220104813445

package-lock.json

package.json写了一些项目依赖的版本.

image-20230219162153804

这些依赖的版本添加了上箭头 ^ ,这表示安装时会装3版本里最新的3.6.2。但是总是安装最新的版本,可能会出现版本不兼容问题.

lock文件可以对版本进行锁定:

image-20230219162436086

以后安装就按照这个锁定版本进行安装,而不是按照 package.json 文件安装,这样不会出现问题。所以我们也不要动这个lock文件.

总结:以后经常用的就两个views (写页面),components(写组件).

2 es6的导入导出语法

                        
                          # node.js中如果要导入,必须先导出
	-默认导出
    -命名导出
    
# python创建包,只需要在其他py文件中导入
    
# 默认导出写法
	
    # 语法
    -导出语法
    	export default 一般是个对象
    -导入语法
    	import 别名  from '路径'
        以后 别名   就是 导出的对象
    
    # 示例
    1.在js文件中定义变量,函数,最后使用export defalut导出
    export default {
        name: '彭于晏',
        printName () {
            console.log(this.name)
        }
    }
    2 在想使用的js中,导入
    import 随便起 from './lqz/utils'
    
    
# 命名导出和导入
	-导出语法  可以导出多个
    export const name = '刘亦菲'
    export const printName = () => {
        console.log('星象衔新宠')
    }
    -导入语法
    import {printName} from './lqz/utils'
    
    
# 在包下可以建立一个名为index.js 的文件,以后导入的时候,会默认找它
	-对比python中得__init__.py

                        
                      

main.js文件介绍

                        
                          # 找到index.html 中的id为app的div,以后都在App.vue中写
new Vue({
  render: h => h(App)
}).$mount('#app')

                        
                      

image-20230219163839547

main.js是项目的入口,程序运行的时候是从这里开始执行的:

image-20230219163917672

解释main.js的代码含义:

image-20230219164056330

Vue提供了一些开发过程中的提示,通过如上配置项可以选择是否需要开启这些提示.

image-20230219164251501

这里等同于 el:'#app' ,但这是如何做到的呢?

image-20230219164355907

$mount 这里就是去public/index.html挂载了那个 id='app' 的div。 注意public、index这两个名字必须是固定的.

render后面对应的是一个箭头函数,传入了一个h,返回一个h(app)。 而这个app是导入进来的:

image-20230219164739265

也就是导入了App.vue下的内容:

image-20230219164836042

导入这个app之后,用h(app)执行了一下,进行了挂载.

本质是在 App.vue 中写的代码,会原封不动的插入到index.html内的div:

image-20230219165233972

前期准备

在src中新建一个文件夹,并创建一个utils.js文件:

image-20230219171540742

在utils.js内写代码:

image-20230219171652242

我们想在main.js中引入utils.js文件,并使用其中的变量和函数,那么应该怎么做?

需要先在util.js导出,别的文件才能导入,这一点和python不一样:

默认导出

默认导出用的最多,只能导出一次.

image-20230219172041355

这相当于导出了一个对象。(还可以使用es6的语法将其简写) 只有在 export default 导出的,在别的文件才能导入.

使用默认导出,没有给导出的对象取一个名字。 关于默认导出,我们可以这样导入:

image-20230219172535598

main.js导入了之后这个xxx,xxx就是之前导出的对象:

image-20230219172609501

尽量使用包名作为导入对象的名字:

image-20230219172707472

执行项目:

image-20230219172831934

f没有导出所以会报错.

默认导出的其他写法:

image-20230219172942399

这里的this指代当前对象, this.name='彭于晏' .

命名导出

使用命名导出,name相当于一个变量:

image-20230219193601856

在main.js导入: 使用命名导出时,导入的时候可以导入多个名字.

image-20230219193739247

注意:同一个需要导出的文件中,默认导出和命名导出不能混用.

index文件的特殊含义

将我们需要导入的包中的文件改名为index.js:

image-20230219194357600

这样导入的时候就可以直接导包了(如果包下文件名不是index不能这样做):

image-20230219194511893

这个index.js就类似于python中的 __init__ 。(导包的时候会自动执行 __init__文件 ) 。

3 vue项目开发规范

                        
                          # 以后写的组件,都是单页面组件  也就是xx.vue文件 

# 以后写一个组件就是一个xx.vue  xx.vue --分为-> 页面组件和小组件

# 以后一个组件就是一个xx.vue文件,xx.vue文件内部都有三部分
	-<template></template>  # html内容写在里面
    	-并且必须套在一个div标签里
    -<script></script>      # 写js内容
    -<style></style>        # 写css样式
    
# main.js 是整个项目的入口
1 把App.vue根组件导入了
2 使用new Vue({render: h => h(App)}).$mount('#app') 把App.vue组件中得数据和模板,插入到了index.html的id为app的div中了
3 以后,只要在每个组件的export default {} 写之前学过的所有js的东西
4 以后,只要在每个组件的template,写模板,插值语法,指令...
5 以后,只要在每个组件的style,写样式...


                        
                      

Vue项目编写步骤

                        
                          # 1 以后只需要写xx.vue   
	-页面组件
    -小组件   给页面组件用的
    
# 2 组件中导出
	export default {
          name: 'HelloWorld',
          data() {
            return {
              xx: '彭于晏'
            }
          },
	}

# 3 在别的组件中要用,导入,注册
	# 导入
	import HelloWorld from '../components/HelloWorld.vue'
    # 注册
    export default {
      components: {
        HelloWorld 
      }
    }
 # 4 注册以后,在这个组件中就可以使用导入的组件 ,写在<template>
	# 自定义属性
	<HelloWorld msg="传进来的p"/>

                        
                      

查看HomeView.vue(页面组件):

image-20230219191719597

查看HelloWorld.vue(小组件):

image-20230219192948806

注意这里导出都需要使用默认导出,导出一个对象,在其他页面直接使用这个对象进行注册.

正常情况下,想要使用局部组件,需要在配置项components写组件相关信息:

image-20230219192612124

但是,我们可以通过导入的方式,把HelloWorld(子)中的组件到HomeView(父)中注册:

image-20230219192410607

组件注册成功之后,就可以在HomeView使用了:

image-20230219192757742

子组件的msg属性,是通过父组件标签里写的自定义属性传过来的:

image-20230219193400247

main.js导入根组件

main.js导入了App.vue根组件:

image-20230219200011056

根组件中也需要有template、script、style三种标签。如果根组件中没有script标签,会导致挂载时没有数据,只有一个template配置项.

在根组件script标签内写导出的内容:

image-20230219200707345

不用给导出的对象写template属性,这里会自动将上面template标签的内容挂载到这个对象上.

根组件的内容会通过 new Vue({render: h => h(App)}).$mount('#app') 这行代码,最终挂载到index.html的div标签内.

以后开发组件,只需要在template标签内写就可以了:

image-20230219201511923

跟之前的写法一样,只是换了写代码的位置.

4 vue项目集成axios、vue项目前后端打通

                        
                          # 安装axios
	-npm install axios -S
    
# 导入使用
<script>
	import axios from 'axios'
</script>	

# 发送请求,获取数据
    axios.get('http://127.0.0.1:8000/books/').then(res => {
      console.log(res.data)
      this.bookList=res.data
    })
             
# 先用这种方式解决跨域(django 项目)
	1 pip3 install django-cors-headers
    2 app中注册:
        INSTALLED_APPS = (
            ...
            'corsheaders',
            ...
        )
    3 中间件注册
        MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware',
        ...
        ]
    4 把下面的复制到配置文件中
        CORS_ORIGIN_ALLOW_ALL = True
        CORS_ALLOW_METHODS = (
            'DELETE',
            'GET',
            'OPTIONS',
            'PATCH',
            'POST',
            'PUT',
            'VIEW',
        )
        CORS_ALLOW_HEADERS = (
            'XMLHttpRequest',
            'X_FILENAME',
            'accept-encoding',
            'authorization',
            'content-type',
            'dnt',
            'origin',
            'user-agent',
            'x-csrftoken',
            'x-requested-with',
            'Pragma',
        )
   

                        
                      

在App.vue根组件写代码:

                        
                          # 安装axios
	-npm install axios -S
    -npm install -S axios
    -npm install -S axios@1.0.1  # 安装老版本
	'''-S 表示将axios模块保存到package.json中'''
      
# 导入使用
	import axios from 'axios'

                        
                      

在App.vue的script标签内导入axios:

image-20230219203631252

通过axios发送请求:

image-20230219203749296

处理跨域问题,参照上面的配置即可.

在template标签内使用插值语法,显示后端的数据:

image-20230219204150722

前后端交互流程分析:

image-20230219204645080

4.1 前后端交互版登录功能

登录功能:

image-20230219204945981

写事件函数,通过axios发送post请求:

image-20230219205101859

后端写登录接口:

image-20230219205656551

前端发送的post请求里面携带的是json字符串,所以使用原生django应该在request.body里面接受.

5 props配置项

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

# props配置项有三种写法:
	-1 数组写法
    -2 对象对象写法
    -3 对象套对象写法
    
# 写法总结
  // 普通使用
  // props: ['msg'],
  // 属性验证
  // props: {msg: String},
  // 指定类型,必填和默认值
  props: {
    msg: {
      type: String, //类型
      required: true, //必要性
      default: '老王' //默认值
    }
  },

                        
                      

新建组件 child.vue

image-20230219213006564

在根组件引入组件:

image-20230219213120495

在根组件中注册:

image-20230219213207553

在根组件中使用:

image-20230219213228254

根组件通过自定义属性进行父传子(可以写多个自定义属性):

image-20230219213331375

子组件通过props配置项接受数据(数组写法):

image-20230219213402089

子组件通过props配置项接受数据(对象写法):

image-20230219213458256

可以进行属性的验证,虽然报错,但前端还是显示.

子组件通过props配置项接受数据(对象套对象写法):

image-20230219213806006

这里设置了,如果自定义属性没填写数值,那么默认值是 老王 ,且控制台不会报错:

image-20230219213904431

如果设置了 required:true ,自定义属性不填,控制台会报错,但是前端还是会渲染默认值 老王 .

6 混入

                        
                          # mixin(混入) 可以把多个组件共用的配置提取成一个混入对象
	-把多个组件中公用的东西,抽取出来,以后可以全局使用和局部使用
# 使用步骤
	-1 写个mixin/index.js
    export const hunhe = {
        data() {
        return {
          name: '彭于晏'
        }
      },
        methods: {
            handlePrintName() {
                alert(this.name)
            }
        },
    }
    -2 局部导入:在组件中
    import {hunhe} from "@/mixin";
    mixins:[hunhe,]
    
    -3 全局使用,在main.js 中  以后所有组件都可以用
    import {hunhe} from "@/mixin";
	Vue.mixin(hunhe)

                        
                      

局部使用mixins

新建一个组件,并将其导入到根组件:

image-20230219214526848

写根组件代码:

image-20230219214648527

写child组件代码:

image-20230219214840491

可见根组件和子组件有同样的函数handlePrintName.

在src新建mixin文件夹,在此文件夹下新建index.js文件,写如下代码:

image-20230219215055939

这里的函数,直接将组件中的函数部分赋值过来.

在根组件中导入混入对象,开始使用:

image-20230219215146411

再写一个mixins配置项:

image-20230219215351398

如果一个组件的配置项里既有mixins,又有methods,这两个可以一起用吗?

image-20230219215559591

注意:如上示例中,混入导入的和methods中的函数都是同一个名字.

直接说结论:先使用methods中的函数,如果在methods中找不到,再用mixins的.

扩展: 混入不仅仅可以抽取methods中的函数,还可以抽取 data() 数据。 查找顺序和之前的一样,先使用组件自己的数据,如果没有数据,再去mixins中找数据。 create() 这种生命周期钩子函数也可以抽取到mixins.

全局引入mixins

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

image-20230219220343544

全局引入之后,相当于在所有组件中都加入了mixins配置项,所有组件就都可以使用混入的函数和数据了.

mixins具体使用情景: 比如有一个记录用户浏览记录的功能,通过引入mxins,可以实现在每个组件都可以使用这个功能.

7 插件

                        
                          # 功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是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 以后再组件中可以直接用插件中写的东西

                        
                      

8 scoped样式

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

# 父组件的样式,在子组件中会生效,在style上写 <style scoped>  </style>让该样式只在当前组件中生效

# 示例
<style scoped>
h1 {
  background-color: chartreuse;
}
</style>

                        
                      

父组件写了style,子组件都会使用父组件的style 。

image-20230220122801728

如何写一个样式,令所有组件都生效:使用全局样式,在assets下创建css文件夹.

9 localStorage和sessionStorage

                        
                          # window 浏览器对象有的东西
# 如果想在浏览器中存储数据,
	永久存储:localStorage   不登录加购物车,没登录 搜索过的商品
    关闭页面数据就没了(临时存储):sessionStorage
    设定一个时间,到时候就过期:cookie
	
    
 # 补充:序列化和反序列化
      // 对象转json字符串 
      // JSON.stringify(person)
      // json字符串转对象
      // JSON.parse()

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

                        
                      

10 集成elementui

                        
                          # 第三方 样式库  常见的
	-饿了么团队:elementui
    -iview
    -移动端的ui:vant
# 使用步骤
	- 安装	npm i element-ui -S
	-在main.js中引入

                        
                      

练习

需求:

                        
                          1 创建出vue项目 ok
2 使用导入导出语法,把 登录功能的发送请求,抽取到一个包中。 ok  
3 把登录功能写完 ok
	-导入导出
        -默认导出
        -命名导出
        
4  创建一个组件,显示一张图片,图片地址通过父组件传入
	在HomeView中使用这个组件 ok
	
    
5 在图片页组件,加一个button,点击把图片地址显示在父组件中  (子传父)   ok 

6 使用插槽,随便定制一个图片样子 
----------
7 使用vue项目把查询所有汽车 v-for循环显示出来

                        
                      

登录功能

前期准备:

image-20230220162241176

路由:

                        
                          const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('@/views/loginView')  // 导入login视图
    },

                        
                      

loginView.vue

                        
                          <template>
  <div>
    <h2>我是登录页面</h2>
    <p>请输入名字:<input type="text" v-model="username"></p>
    <p>请输入密码:<input type="password" v-model="password"></p>
    <button @click="handleSend">提交按钮1</button>
    <button @click="handleSend2">提交按钮2</button>


  </div>

</template>

<script>
// 导入axios
import axios from 'axios'

// 导入登录函数 (方式一:使用默认导出)
import tools from '@/test_import/index'
let handleSend = tools.handleSend // 不能直接放,需要用一个变量装一下

// 导入登录函数 (方式二:使用有名导出)
import {handleSend2} from '@/test_import'


export default {
  name: "loginView",
  data() {
    return {
      username: '',
      password: '',
      data: null,
    }
  },
  methods: {
    handleSend, // 默认导出
    handleSend2, // 有名导出
  }

}
</script>

<style scoped>

</style>

                        
                      

test_import\index.js

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

// 默认导出
export default {
    handleSend() {

        axios.post('http://127.0.0.1:8000/api/v1/login/', {
            username: this.username,
            password: this.password
        }).then(res => {
            this.data = res.data
            if (res.data.code === 1000) {
                alert(res.data.msg)
                window.location.href = 'http://localhost:8080/'
            } else {
                alert(res.data.msg)
            }
        })
    }
}

// 有名导出
export const handleSend2 = function handleSend2() {  // 这里如果使用匿名函数,由于匿名函数没有this,在别的组件中使用会导致获取不了数据。
    axios.post('http://127.0.0.1:8000/api/v1/login/', {username: this.username, password: this.password}).then(res => {
        this.data = res.data
        if (res.data.code === 1000) {
            alert(res.data.msg)
            window.location.href = 'http://localhost:8080/'
        } else {
            alert(res.data.msg)
        }
    })

}

                        
                      

父子通信展示图片

前期准备:

image-20230220164619006

imgFather.vue

                        
                          <template>
  <div> <!-- 注意这个div,别忘了,不然会报错 -->

    <!-- 1. 通过自定义属性url,给子组件传数据(父传子) -->
    <imgShow url="https://img1.baidu.com/it/u=3494536116,3351731546&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
             @sonEvent="eventFunc"></imgShow>

    <!-- 2. 通过自定义事件sonEvent,接受子组件传递的数据,并使用插值语法显示(子传父) -->
    <p>{{ text }}</p>

  </div>
</template>


<script>
import imgShow from "@/components/imgShow"; // 导入子组件
export default {
  name: "imgFather",
  data() {
    return {
      text: null,
    }
  },
  methods: {
    eventFunc(data) {
      this.text = data  // 接受子组件传递的数据data
    }
  },
  components: {
    imgShow,  // 注册子组件
  }
}
</script>

<style scoped>
</style>

                        
                      

imgShow.vue

                        
                          <template>
  <div> <!-- 注意这个div,别忘了,不然会报错 -->

    <img :src="url" alt=""> <!-- 使用父组件通过自定义属性传来的,url变量中的网络地址 -->
    <br>
    <button @click="showImgFunc" >点击显示图片地址</button>

  </div>


</template>

<script>
export default {
  name: "imgShow",
  props:['url'],  // 父传子,可以使用对象写法进行数据校验
  methods:{
    showImgFunc(){
      this.$emit('sonEvent',this.url) // 给父组件传递数据 $emit(子组件事件名,数据)
    }
  },
}
</script>

<style scoped>

</style>

                        
                      

使用插槽展示图片

前期准备:

image-20230220172556933

为页面组件注册路由:

                        
                           {
        path: '/testSlot',
        name: 'testSlot',
        component: () => import('@/views/testSlot')  // 导入testSlot视图
    },

                        
                      

imgSlot.vue

                        
                          <template>
  <div>
    <slot></slot>               <!-- 匿名插槽 -->
    <div class="img-padding">
      <slot name="girl"></slot>   <!-- 有名插槽 -->
    </div>

  </div>

</template>

<script>
export default {
  name: "imgSlot"
}
</script>

<style scoped>

.img-padding {
  width: 500px;
  height: 500px;
  border: 8px outset white;
  border-radius: 50%;
  margin: 20px auto;
  overflow: hidden;
}
</style>

                        
                      

testSlot.vue

                        
                          <template>
  <div>
    <imgSlot>
      <p>这是一张小姐姐图片:</p>  <!-- 使用匿名插槽 -->

      <div slot="girl">        <!-- 使用有名插槽 -->
        <img src="https://inews.gtimg.com/newsapp_bt/0/14043245848/641" alt="">
      </div>
    </imgSlot>
  </div>

</template>

<script>
import imgSlot from "@/components/imgSlot";

export default {
  name: "testSlot",
  components: {
    imgSlot,
  }
}
</script>

<style scoped>

</style>

                        
                      

最后此篇关于【Vue】vue项目目录介绍es6的导入导出语法vue项目开发规范Vue项目编写步骤的文章就讲到这里了,如果你想了解更多关于【Vue】vue项目目录介绍es6的导入导出语法vue项目开发规范Vue项目编写步骤的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com