【混入】
# mixin(混入)
功能：可以把多个组件共用的配置提取成一个混入对象,不需要在每个组件中都写了
使用步骤
。
。
。
【插件】
1 # 1 写plugins/index.js
2 import Vue from "vue";
3 import axios from "axios";
4 import hunru from "@/mixin";
5 export default {
6 install(a,name) {
7 console.log('----------',name)
8
9 // 1 定义全局变量,放到原型中
10 // prototype 原型链,一般定义在原型中的变量，都用 $ 开头，防止污染---》对象中可以定义同名属性，冲突
11 Vue.prototype.$axios = axios
12 // Vue.prototype.$BASE_URL='http://127.0.0.1:8000/'
13
14
15 // 2 定义指令 自定义指令
16 //定义全局指令：跟v-bind一样，获取焦点
17 Vue.directive("fbind", {
18 //指令与元素成功绑定时（一上来）
19 bind(element, binding) {
20 element.value = binding.value;
21 },
22 //指令所在元素被插入页面时
23 inserted(element, binding) {
24 element.focus();
25 },
26 //指令所在的模板被重新解析时
27 update(element, binding) {
28 element.value = binding.value;
29 },
30 });
31
32 // 3 使用混入
33 Vue.mixin(hunru)
34 // 4 定义全局组件--》elementui
35 }
36 }
1 # 3 在main.js中使用，可以传参数 2 # 1 使用自定义插件 3 import my from '@/plugins' 4 Vue.use(my,'lqz') // 内部本质会执行install
==========================================
-有些第三方插件，用了以后，增强了vue功能
-this.$router
-全局组件 ：el-button
-this.$message--->
-this.$http.get。
。
。
【插槽】
1 # 1 新建组件，定义插槽 2 <template> 3 <div class="helloworld"> 4 <h2>我是hello world</h2> 5 <slot name="a"></slot> 6 <h2>结束了</h2> 7 <slot name="b"></slot> 8 9 </div> 10 11 </template> 12 ============================================ 13 # 2 使用组件，使用插槽 14 <template> 15 <div class="home"> 16 <h1>首页</h1> 17 <HelloWorld> 18 <template v-slot:a> 19 <div>html结构2</div> 20 </template> 21 22 <template v-slot:b> 23 <img src="@/assets/logo.png" alt=""> 24 </template> 25 26 </HelloWorld> 27 28 </div> 29 </template>
。
。
。
【vuex】
【本地存储】
# 登录成功---》token存储 cookie：登录信息放这里，有过期事件，一旦过期，就没了
sessionStorage：当前浏览器生效---》关闭浏览器，数据就没了
localStorage：永久生效，除非代码删除或清空浏览器缓存 -未登录，加购物车
# cookie 需要下载 cnpm install vue-cookies -S
1 <template>
2 <div class="home">
3 <h1>首页</h1>
4 <h2>localStorage的使用</h2>
5 <button @click="handleSaveLocalStorage">存储到localStorage</button>
6 <button @click="handleGetLocalStorage">从localStorage取出</button>
7 <button @click="handleDeleteLocalStorage">删除localStorage</button>
8
9 <h2>sessionStorage使用</h2>
10 <button @click="handleSavesessionStorage">存储到sessionStorage</button>
11 <button @click="handleGetsessionStorage">从sessionStorage取出</button>
12 <button @click="handleDeletesessionStorage">删除sessionStorage</button>
13 <h2>cookie使用</h2>
14 <!-- -->
15 <button @click="handleSaveCookie">存储到cookie</button>
16 <button @click="handleGetCookie">从cookie取出</button>
17 <button @click="handleDeleteCookie">删除cookie</button>
18
19 </div>
20 </template>
21
22 <script>
23 export default {
24 name: 'HomeView',
25 methods: {
26 handleSaveLocalStorage() {
27 localStorage.setItem("name", 'wxx')
28 let user = {
29 name: 'xxx',
30 age: 19
31 }
32 localStorage.setItem("user", JSON.stringify(user)) // 不要放对象
33
34 },
35 handleGetLocalStorage() {
36 let name = localStorage.getItem("name")
37 let user = localStorage.getItem('user')
38 console.log(name)
39 console.log(user)
40 console.log(typeof user)
41
42 },
43 handleDeleteLocalStorage() {
44 localStorage.removeItem('name')
45 localStorage.clear()
46
47 },
48
49
50 handleSavesessionStorage() {
51 sessionStorage.setItem("name", '彭于晏')
52 },
53 handleGetsessionStorage() {
54 let name = sessionStorage.getItem('name')
55 console.log(name)
56 },
57 handleDeletesessionStorage() {
58 sessionStorage.removeItem('name')
59 sessionStorage.clear()
60 },
61
62 handleSaveCookie() {
63 this.$cookies.set('name', 'zzzz', '1h')
64 },
65 handleGetCookie() {
66 let name = this.$cookies.get('name')
67 console.log(name)
68 },
69 handleDeleteCookie() {
70 this.$cookies.remove('name')
71
72 },
73 }
74 }
75 </script>