- 博客(41)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 微商城项目-知识记载
路由导航守卫<mt-header fixed :title="$route.meta.title"></mt-header>// 添加路由导航守卫，用来动态设置标题内容router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } next()})List itemList item...
2021-07-21 09:45:37
209
原创 Nuxt.js服务器端渲染框架
1、创建Nuxt.js项目1、确保已经安装好了node.js和vue-cli脚手架。2、全局安装create-nuxt-app脚手架工具。npm install create-nuxt-app@2.9.x -g3、在项目存储目录下执行以下命令，创建项目。npx create-nuxt-app my-nuxt-dome（其余回车默认即可）4、安装配置完成后，启动项目，命令如下。cd my-nuxt-demonpm run dev接下来对my-nuxt-demo项目中的关键文件进
2021-05-09 19:22:55
488
1
原创 创建vue-ssr项目
1、创建vue-ssr项目1、在项目存储目录下，使用命令行工具创建一个vue-ssr项目，执行完命令后，会在vue-ssr目录下生成一个package.json文件mkdir vue-ssrcd vue-ssrnpm init -y2、在Vue中使用服务器端渲染，需要借助Vue的扩展模块vue-server-renderer。下面在vue-ssr项目中使用npm来安装vue-server-renderernpm install vue@2.6.x vue-server-renderer@2.6
2021-05-09 15:23:46
526
1
原创 Vue开发环境
1、Vue CLI脚手架工具1、先卸载旧版的的vue-clinpm uninstall vue-cli –g2、npm方式全局安装@vue/cli脚手架npm install @vue/cli@3.10 –gvue –V 查看版本，显示版本号则安装成功3、使用vue create命令创建项目vue create hello-vue（项目名）=>重新执行vue create hello-vue后，交互符界面提示用户选取一个preset（预设），default是默认项，包含基本的b
2021-05-06 20:04:45
2641
1
原创 Vuex下的API
模块注册store.registerModule()：store实例对象提供了动态创建模块的接口(和module属性差不多，这个跟方便简洁)状态替换store.replaceState()：可以通过store.replaceState()方法实现状态替换。
2021-04-25 20:41:12
240
原创 plugins，devtools
plugins选项：Vuex中的插件配置选项为plugins，插件本身为函数。函数接收参数store对象作为参数。store实例对象的subscribe函数可以用来处理mutation。函数接收参数为mutation和state。(一般用来初始化数据)...
2021-04-25 20:17:09
226
原创 modules
modulesmodules用来在store实例中定义模块对象。modules是store实例对象的选项。对store对象仓库进行标准化管理。(对state数据进行模块化管理)
2021-04-25 19:55:22
84
原创 getters
定义getters计算属性：store实例允许在store中定义getters计算属性，类似于Vue实例的computed。getters案例
2021-04-25 19:35:34
113
原创 mutations
mutations：mutations选项中的事件处理方法接收state对象作为参数，即初始数据，使用时只需要在store实例配置对象中定义state即可。mutations中的方法用来进行state数据操作，在组件中完成mutations提交就可以完成组件状态更新。(对state数据进行修改)一般用第一种，简单...
2021-04-25 18:04:02
430
原创 编程式导航
1、router.push()使用router.push()方法可以导航到不同的URL地址。这个方法会向history栈添加一条新的记录，当用户单击浏览器后退按钮时，可以回到之前的URL。query传参；params传参；更改上述代码methods: { gostart() { this.$router.push({ name: 'user', params: { name
2021-04-19 20:55:44
531
原创 命名路由
vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在 routes 中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。...
2021-04-19 19:20:18
596
原创 嵌套路由
嵌套子路由的关键属性是children，children也是一组路由，相当于前面讲到的routes，children可以像routes一样的去配置路由数组。每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器代码结构：主结构：<div id="app"> <ul> <router-link to='/about' tag='li'>关于公司</router-link> <ro
2021-04-19 17:07:04
1851
原创 动态路由
1、动态路由在vue-router的路由路径中，可以使用动态路径参数给路径的动态部分匹配不同的id{ path: "/user/:id", component: user }2、query方式传值就是用问号进行传递key和vulue实现效果2、p## 1、动态路由在vue-router的路由路径中，可以使用动态路径参数给路径的动态部分匹配不同的idbash{ path: "/user/:id", component: user }## 2、query方式传值就是用问号进行传递key和v
2021-04-19 15:42:24
135
原创 列表过渡
通过v-for循环多个元素，并且通过transition-group组件来给多个元素同时添加过渡效果列表的进入和离开过渡过渡样式代码结构效果图列表的排序过渡加入v-move，平滑过渡 .fade-move { transition: transform 1s; }列表的排序过渡2Vue使用了FLIP简单动画队列来实现排序过渡，所以即使没有插入或者移除元素，对于元素顺序的变化也支持过渡动画。FLIP动画能提高动画的流畅度，可以解决动画的卡顿、
2021-04-19 14:25:44
581
原创 vue-router
vue-router可以实现当用户单击页面中的A按钮时，页面显示内容A；单击B按钮时，页面显示内容B。换言之，用户单击的按钮和页面显示的内容，两者是映射的关系。引入文件<script src="vue-router.js"></script>**注意：**一定要按顺序写，否则出不了结果...
2021-04-12 16:54:50
60
原创 多组件过渡
多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的<component>元素绑定is属性来实现多组件的过渡。过渡样式组件过渡实现效果
2021-04-03 15:17:05
630
原创 多个元素过渡---过渡模式
过渡模式过渡模式的原理是，设置有序的过渡而不是同时发生过渡在transition中加入mode属性：in-out ：表示新元素先进行过渡，完成之后当前元素过渡离开（一般不用）out-in：表示当前元素先进行过渡，完成之后新元素过渡进入未加mode加入之后...
2021-04-03 14:44:05
850
原创 多个元素过渡---v-if、v-else、v-bind
不相同标签名元素可以使用v-if和v-else来进行过渡，下面通过案例演示不同标签名元素的过渡。(transition)只能对一个标签进行过渡通过判断iteams有没有值来进行选择性过渡标签元素
2021-03-31 20:20:59
786
原创 Vue过渡与动画---@keyframes创建CSS动画
@keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程中，可以多次改变CSS样式，通过百分比或关键词from和to（等价于0%和100%）来规定动画的状态。（就是利用几套CSS样式添加时间百分比实现样式在不同阶段的改变）CSS样式结构效果变化...
2021-03-31 17:53:20
537
原创 Vue过渡与动画---自定义类名、appear的引入
引入CSS文件<link rel="stylesheet" href="animate.css">animated是基本的类名，bounceInLeft等是动画的类名设置appear属性来给元素添加初始渲染的动画效果。实现效果：
2021-03-30 20:47:42
424
原创 Vue过渡与动画---transition组件
<transition>标签搭配CSS动画（如@keyframes）可以实现动画效果。动画相比过渡来说，动画可以在一个声明中设置多个状态CSS样式动画transition结构点击效果前点击按钮3s后
2021-03-30 18:09:43
82
原创 组件进阶---mixin、render、createElement
mixin：混入Vue实例，Vue创建之后就可以使用Vue实例创建的数据或函数冲突，Vue创建的优先Vue实例创建的钩子函数冲突，都执行，不过先执行混入的钩子函数renderrender()渲染函数：在Vue中可以使用Vue.render()实现对虚拟DOM的操作。createElementcreateElement()函数返回的并不是一个实际的DOM元素，它返回的其实是一个描述节点（createNodeDescription）。第1个参数可以是一个HTML标签名或组件选项对象
2021-03-29 16:23:52
260
原创 全局配置---productionTip、silent、devtools
productionTip默认情况下Vue.config.productionTip = false;配置之后silent默认情况下提示警告和日志Vue.config.silent = true;注意：必须在Vue实例化之前使用使用之后Vue.config.devtools：表示打开或关闭vue-devtools调试工具，默认值为true，表示vue-devtools工具可用。Vue.config.devtools = false;使用之后，灰色不可用
2021-03-29 14:58:31
307
原创 vm.$root、vm.$slots、vm.$arrts
vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。vm.$slots就是一个插糟，在组件的中间写入，返回到template的插槽中vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。...
2021-03-29 14:32:38
993
原创 vm.$el、vm.$children
vm.$el用来访问vm实例使用的根DOM元素{可以对整个DOM元素进行各种操作}$children用来获取el根元素下的子组件
2021-03-29 11:07:53
1003
原创 vm.$options
Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取(就是说有些自己定义的属性，不是在data数据里面的，可以通过$options来获取输出)这里通过this.noBase = this.$options.customOption;获取到customOption的值传给noBase，然后再DOM元素输出它...
2021-03-28 17:14:22
754
原创 vm.$props
props—父类向子类传递信息，子类接受并返回结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2021-03-28 16:28:05
1262
2
原创 Vue.set、Vue.mixin
Vue.set简单来说，就是在Vue外部对Vue的属性进行响应Vue.mixin是混入一个插件，会影响到之后创建的每一个Vue
2021-03-28 14:54:51
54
原创 Vue子类：Vue.extend
Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。（就是加一些方法元素，方便下次使用时直接出现自己想要的内容）
2021-03-28 10:41:13
378
原创 安装插件：Vue.use
Vue.use：主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果是一个函数，则该函数将被当成install()方法。（就是在Vue里面使用use安装一个插件，然后再DOM元素里面直接使用）实现效果：...
2021-03-28 10:05:43
662
原创 自定义指令：Vue-directive
Vue.directive：用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性。（就是简单的自己定义一个系统没有的指令方法，然后再HTML里使用自己定义的方法）实现效果：为文本框自动获取焦点...
2021-03-28 09:33:29
77
原创 CSS前言
CSS基础语法选择器 {声明1}选择器：我们要修改样式的HTML元素，例如<body>,<div>申明：各种修改样式的属性和其值，格式：{属性: 值;}案例介绍定义样式代码html文本内容实现效果CSS样式引入方式1、内部样式表就是将style标签写在head标签内部<head> <meta charset="utf-8"> <title>Hello World</title>
2021-03-27 16:43:30
58
原创 HTML表格元素汇总
HTML—表格1、表格的基本结构<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。border属性表示给表格添加边框，它的值5表示边框的宽度为5px。2、表格的属性——宽、高使用width和height来定义表格的宽和高，width和hegiht单位是px，可加可不加。width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。3、表格的属性——cellpadding属性cellpadd
2021-03-26 20:04:47
393
原创 HTML表单元素汇总
表单元素——label 标签<label>标签的作用主要是提高用户体验性，点击文本也能选择表单元素。需要注意的是：<label>标签的for属性的值要和相应表单元素的id的值相同。这样才能把<label>标签和表单元素绑定到一起。---------------------------------------------------------------------表单元素——下拉列表<select>标签用来创建下拉列表，<option&g
2021-03-25 20:12:26
766
原创 钩子函数
Vue的生命周期钩子函数vue的生命周期是指vue从创建到销毁的整个过程，而在vue的生命过程中会用到执行很多回调函数，这些函数叫钩子函数1、实例创建beforeCreate()—创建实例对象之前执行报错: msg没有定义，表明在Vue创建之前调用，没有msg数据created()—创建实例对象之后执行正常输出msg的值2、页面挂载beforeMount()—页面挂载成功之前执行mounted()—页面挂载之后页面挂载是指Vue的绑定根元素## 3、数据更新beforeU
2021-03-25 16:17:23
2206
空空如也
npm install安装框架成功后没有提示安装的版本信息
2021-05-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人