园龄：2年5个月粉丝：20 关注：33

vueprops其他，混入mixin，插件，elementui使用，vuex，vue Router，localStorage系列

内容回顾

nodejs后端语言》js语法》node,npm命令

npm命令下载模块慢

淘宝的cnpm以后使用npm的地方都可以使用cnpm

安装vue-cli创建项目

vue项目的运行依赖于node环境》后期如果上线，服务器上就不装node

创建vue项目，把vue的项目编译成纯html,css,js

cnpm install -g @vue/cli

释放出一个可执行文件 vue 已经在环境变量了

vue create 项目名创建项目》babel,vuex vue Router,vue2

vue ui # node启动一个服务，在浏览器中可以图形化界面创建

项目目录结构

node_models 项目第三方依赖项目路径下：cnpm install

publish index.html 小图标

src 代码存放路径

router

store

components 放小组件

view 放页面组件

也可以自定义放页面和小组件

App.vue

main.js

package.json

vue开发流程

以后只需要写组件 xx.vue 把组件导入使用即可

组件有三部分

 <template>
html内容，插值，方法，事件，指令
</template>
 
 
<script>
js代码 export default {任意配置项}
</script>
 
<style scoped> 
css样式
</style>

导入导出语法 es6

写了一些包，想在其他js,xx.vue文件中使用

包下新建xx.js,里面写js代码，只能在内部用，一定要导出外部才能用

默认导出

export default {}

默认导入

import 别名 from ‘路径’

别名.xx

命名导出导出多个

export const name=‘fhq’

export const age =19

命名导入

import {name,age} from ‘路径’

包内如果有index.js,导入包的时候，不用写这个文件

登录小案例

后端》解决跨域》一步一步操作》用django原生需要注释掉csrf》request.post取不到

前端：使用axios，安装，然后导入使用即可

内容详细

纯净vue项目

在router的index.js中删除about的路由

删除所有小组件和about页面组件

App.vue 只留

 <template>
<div id="app">
    <router-view/>
    </div>
</template>

props其他

自定义属性，在子组件中接收传入的数据

方式一：使用数组

props:[‘name’]

方式二：使用对象

props:{name:Number}

方式三：使用对象，默认值和必填

 props:{
    name:{
     	type:'String',   //类型
      	required:true,   //是否为空
            default:'老王'//默认值
    }
}

混入mixin

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

使用步骤：

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

在index.js中写代码（组件中会用到，data,methods）

     2 在 index.js中写 代码（组件中会用到的，data，methods。。。配置项）
        export const lqz = {
            methods: {
                showName() {
                    alert(this.name);   // 没有this.name
                },
            },
            mounted() {
                console.log("你好啊！,页面挂在执行");
            },
        }
   3 局部使用（只在当前组件中使用）
	import {lqz} from '@/mixin'
    # 配置项
    mixins: [lqz]

全局使用（所有组件都可以使用但是要注意，变量名冲突的问题）

 在main.js中导入
然后使用
import mixin from '@/mixin'
 
Vue.mixin(mixin)

插件

功能：用于增强vue

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

 import Vue from 'vue'
import axios from 'axios'
 
export default {
    install(Vue) {
        console.log('执行插件', Vue)
        //自定义指令
        Vue.directive('mybind', {
            //指令与元素成功绑定时
            bind(thisArg, Array) {
                thisArg.value = Array.value
            },
 
            //指令所在元素被插入页面时
            inserted(ele, bind) {
                ele.focus()
            },
            //指令所在模板被重新解析时
            update(ele, bind) {
                ele.value = bind.value
            }
 
        })
        //定义全局变量以后在任何组件中都可以使用，借助于Vue.prototype放到里面
 
 
        Vue.prototype.$name = '张三'
        Vue.prototype.$add = (a, b) => {
            return a + b
        }
        Vue.prototype.$ajax = axios
 
        //全局混入
        Vue.mixin({
            data() {
                return {
                    age: 18
                }
            }
        })
 
 
    },
 
}

然后再main.js中注册

  
import myplugin from '@/plugin'
 
Vue.use(myplugin)

elementui使用

再vue上，css样式，用到最多的是elementui,但还有其他的

elementui 最网页多样式用的多 vue2是饿了么团队开发的

Element - 网站快速成型工具

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

vant 做app的样式

iview pc端用www.iviewui.com

elementui的使用

安装

 cnpm i element-ui -S

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

 import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
ue.use(ElementUI)
 
//以后我们再组件中直接使用elementui提供的全局组件即可

再组件中使用

直接去官网找到想要使用的组件复制粘贴即可

vuex

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

