- 博客(26)
- 收藏
- 关注
RSS订阅原创 学习笔记Vue（二十四）——vuex module
为了使我们每个页面组件的state分离开，可以使用modules来给vuex分模块。先在src文件夹下创建一个store文件夹，用来存放我们的模块文件，然后把store.js也放到这个文件夹下，作为入口文件。然后不要忘了修改main.js里引入store.js的路径import Vue from 'vue'import App from './App.vue'import router...
2019-07-21 16:19:28
289
1
原创 学习笔记Vue（二十三）——vuex mutation & action
一、mutation直接在组件中修改vuex的state值在严格模式下是不允许的，需要通过mutation来对state中的值进行操作，不然会报错，提示你使用mutation。mutations里可以放函数，通过在组件的methods里使用$store.commit(‘函数名’)来执行mutations里的函数。还可以在commit的时候给mutations函数传参，写做一个对象的形式：s...
2019-07-21 13:01:49
164
原创 学习笔记Vue（二十二）—— 使用vuex组件通信（state&mapState getter&mapGetter）
使用vuex进行组建间通信：可以把vuex看作一个仓库，每一个组件都从仓库里去拿这同一个数据，一个组件的数据更改了，别的也都更改了，便于组件间信息的共享。安装vuex指令：vue add vuex安装完成后会发现文件列表多了一个叫store.js的文件，这个就是vuex的文件。store.js:import Vue from 'vue'import Vuex from 'vuex'...
2019-07-21 13:00:18
348
原创 学习笔记Vue（二十一）—— 路由元信息
在定义路由的时候可以设置一个meta字段，里面是我们想要校验的值，比如页面上的某两个模块需要登录后才能查看，我们就在这两个路由上设置meta：{ path: '/learn', name: 'learn', meta: { //路由元信息 login: true }, component: ()=>{ ...
2019-07-14 20:29:53
157
原创 学习笔记Vue（二 十）—— 路由独享守卫和全局守卫以及路由导航解析过程
上一篇讲的是组件内守卫，路由还有独享守卫和全局守卫。一、路由独享守卫在路由配置的的时候可以设置该路径的独享守卫： { path: '/home', name: 'home', component: Home, //路由独享守卫 beforeEnter(to, from, next){ next(); ...
2019-07-14 19:28:19
412
原创 学习笔记Vue（十 九）—— 路由导航守卫&动态路由
一、路由导航守卫路由导航守卫也就是路由的钩子函数：1.beforeRouteLeave比如在某些信息收集网页，用户填写信息后不小心点到了别的地方，此时应该给出一个提示信息，是否离开此页，不然之前填写的信息就都白填了，就可以用beforeRouteLeave这个函数：有三个参数，to，from，和next，to： 你要跳转到的路径信息，from：从哪里跳转走的路径信息，next：写了路...
2019-07-14 18:43:51
545
原创 学习笔记Vue（十 八）—— 嵌套路由
延续之前的路由，如果我想在student模块里再加一个路由链接到具体的某个学生的信息，就要使用嵌套路由。例如：第一步：在student路由里加一个children属性，用来配置子路由，children里的写法和正常配置路由一样，也是有path，name，component，不同的是子路由的path可以直接写一个名，例如amy，在页面上的路由就会加上他的父级，显示成：/student/a...
2019-07-14 16:48:21
113
原创 学习笔记Vue（十 七）—— 路由
首先添加路由：vue add router添加完成之后，vue的默认界面上面多了一条导航：这就是vue默认帮你生成的导航。可以看到项目的src文件夹下多了一个router.js文件，和一个views的文件夹。可以看到views里默认有两个自动生成的文件，Home.vue 和About.vue ，对应页面上显示的两个导航，所以这个views里放的就是路由的组件。再看router.js的...
2019-07-13 21:36:04
185
原创 学习笔记Vue（十 六）—— 用脚手架来搭建vue项目
创建项目：vue create [项目名]用vue ui创建项目：命令行输入vue ui 会打开一个页面，可以在这个页面里创建项目，启动服务等。添加路由：vue add router
2019-07-13 20:21:39
119
原创 学习笔记Vue（十 五）—— 用vue写一个树型组件
树形组件在文件管理系统里很常见，大概类似：实现树型组件主要是循环利用组件，用一个数组标记需要展开的是哪一个节点下面的内容，App.vue<template> <tree :tree-data="treeData"></tree></template><script> import Tree from './T...
2019-07-13 16:24:36
476
原创 学习笔记Vue（十 四）—— 用vue写一个日历组件
先看一下实现的效果：实现日历的逻辑：先写出日历的大致结构，分两个部分，头部和主体部分，日历先显示6排7列，总共42个数字，按从1到42来显示：<div class="every-day" v-for="item in 42" :key="item"></div>像这样：然后获取当前日期是星期几，用日历中的数字减去这个数字，就使得1号在正确的位置上显示了。...
2019-07-11 22:34:19
549
原创 学习笔记Vue（十 三）—— 安装脚手架
使用npm安装vue脚手架：npm install -g @vue/cli 安装脚手架，用于生成项目npm install -g @vue/cli-service-global 快速原型开发 编译vue文件如果之前已经安装旧版本，卸载旧版本指令：npm uninstall vue cli-g如果仍要使用旧版本，可以全局安装一个桥接工具：npm install -g @vue/cl...
2019-07-09 22:02:41
446
原创 学习笔记Vue（十 二）—— v-slot 插槽
v-slot可以将components标签里面的文字内容替换到指定的位置。用文字叙述不太清楚，还是用特定的场景来描述吧。比如你有一个button组件，你想让他根据不同的需求显示不同的文字，使他的可复用性更高：<body> <!-- v-slot 插槽 --> <!-- 简写 # --> <div id="app"> ...
2019-07-09 21:18:41
2188
1
原创 学习笔记Vue（十 一）—— 组件通信（二）兄弟之间通信
通过在一个组件上触发事件，兄弟组件监听该事件，来传递数据。在Vue实例上创建一个事件总线（event bus），通过把事件交由该event bus来处理，并由兄弟组件监听event bus上的事件来在兄弟组件间进行通信。实例：<body> <div id="app"> <my-input></my-input> ...
2019-07-09 20:49:06
108
原创 学习笔记Vue（十）—— 组件通信
一、在子组件中获取父组件的数据1.通过$attr$attrs包含的是组件没有被注册到prop上的属性，可以将父组件没有用过的值通过v-bind直接传递给子组件代码：<body> <div id="app"> <my-content :title="title" :content="content" class="aaa"><...
2019-07-08 21:39:29
135
原创 学习笔记Vue（九）——组件components
组件是可复用的 Vue 实例，且带有一个名字，可以在html中以一个标签的形式使用组件。组件中有自己的data，是一个函数的形式，return一个对象，里面包含的值可以在他的template中使用。template里的内容会渲染在html中的组件标签里。在components里写的组件名要使用小驼峰式写法，但在html标签里要转换成小写中间以一个横杠分隔。例子：全局组件：<bod...
2019-07-06 22:00:34
1202
原创 学习笔记Vue（八）—— 计算属性(computed)和侦听器(watch)
一、计算属性：computed搭配get，set使用，实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。举个例子：实现一个计算器<body> <div id="app"> <input type="text" v-model.number="firstNum">+<input type="te...
2019-07-06 21:30:25
157
原创 学习笔记Vue（七）—— 生命周期
先上一张经典图！把这张图看懂了就理解生命周期了,上一篇挂载过程也可以看这个图生命周期钩子函数（参考上图粉色框里的）：beforeCreate() const vm = new Vue({ el: "#app", data:{ name: 'a' }, ...
2019-07-06 20:25:59
136
原创 学习笔记Vue（六）—— 挂载过程
先放一段代码：const vm = new Vue({ el: "#app", template: "<h2>{{msg}}</h2>", render(createElement){ //如果有render，就执行render生成的元素，不渲染template了 ...
2019-07-06 19:54:42
144
原创 学习笔记Vue（五）—— 过滤器 Filter
在Vue中过滤器使用一个管道符 | 来和想要过滤的值隔开，直接看例子：该例子为将很大的数字每三位就用一个 ， 隔开<body> <div id="app"> <span>{{money | toMoney | ceshi}}</span> </div> <script> ...
2019-07-06 19:44:11
216
原创 学习笔记Vue（四）—— 自定义指令directive
vue中可以通过directive创建自定义的指令，可全局定义，也可局部：const vm = new Vue({ el:"#app", data: { a: 10, money: 1000000 }, directives:{ //...
2019-07-06 19:34:07
312
原创 学习笔记Vue（三） —— 双向数据绑定机制（与angular对比）
一、Angular中的双向数据绑定（脏检查机制）：AngularJs 为 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$dig...
2019-07-06 14:58:00
1191
原创 学习笔记Vue（二）—— 常用指令
1.v-pre让标签中的html模板不进行编译，就是两个花括号中的内容不再当作一个变量，而是整体就看做是一个字符串。 <!-- v-pre 不编译两个花括号中的内容 --> <span v-pre>{{'a'}}</span>2.v-cloak有的时候可能由于网络原因，vue加载的比较慢，最开始html里绑定的数据是不存在的，等待vue加载完毕后才显...
2019-07-06 14:22:54
131
原创 学习笔记Vue（一）—— 起步(创建Vue实例和插值表达式)
一、创建Vue实例引入vue.js文件我直接用的官网上提供的链接，用于学习的开发版本，包含一些警告提示。直接上例子：通过new Vue() 的方式创建一个Vue实例，参数为一个对象，el属性：你要将将vue实例挂载到哪个html标签上，用选择器的方式书写data： data是一个对象，它里面的属性值可以是变量，函数，数组，对象等，<body> <div id=...
2019-07-06 13:10:48
267
原创 前端页面+AJAX+PHP+MYSQL 实现简易学生管理系统
在学习过程中写了一个小小的学生管理系统，涵盖对数据库的增、删、改、查等功能。编辑器：VSCode服务器：xamp编写步骤：前端页面，html+css（这一部分不做太多解释）jQuery 正则表达式验证学号、手机号格式是否正确等。创建数据库，创建一个学生表和一个省对应的城市表（城市表用作select表单根据选择的省份生成对应的城市）编写php文件对数据库进行操作编写ajax(jQu...
2019-02-04 22:00:38
4017
5
原创 关于使用服务器打开html页面 修改外联css文件不显示样式的解决方法
之前在学习AJAX异步请求的时候，发现一个很奇怪的问题，在我想给一个标签display：none；的时候发现外联的css文件突然不好使了。但是在html里嵌入的标签里写的样式就好用。由于我是一个渣渣，所以挣扎了很久想搞清楚怎么回事，后来发现是缓存的问题，猜测可能是服务器端缓存导致样式不刷新了（开始胡诌），反正解决方法如下我使用的是谷歌浏览器，首先右键打开控制台，在左上角刷新的按钮上右键，清...
2019-01-19 15:17:31
3001
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人