最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

vue-cli安装依赖 props属性三种方式 混入迷信 插件 elementUI vuex vue Routerd localStorage系列

来源：博客园
目录
  • 回顾
  • vue-cli安装依赖
  • props属性三种方式总结
  • 混入mixin
  • 插件
  • elementui
    • elementui的使用
  • vuex
    • 使用步骤
  • vue Router
    • 基本使用
    • 点击跳转路由两种方式
    • 路由跳转，携带数据的两种方式
    • 区分this.$routethis.$router
    • 两种跳转方式，使用对象方式
    • 路由守卫
  • localStorage系列
    • localStorage
    • sessionStorage
    • cookie

回顾

# 1 nodejs 后端语言 --->>> js语法 --->>> node，npm命令-npm命令下载模块慢  淘宝的cnpm，以后使用npm的地方都可以使用cnpm    # 2 安装vue-cli创建项目-vue项目的运行依赖于node环境 --->>> 后期上线，服务器上装node?  -创建vue项目，把vue的项目编译成纯html,css,js  cnpm install -g @vue/cli    释放出来一个可执行文件vue，已经在环境变量了    vue create 项目名 # 创建项目 --->>> babel，vue-router,vuex,vue2    vue ui # node 启动一个服务，在浏览器中可以图形化界面创建    # 项目目录结构node_models # 项目第三方依赖项目路径下：cnpm install  public# index.html 图标  src# 代码存放路径  router    store      方页面组件和小组件    APP.vue    main.js  package.json  # 5 vue开发流程以后只需要写组件 xx.vue，把组件导入使用即可 组件有三部分  -    -<script> js 代码   export default {之前学过的配置项}</script>    -    # 6 导入导出语法 es6写了一些包，想在其他js,xx.vue文件中使用  包下新建xx.js，里面写js代码，只能在内部用，一定要导出外部才能用        默认导出    export default {}    默认导入    import 别名 from "路径"      别名.xx           命名导出  导出多个   export const name="lqz"      export const age=19           命名导入    import {name,age} from "路径"         包内如果有index.js,导入包的时候，不用写这个文件  # 7 登录小案例后端 --->>> 解决跨域 --->>>  一步一步操作 --->>> 注释掉csrf --->>> request.post 取不到  前端：    使用axios,安装      导入用即可

vue-cli安装依赖

# 安装依赖(要到文件位置执行该指令)cnpm install# 做成纯净的vue项目-在router 的index.js 中删除about的路由    -删除所有小组件和about页面组件    -App.vue 只留

如图创建文件时是红色的

可以来项目路径下，将git文件删除。之后就不会再有颜色了


(相关资料图)

props属性三种方式总结

# 自定义属性，在子组件中接收传入的数据    # 方式一：使用数组 props:["name"]#方式二：使用对象 props: {name: Number}# 方式三：使用对象，默认值和必填  props: {    name: {      type: String, //类型      required: true, //必要性      default: "老王" //默认值    }  }

父传子：父组件传给子组件，在子组件标签上面自定义属性，再将父组件的数据赋给自定义的属性名，在子组件配置项props里注册其自定义的属性名，这样在子组件用这个注册的属性名就是父组件传来的数据了。

用法：

父组件中将name传给子组件中

子组件中：用法一和用法二

如下用法二报错：

用法三：

子组件中：可以指定接收类型或者不传值，使用设定的默认值

父组件中：

混入mixin

可以把多个组件公用的配置提取成一个混入对象

使用步骤：

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

2.在index.js中写代码(组件中会用到的data, methods。。。等的配置项)，命名导出

3.全局使用(所有组件都可以说使用)，在main.js中。命名导入

4.局部使用(只在当前最组件中使用)

效果：

插件

功能：用于增强Vue

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

使用步骤：

1.新建包plugins,新建index.js