方式1直接增加

 <template>
  <div>
    <hr>
    <button @click="addNum">点我增加数字1</button>
    <hr>
    <h2>{{ $store.state.tomNum }}</h2>
  </div>
</template>
 
<script>
export default {
  name: 'HomeView',
  methods: {
    addNum() {
      //方式义直接增加
      this.$store.state.tomNum++
    }
  }
}
</script>

方式二：正常流程调用dispatch

 <template>
  <div>
    <hr>
    <button @click="addNum">点我增加数字1</button>
    <hr>
    <h2>{{ $store.state.tomNum }}</h2>
  </div>
</template>
 
<script>
export default {
  name: 'HomeView',
  methods: {
    addNum() {
      //方式义直接增加
      // this.$store.state.tomNum++
 
      //方式二正常流程
      this.$store.dispatch('add', 1)
 
    }
  }
}
</script>

store>index.js

 import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
    state: {
        tomNum: 0
    },
    getters: {},
    mutations: {
        add(state, value) {
            console.log(state, value)
            state.tomNum += value
        }
    },
    actions: {
        add(content, value) {
            console.log(content, value)
            content.commit('add', value)
        }
    },
    modules: {}
})

方式三隔一个调用

 <template>
  <div>
    <hr>
    <button @click="addNum">点我增加数字1</button>
    <hr>
    <h2>{{ $store.state.tomNum }}</h2>
  </div>
</template>
 
<script>
export default {
  name: 'HomeView',
  methods: {
    addNum() {
      //方式义直接增加
      // this.$store.state.tomNum++
 
      //方式二正常流程
      // this.$store.dispatch('add', 1)
 
      //方式三隔一个调用
      this.$store.commit('add', 2)
    }
  }
}
</script>

推荐按照正常步骤，因为可以在actions中可向后端发生请求，也可以跨过任意一步

vue Router

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

单页面应用，实现在一个index.html中有页面跳转效果的插件

路由控制

 <router-link>   跳转用
<router-view/>  替换页面组件用

基本使用

创建vue项目式加入了，直接用即可

如果之前没装：先下载，在项目中创建router包，写个index.js，代码复制粘贴过来，main.js配置一下

配置路由的跳转（跳转页面组件），只需要在routers数组中写对象即可

 import HomeView from '../views/HomeView.vue'
import Login from "@/views/Login";
 
 
const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
]
一定要写视图组件与routes中的组件对应上

点击跳转路由的两种方式

方式一

 gologin() {
this.$router.push('/login')
}

方式二

 <template>
  <div>
    <h1>主页面</h1>
    <hr>
    <button @click="addNum">点我增加数字1</button>
    <hr>
    <h2>{{ $store.state.tomNum }}</h2>
    <button @click="gologin">方式一去登录页面</button>
    <router-link to="login">方式二去登陆</router-link>
  </div>
</template>

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

方式一地址栏携带方式

 this.$router.push('/login?pk=1')
 
console.log(this.$route.query.pk)    //当前路由对象

获取数据

 //携带数据方式一的获取数据
this.$route.query.pk拿路径后面?pk=1什么的值
console.log(this.$route)
console.log(this.$route.query.pk)    //当前路由对象
console.log(this.$router)   //所有路由对象

方式二网址携带数据

路由需要配合改变

 //携带数据方式2
{
    path: '/login/:id',
    name: 'login',
    component: Login
}

 //携带数据方式二的获取数据方式
console.log(this.$route)
console.log(this.$route.params.id)

区分this. $r o u t e t h i s .$ router

this.$route 是当前路由对象，内部有传入的参数

this.$router 是new VueRouter对象，实例，可以实现路由的跳转

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

 this.$router.push({
    name: 'login',
    query: {
        name: '张三',
        age: 18
    }
})

 this.$router.push({
    name: 'login',
    // query: {
        //   name: '张三',
        //   age: 18
        // }
    params: {
        id: 1
    }
})

标签形式跳转

 <br>
<router-link :to="{name:'login',query:{name:'123',hobby:'打兔子'}}">标签路由携带数据方式1</router-link>
<br>
<router-link :to="{name:'login',params:{id:12}}">标签路由携带数据方式2</router-link>

同样要对应各自的路由匹配方式

 //携带数据方式1
{
    path: '/login',
    name: 'login',
    component: Login
},
// 携带数据方式2
{
    path: '/login/:id',
    name: 'login',
    component: Login
}

全局路由守卫

全局守卫

前置路由守卫：在进路由前，执行代码

后置路由守卫：路由跳转走，执行代码

使用全局守卫

router/inex.js加入

