首页 > 其他分享 >Vue进阶用法2

Vue进阶用法2

时间:2023-08-01 22:12:03浏览次数:40  
标签:vue 进阶 js Vue localStorage 组件 用法 name

Vue进阶用法2

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项目的配置文件

es6的导入导出语法

# 如果要导入,必须先导出
	-默认导出
    -命名导出
# 默认导出写法
	1 写一个js ,在js中定义变量,函数,最后使用export defalut 导出
    export default {
        name: '彭于晏',
        printName () {
            console.log(this.name)
        }
    }
    2 在想使用的js中,导入
    import 随便起 from './lqz/utils'
    
    
#命名导出和导入
    1 写一个js ,在js中定义变量,函数,最后使用export  导出
    export const name = '刘亦菲'
    export const printName = () => {
        console.log('星象衔新宠')
    }
    2 在想使用的js中,导入
    import {printName} from './lqz/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
	-npm install axios --S
    
# 导入使用
	
	import axios from 'axios'
	
# 发送请求,获取数据
    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',
        )

        

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: '彭于晏'
        }
      },
        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,第二个以后的参数是插件使用者传递的数据

# 使用步骤
	-写一个 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样式

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

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>

集成elementui

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

标签:vue,进阶,js,Vue,localStorage,组件,用法,name
From: https://www.cnblogs.com/joseph-bright/p/17599234.html

相关文章

  • Vue进阶用法3
    Vue进阶用法3Vuex的使用#vue的插件,增强了vue的功能,在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信#Vuex的使用流程 -state:存数据的地址-actions:服务员,中转站......
  • Vue组件可以使用v-model实现双向数据绑定
    Vue组件可以使用v-model实现双向数据绑定。在组件中,可以在props中定义一个value属性,并在组件中的对应位置使用v-model进行绑定。例如:Copy<template><div><input:value="value"@input="$emit('input',$event.target.value)"></div></template......
  • 讲一讲我用vscode生成的Vue工程
    近照官网教程,先建立一个文件夹,然后用vscode打开,然后执行 npminitvue@latest命令出现页面我全部选择NO,那些组件用到之后再往进加,要么太乱了然后录入自己要创建的项目名称,我的名称起名myvue,注意项目名称不识别大写然后执行命令:cd myvue  再执行命令   npminstal......
  • vue3路由的两种引入方式useRouter和router进行页面跳转
    1.在vue3中有两种路由的引入方式第一种import{useRouter}from'vue-router'constuse_router=useRouter()use_router.push('/pathName')第二种importrouterfrom'@/router'router.push('/pathName') 2.两种方式的区别2.1.第一种方式的使用位置在vue......
  • JSON格式电商数据API接口,便捷式用法
    item_search-按关键字搜索商品请求参数注册Key和secret测试请求参数:q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=40&seller_info=no&nick=&seller_info=&nick=&ppath=&imgid=&filter=参数说明:q:搜索关键字cat:......
  • PHPJSON解析 原理与用法
    PHPJSON解析原理与用法在现代编程语言中,JSON已经成为最流行的数据交换格式之一。而PHP作为一门流行的服务器端编程语言,自然也提供了一套完整的JSON解析库。本文将介绍PHPJSON解析的原理与用法,以帮助PHP开发者更好地使用JSON格式数据进行开发。什么是JSON?JSON代表“JavaScript......
  • v-model 用法详解
    基础用法v-model是vue的一个基础指令,用于表单的双向数据绑定<inputv-model="message"placeholder="editme"><p>Messageis:{{message}}</p>v-model原理一个组件上的v-model默认会利用名为value的prop和名为input的事件<inputv-model="searchText"......
  • vue3之父组件中封了子组件的抽屉(弹框类),通过update:modelValue来进行父子组件的v-mod
    eg:父组件a.vue<AddAiDrawer:projectId="route.query.id"v-model="addAiShow"title="新增"type="spaceAi"@call-back-table="refreshTa......
  • vuex和Pinia使用上的区别-Vue3推荐上Pinia
    Vuex和Pinia都是Vue.js状态管理库,可以管理组件之间的共享状态。它们的区别在于实现方式和API设计。Vuex是Vue.js的官方状态管理库,采用集中式的方式管理全局的状态。在Vuex中,应用程序的状态存储在一个单一的store中,组件只能通过dispatch、commit等方法来修改store中的状态。Vuex还提......
  • 深度长文整理-Redis进阶
    目录一、基础二、为什么Redis是单线程的?三、为什么单线程这么快?四、select、poll、epoll五、Redis的事务六、Redis的监控七、Redis的配置文件八、Redis的持久化8.1、fork()系统调用8.2、RDB8.3、AOF8.4、RDB和AOF的选择九、发布订阅十、主从复制十一、集群搭建及小实验11.1、架构一......