import Vue from "vue";    import axios from "axios";    export default {        install(vue) {            console.log("执行了插件", vue)            # 可以做的事            #  1 了解，自定义指令(不了解没关系)            #  2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax  就是axios对象            #  3 使用全局混入            #  4 自定义全局组件        }    }

代码：

import Vue from "vue";import axios from "axios";export default {    install(vue,name) {   // name是指传的其他参数可有可无        console.log(name)        console.log("执行了插件", vue)        // 可以做的事        // 1 了解，自定义指令(不了解没关系)        Vue.directive("fbind", {            //指令与元素成功绑定时（一上来）            bind(element, binding) {                element.value = binding.value;            },            //指令所在元素被插入页面时            inserted(element, binding) {                element.focus();            },            //指令所在的模板被重新解析时            update(element, binding) {                element.value = binding.value;            },        })        // 2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要如：this.$ajax  就是axios对象        Vue.prototype.$name = "彭于晏"      # 联想python中往类里面添加属性，这样类、对象都可以使用了，而Vue里添加得通过prototype。使用$符来避免污染        # prototype：vue的原型，往vue的原型里放东西，而不是直接往它的类里放东西        Vue.prototype.$add = (a, b) => {            return a + b        }        Vue.prototype.$ajax=axios        // 3 使用全局混入         Vue.mixin({            data() {                return {                    name: "彭于晏",                    age: 19,                };            },        });        // 4 自定义全局组件        // Vue.component("child",{        //        // })    }}

2.在main.js中配置

# 使用自定义插件import plugin from "@/plugins"Vue,use(plugin)

elementui

# 在vue上，css样式，用的最多的是elementUI。但是还有其他的elementUI做网页端 样式用的多 vue2de 由饿了么团队开发的  elementUI-plus第三方团队继续基于vue写的  vant做app的样式  iviewpc端用  www.iviewui.com

elementui的使用

1.安装

cnpm i element-ui -s

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

import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";Vue.use(ElementUI)  # 这样以后在咱们组件中直接使用elementui提供的全局组件即可

3.在组件中使用

去官网看到好的，赋值粘贴到你的项目中

vuex

在vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读 / 写)，也是一种组件间通信的方式，且适用于任意组件间通信

使用步骤

1.安装，新建store/index.js

2.在index.js中写

export default new Vuex.Store({  state: {    # 放数据  },  mutations: {    # 放方法，正常是让actions中来调用    # 组件也可以直接调用  },  actions: {    # 放方法，正常组件调用  }})

3.在组件中

显示state的变量html中：{{$store.state.变量}}js中：this.$store.state.变量修改state中的值  -推荐按正常步骤---》this.$store.dispatch("actions中的方法",参数)---》actions中的方法调用 context.commit("mutations",参数)---》在mutations中直接修改state的值-可以跨过任何一步this.$store.commit()this.$store.state.变量名

vue Router

第三方插件，用来实现SPA 的vue 插件

单页面应用 --->>> 实现在一个index.html 中有页面跳转效果的插件路由控制-   跳转用-  替换页面组件用

基本使用

1.创建vue项目时加入了，直接用即可

如果之前那没装：先下载，在项目中创建router包。写个index.js，代码copy过来，main.js写一下

2.配置路由的跳转(跳转页面组件)，只需要在routers组件中写对象即可

const routes = [            {                path: "/",                name: "index",                component: Index            },            {                path: "/home",                name: "home",                component: Home            }        ]

3.一定要写个视图组件 Home

点击跳转路由两种方式

js控制this.$router.push("路径")标签控制

路由跳转，携带数据的两种方式

-1 /course/?pk=1  带在路径中使用 ? 携带    -2 /course/1/     路径中分割的        -1 第一种方式：/course/?pk=1    this.$route.query.pk    -2 第二种方式：/course/1/     - router/index中路径得改             {                path: "/login/:id",                name: "login",                component: Login            },      -this.$route.params.id

区分this.$routethis.$router

-this.$router #   new VueRouter对象，实例，可以实现路由的跳转-this.$route  #   是当前路由对象，内部有传入的参数

两种跳转方式，使用对象方式

-this.$router.push({        name: "login",        // query: {        //   name: "lqz",        //   age: 19        // },        params: {          id: 88        }      }) # 这里可以写个对象            -标签形式跳转，传对象形式

路由守卫

全局守卫        -前置路由守卫：在进路由前，执行代码        -后置路由守卫：路由跳转走，执行代码                    如何用：router/index.js 加入    // 全局前置路由守卫--->任意路由跳转都会触发它的执行router.beforeEach((to, from, next) => {    // to 是去哪，哪个路由对象    // from 是来自哪，是哪个路由对象  比如从  /--->/login    // next 是函数，如果加括号执行，就会真正的过去    console.log("前置路由守卫", to, from, next)    // next() // 真正跳转到 要去的路径    if (to.name == "login") {        console.log("走了")        next()    } else {        var res = localStorage.getItem("userinfo")        if (res) {            next()        } else {            alert("您没有登录")            // 跳转到login--->没有解决---》你们搜一下如何解决            // console.log(this)            // router.push("/login")        }    }})

localStorage系列

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

-登录成功 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") 
-有过期时间，到过期时间自动清理    -借助于第三方 vue-cookies    -cookies.set("userinfo", JSON.stringify(this.userInfo))    -cookies.get("userinfo")    -cookies.delete("userinfo")

关键词： 两种方式 可以使用