全局前置路由守卫》任意路由跳转都会触发它的执行

 router.beforeEach((to, from, next) => {
    console.log('to', to)
    //to 是去哪，将要去往的路由对象
    console.log('from', from)
    //from 是来自那，来自哪的路由对象  比如从 /login
    console.log('next', 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

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

 <template>
  <div>
    <h1>localStroage</h1>
    <button @click="addloacal">添加</button>
    <br>
    <button @click="deleteloacal">删除</button>
    <br>
    <button @click="getloacal">查看</button>
 
    <h1>session</h1>
    <button @click="addsession">添加</button>
    <br>
    <button @click="deletesession">删除</button>
    <br>
    <button @click="getsession">查看</button>
    <h1>cookies</h1>
    <button @click="addcookies">添加</button>
    <br>
    <button @click="deletecookies">删除</button>
    <br>
    <button @click="getcookies">查看</button>
 
  </div>
</template>
 
<script>
 
export default {
  name: "LocalSrotage",
  methods: {
    addloacal() {
      var info = JSON.stringify({name: '123', password: '123'})
      localStorage.setItem('user', info)
    },
    deleteloacal() {
      localStorage.removeItem('user')
      // localStorage.clear()  清空
    },
    getloacal() {
 
      var info = localStorage.getItem('user')
      console.log(JSON.parse(info))
    },
    addsession() {
      var info = JSON.stringify({name: '123', password: '123'})
      sessionStorage.setItem('user', info)
    },
    deletesession() {
      sessionStorage.removeItem('user')
      // localStorage.clear()  清空
    },
    getsession() {
 
      var info = sessionStorage.getItem('user')
      console.log(JSON.parse(info))
    },
    addcookies() {
      var info = JSON.stringify({name: '123', password: '123'})
      // sessionStorage.setItem('user', info)
      this.$cookies.set('user', info, 0)  //不设置时间默认是一天
    },
    deletecookies() {
      // sessionStorage.removeItem('user')
      // localStorage.clear()  清空
      this.$cookies.remove('user')
    },
    getcookies() {
 
      var info = this.$cookies.get('user')
      console.log(typeof info)
    },
 
  }
}
</script>
 
<style scoped>
 
</style>

 # 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
    需要在main.js中注册插件
import cookies from 'vue-cookies'
 
Vue.use(cookies)
    
    
    
    -this.$cookies.set('userinfo', JSON.stringify(this.userInfo))
    -this.$cookies.get('userinfo')
    -this.$cookies.remove('userinfo')

上一篇vuecli创建项目，vue项目介绍，二是导入导出语法，小练习登录功能，scoped

下一篇vue3介绍，vue3创建项目，setup函数，ref和reactive,计算属性监听属性，生命周期，torefs，vue后台管理模板

本文作者：clever-cat

本文链接：https://www.cnblogs.com/clever-cat/p/17142716.html

posted @ 2023-02-21 22:18 clever-cat 阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

	<template>
	html内容，插值，方法，事件，指令
	</template>


	<script>
	js代码 export default {任意配置项}
	</script>

	<style scoped>
	css样式
	</style>

	props:{
	name:{
	type:'String', //类型
	required:true, //是否为空
	default:'老王'//默认值
	}
	}

	2 在 index.js中写代码（组件中会用到的，data，methods。。。配置项）
	export const lqz = {
	methods: {
	showName() {
	alert(this.name); // 没有this.name
	},
	},
	mounted() {
	console.log("你好啊！,页面挂在执行");
	},
	}
	3 局部使用（只在当前组件中使用）
	import {lqz} from '@/mixin'
	# 配置项
	mixins: [lqz]

	在main.js中导入
	然后使用
	import mixin from '@/mixin'

	Vue.mixin(mixin)

	import Vue from 'vue'
	import axios from 'axios'

	export default {
	install(Vue) {
	console.log('执行插件', Vue)
	//自定义指令
	Vue.directive('mybind', {
	//指令与元素成功绑定时
	bind(thisArg, Array) {
	thisArg.value = Array.value
	},

	//指令所在元素被插入页面时
	inserted(ele, bind) {
	ele.focus()
	},
	//指令所在模板被重新解析时
	update(ele, bind) {
	ele.value = bind.value
	}

	})
	//定义全局变量以后在任何组件中都可以使用，借助于Vue.prototype放到里面


	Vue.prototype.$name = '张三'
	Vue.prototype.$add = (a, b) => {
	return a + b
	}
	Vue.prototype.$ajax = axios

	//全局混入
	Vue.mixin({
	data() {
	return {
	age: 18
	}
	}
	})


	},

	}

	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	ue.use(ElementUI)

	//以后我们再组件中直接使用elementui提供的全局组件即可

	<template>
	<div>
	<hr>
	<button @click="addNum">点我增加数字1</button>
	<hr>
	<h2>{{ $store.state.tomNum }}</h2>
	</div>
	</template>

	<script>
	export default {
	name: 'HomeView',
	methods: {
	addNum() {
	//方式义直接增加
	this.$store.state.tomNum++
	}
	}
	}
	</script>

	import Vue from 'vue'
	import Vuex from 'vuex'

	Vue.use(Vuex)

	export default new Vuex.Store({
	state: {
	tomNum: 0
	},
	getters: {},
	mutations: {
	add(state, value) {
	console.log(state, value)
	state.tomNum += value
	}
	},
	actions: {
	add(content, value) {
	console.log(content, value)
	content.commit('add', value)
	}
	},
	modules: {}
	})

	import HomeView from '../views/HomeView.vue'
	import Login from "@/views/Login";


	const routes = [
	{
	path: '/',
	name: 'home',
	component: HomeView
	},
	{
	path: '/login',
	name: 'login',
	component: Login
	}
	]
	一定要写视图组件与routes中的组件对应上

	<template>
	<div>
	<h1>主页面</h1>
	<hr>
	<button @click="addNum">点我增加数字1</button>
	<hr>
	<h2>{{ $store.state.tomNum }}</h2>
	<button @click="gologin">方式一去登录页面</button>
	<router-link to="login">方式二去登陆</router-link>
	</div>
	</template>

	this.$router.push('/login?pk=1')

	console.log(this.$route.query.pk) //当前路由对象

	//携带数据方式一的获取数据
	this.$route.query.pk拿路径后面?pk=1什么的值
	console.log(this.$route)
	console.log(this.$route.query.pk) //当前路由对象
	console.log(this.$router) //所有路由对象

	//携带数据方式2
	{
	path: '/login/:id',
	name: 'login',
	component: Login
	}

	//携带数据方式二的获取数据方式
	console.log(this.$route)
	console.log(this.$route.params.id)

	this.$router.push({
	name: 'login',
	query: {
	name: '张三',
	age: 18
	}
	})

	this.$router.push({
	name: 'login',
	// query: {
	// name: '张三',
	// age: 18
	// }
	params: {
	id: 1
	}
	})

	<br>
	<router-link :to="{name:'login',query:{name:'123',hobby:'打兔子'}}">标签路由携带数据方式1</router-link>
	<br>
	<router-link :to="{name:'login',params:{id:12}}">标签路由携带数据方式2</router-link>

	//携带数据方式1
	{
	path: '/login',
	name: 'login',
	component: Login
	},
	// 携带数据方式2
	{
	path: '/login/:id',
	name: 'login',
	component: Login
	}

	router.beforeEach((to, from, next) => {
	console.log('to', to)
	//to 是去哪，将要去往的路由对象
	console.log('from', from)
	//from 是来自那，来自哪的路由对象比如从 /login
	console.log('next', 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')
	}
	}
	})

	<template>
	<div>
	<h1>localStroage</h1>
	<button @click="addloacal">添加</button>
	<br>
	<button @click="deleteloacal">删除</button>
	<br>
	<button @click="getloacal">查看</button>

	<h1>session</h1>
	<button @click="addsession">添加</button>
	<br>
	<button @click="deletesession">删除</button>
	<br>
	<button @click="getsession">查看</button>
	<h1>cookies</h1>
	<button @click="addcookies">添加</button>
	<br>
	<button @click="deletecookies">删除</button>
	<br>
	<button @click="getcookies">查看</button>

	</div>
	</template>

	<script>

	export default {
	name: "LocalSrotage",
	methods: {
	addloacal() {
	var info = JSON.stringify({name: '123', password: '123'})
	localStorage.setItem('user', info)
	},
	deleteloacal() {
	localStorage.removeItem('user')
	// localStorage.clear() 清空
	},
	getloacal() {

	var info = localStorage.getItem('user')
	console.log(JSON.parse(info))
	},
	addsession() {
	var info = JSON.stringify({name: '123', password: '123'})
	sessionStorage.setItem('user', info)
	},
	deletesession() {
	sessionStorage.removeItem('user')
	// localStorage.clear() 清空
	},
	getsession() {

	var info = sessionStorage.getItem('user')
	console.log(JSON.parse(info))
	},
	addcookies() {
	var info = JSON.stringify({name: '123', password: '123'})
	// sessionStorage.setItem('user', info)
	this.$cookies.set('user', info, 0) //不设置时间默认是一天
	},
	deletecookies() {
	// sessionStorage.removeItem('user')
	// localStorage.clear() 清空
	this.$cookies.remove('user')
	},
	getcookies() {

	var info = this.$cookies.get('user')
	console.log(typeof info)
	},

	}
	}
	</script>

	<style scoped>

	</style>

clever-cat