今日学习内容

一、vue项目目录介绍

myfirstvue				项目名字
	-node_modules		文件夹,内部有很多当前依赖的模块,可以删除,但是想恢复就需要敲:npm install
    -publice			文件夹
    	* favicon.icon	

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
babel.config.js
jsconfig.json
-git的忽略文件
-babel的配置
package.json 重要:类似于python项目的requirements.txt 当前项目所有依赖
package-lock.json #锁定文件:package.json中写了依赖的版本,这个文件锁定所有版本
README.md # 读我,项目的介绍
vue.config.js # vue项目的配置文件

二、es6的导入导出语法

如果要导入,必须先导出

  • 默认导出
  • 命名导出

默认导出导入写法

  1. 写一个js,在js中定义变量、函数,最后使用export defalut 导出

    export default {
        name:"肖战",
        printName(){
            console.log(this.name)
        }
    }
    
  2. 在想使用的js中导入

    import xxx from './xz/utils'

命名导出导入写法

  1. 写一个js,在js中定义变量、函数,最后使用export 导出

    export const name = '刘诗诗'
    export const printName = () =>{
        console.log('妙蛙~~~~')
    }
    
  2. 在想使用的js中导入

    import {printName} from './xz/utils'

在包下可以建立一个名为index.js的文件,以后导入的时候,会默认找它。

​ 对比python中得 __init__.py

三、vue项目开发规范

以后写的组件,都是单页面组件,使用 xx.vue 以后写一个组件就是一个 xx.vue,页面组件和小组件

以后一个组件就是一个 xx.vue, 内部都有三个部分

-<template></template>  # html内容写在里面
-<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项目集成axios,vue项目前后端打通

安装axios

1. 安装axios
	npm install axios --S

2. 导入使用
	import axios from 'axios'
3. 发送请求,获取数据
	axios.get('http://127.0.0.1:8000/books/').then(res => {
        console.log(res.data)
        this.bookList = res.data
    })

解决跨域问题(drf)

1. pip 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',
        )

前后端交互版登录功能

五、props配置项

接受父传子自定义的属性

  1. 数组写法
  2. 对象写法
  3. 对象套对象写法

写法总结

普通使用: props:['msg']
        
属性验证: props:{msg:String},
 
指定类型,必填和默认值

props:{
    msg:{
        type:String, //类型
        required:true, //必要性
        default:'老王' // 默认值
    }
}

六、混入

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

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

使用步骤

1. 写一个mixin/index.js
export const hunhe = {
    data(){
        return{
            name = 'xz'
        }
    },
    methods: {
        handlePrintName() {
            alert(this.name)
        }
    },
}

2. 局部导入:在组件中
	import {hunhe} from "@/mixin";
    mixins:[hunhe,]

3. 全局使用,在main.js 中  以后所有组件都可以用
	import {hunhe} from "@/mixin";
	Vue.mixin(hunhe)

七、插件

功能:用于增强Vue

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

使用步骤

1. 写一个 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. 以后再组件中可以直接用插件中写的东西

八、scoped样式

在 style 上写 <style scoped> </style> 以后只针对当前组件生效

九、localStorage和sessionStorage

  • window 浏览器对象的东西

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

    1. 永久存储:localStorage 不登录加购物车,没登录,搜索过的商品
    2. 关闭页面数据就没了(临时存储):sessionStorage
    3. 设定一个时间,到时候就过期:cookie
    
  • 补充:序列化和反序列化

    1. 对象转json字符串
    	JSON.stringify(person)
    
    2. 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>

十、集成elementui

第三方、样式库、常见的

1. 饿了么团队:elementui
2. iview
3. 移动端的ui:vant

使用步骤

1. 安装 npm i element-ui -S
2. 在main.js

原文地址:http://www.cnblogs.com/bjyxxc/p/16846229.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性