vue
关注
分享
扫一扫
源魔方
这个作者很懒，什么都没留下…
展开
-
初学Vuex
VuexVuex是做什么的？官方解释：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vux也集成到Vue的官方调试工具 devtools extension，提供了零配值的time-travel调试、状态快照导入导出等高级调试功能。状态管理模式、集中式存储管理是什么？简单来说，把多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的vue实例中，让其他组件可以使用。Vuex就是为了提供响应式组件共享变量的管理插件。...原创 2020-10-09 22:01:19 · 110 阅读 · 0 评论 -
路由保持状态不被刷新,keep-alive
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。keep-alive2个重要属性：include:字符串或正则表达，只有被匹配到的name会被缓存(保留状态)。exclude:字符串或正则表达，任何匹配的组件不会被缓存。如果在router-view中使用keep-alive，那么在路由跳转后，再跳转回来时，可以看到状态被保留下来了。示例：页面打开时:击消息后，我希望保留这个状态，下次到首页还是消息不是新闻。当组件在keep-alive内被切换时组件原创 2020-09-28 17:59:18 · 846 阅读 · 0 评论 -
路由守卫
全局路由守卫：在路由跳转前(beforeEach)、跳转(afterEach)后需要执行的代码。比如需要在跳转后网页的title也跟着变化(不同页面有不同的title显示)：首先需要在配置路由时，给对象加上meta(元数据)； { path: '/home', name: 'home', component: Home, children:[ { path:'news', component:原创 2020-09-28 16:48:18 · 173 阅读 · 0 评论 -
Component template should contain exactly one root element. If you are using v-if on multiple elemen
vue模板只能有一个根对象。所以想要出现正常的效果，你的用一个div来或是别的标签来包裹全部的元素错误：正确：原创 2020-09-28 16:14:31 · 156 阅读 · 0 评论 -
$route和$router
$router是VueRouter的实例，想要导航到不同的URL，就使用 $router.push方法。$route是为当前router(活跃路由)跳转对象里面可以获取name、path、query、params等。原创 2020-09-28 16:05:02 · 134 阅读 · 0 评论 -
路由的传递参数
路由的传递参数主要有两种类型1.params：配置路由格式：/user/:id传递的方式：在path后面跟上对应的值传递后形成路径：/user/123,/user/aaa获取参数：2.query的类型：配置路由格式：/user，就是普通格式传递方式：对象中使用query的key作为传递方式传递后形式的路径：/user?id=123,/user?id=aaa取值：...原创 2020-09-28 00:04:38 · 351 阅读 · 0 评论 -
vue-router.esm.js?fe87:2210 TypeError: Cannot read property ‘$createElement‘ of undefined
原因：语法错误，路由嵌套里面，子路由的component多了一个s。错误：正确：原创 2020-09-27 23:49:33 · 2373 阅读 · 0 评论 -
路由的嵌套
路由的嵌套：路由里面的路由(路由转到一个组件，但是这个组件里面还要其他路由组件)。示例：home组件里面有2个路由，消息和新闻1.先写好消息和信息组件2.在路由中导入设置好映射routers中的children属性是设置子路由的。3.在需要用到子路由的路由组件中link出来，这里就是home组件里注意link的时候一定要/开头！！！...原创 2020-09-27 23:45:34 · 209 阅读 · 0 评论 -
路由的懒加载
官方给出的解释：打包构建应用时，javascript包会变得非常大，请求发送到服务器获取时一次性全部下载会影响页面加载。那么如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就能提高效率了。vue中路由的懒加载就实现了这个。我的解释：我们知道路由中通常会定义很多不同的页面；这些页面一般情况下会被打包到一个js文件中；但是，页面这么多放在一个js文件中，必然会造成这个页面非常大；如果我们一次性从服务器请求下来这个页面，可能需要一些时间，甚至用户电脑上还原创 2020-09-27 23:06:14 · 234 阅读 · 0 评论 -
动态路由
在某些情况下，一个页面的path路径可能不确定，动态确定。比如我们进入用户登录界面时，希望路径是:/user/name，也就是除了前面的/user还要跟上用户的id。这种path和component的匹配关系，叫动态路由(路由传递数据的一种方式)。定义一个user组件：<template> <div> <h1>我是用户</h1> </div></template><script> expo原创 2020-09-26 15:48:51 · 240 阅读 · 0 评论 -
初识vue(10)——router路由
什么是路由？路由用于设定访问路径，将路径和组件(.vue)文件映射起来web中不同的请求地址会交给路由处理来转发给相应的控制器处理，所以说路由就可以在转发前修改转发地址，简单的来说就是指向的意思，可以说是一种映射。在vue中点击设置好的路由链接，会让该路由相应的.vue文件加载到页面中。为什么要用路由？路由的发展过程？在上一篇关于web后端渲染和前端渲染中所涉及。 链接: link.路由的基本用法安装：在脚手架中创建文件时对是否选择路由时yes；或者直接安装vue-router：npm inst原创 2020-09-26 13:46:20 · 494 阅读 · 0 评论 -
浅谈web后端渲染和前端渲染
后端路由阶段后端渲染：jsp：java server page（用来举例）在web发展早期，整个html界面是由服务器来渲染的。服务器直接生成渲染好对应的HTML页面，返回给客户端进行展示。在网页中用户输入url，请求发送给服务器，服务器解析输入内容(正则)，匹配后，交给一个Controller进行处理，后台会利用一个jsp的技术把网页写好，这时候这个网页里面会有html+css+java的代码，其中java代码的作用是从数据库中读取数据放在页面中(动态从数据库读取数据，动态加载到网页中)，这个意味原创 2020-09-26 00:42:06 · 1211 阅读 · 0 评论 -
初识vue(10)——slot插槽
插槽的基本用法插槽的意义：1.让封装的组件更加具有扩展性。2.让使用组件的人不改变组件代码，但是能自己决定组件内部的一些内容。实际用例：基本用法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script>原创 2020-09-24 16:00:44 · 206 阅读 · 0 评论 -
初识vue(9)——组件父子直接访问
父访问子主要使用2个方法$ children、$ refs。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body><div id="app">原创 2020-09-24 00:23:21 · 86 阅读 · 0 评论 -
初识vue(8)——父子组件通信示例
父传子子组件中设置props属性，去接收父组件数据。为什么要设置属性去接收？因为v-bind指令就是动态的给值，v-bind:子组件属性变量=“父组件存放数据变量”。子传父子组件￥emit发射事件，并且携带参数一起发射。父组件在外部用v-on接收发送的事件和传出的值。怎么区分父子组件？我自己的理解：1.父组件包含子组件2.子组件可能父组件中注册（局部注册）3.子组件会出现在父组件中4.如果app去实例化vue，即app是所有组件的根组件。下面是一个示例，大概是父组件把number1、nu原创 2020-09-23 23:17:28 · 165 阅读 · 0 评论 -
初识vue(7)——组件化
组件化的意义什么是组件化：将一个大问题拆解为一个一个小问题，去解决一个一个的小问题，当解决完所有小问题，那么大问题也就解决了。比如这个页面，可以先将这个大页面分为2部分，上部分导航栏，下部分显示内容。页面上部分的导航栏，有6个功能不同的按钮，可以看成6个组件，6个组件组成导航栏，然后导航栏和下部分组成整个页面。这里的组件都是可以复用。组件化优势：1.高内聚低耦合，拆分项目，团队分工，加快进展；2.组件可复用，方便维护，方便阅读；3....原创 2020-09-21 00:19:37 · 139 阅读 · 0 评论 -
初识Vue(6)——v-model
v-model详解作用：在vue中用于表单的双向绑定。下面是v-model一个简单的例子<div id="app"> <label for=""> <input type="text" value="" v-model="message"> </label> <h1>{{message}}</h1></div></body><script>原创 2020-09-19 16:48:44 · 167 阅读 · 0 评论 -
初识Vue(5)——计算属性
什么是计算属性？在网页中可以直接通过插值语法显示一些data中的数据，但是在某些情况下，我们需要将data中的数据进行转化、运算后才能用来在页面中显示，这个时候我们就需要用计算属性：示例一：在页面中展示data中英语和数学的平均成绩<body><div id="app"> <h1>平均成绩为：{{avg}}</h1></div></body><script> const app = new Vu原创 2020-09-17 22:36:58 · 300 阅读 · 0 评论 -
初识Vue(4)——v-bind详细
v-bind原由网页中的属性并不是全部都是写死的，有时候需要动态获取来确定。比如一个网站首页用轮播图来展示，每隔一段时间会更换一组图片，如果是属性src是写死的，那么每次更换图片都需要去改源码就很麻烦。所以我们采用变量去代替固定属性值，只需要每次把图片放到数据库，变量指向数据库的图片就行了。v-bind就是解析这个变量的指令。v-bind介绍作用：动态绑定属性（比如动态绑定a元素的href属性；img元素的src属性等）缩写（语法糖形式）：：预期：any(with arcgument任意参数)|O原创 2020-09-17 21:15:58 · 356 阅读 · 0 评论 -
初识Vue(3)——Vue常用的指令
Vue的指令v-forv-onv-oncev-htmlv-textv-prev-cloakv-bindv-forv-for用于遍历数据，用在table和ur标签里面是可以自动生成遍历结果和标签效果<div id="app"> <ul> <li v-for="item in movice">{{item}}</li> </ul></div><script> const app原创 2020-09-12 18:23:20 · 782 阅读 · 0 评论 -
初识Vue(2)——变量作用域
关于var、const、let之间的选取在es6之前，都通用var定义变量var num = 200;这里的var没有块级作用域，let是块级作用域（什么叫作用域？可以理解为变量在什么范围内可以用，这个范围就叫作用域） { var num = 100; console.log(num); } console.log(num);控制台输出结果：100，100 { let num2 = 99; conso原创 2020-09-12 16:37:58 · 2060 阅读 · 0 评论 -
初识Vue(1)
Vue入门什么是VueVue的第一个程序什么是VueVue是套构建用户界面的渐进式框架。看了知乎中《Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？》: https://www.zhihu.com/question/51907207.我有了自己的理解：就是将一个完整大项目分为很多层，一层一层的向外做。最核心的是视图层渲染，往外组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具。可以根据不同的需求选择不同的层级。Vue的第一个程序1.引入vue.js文原创 2020-09-12 15:39:14 · 125 阅读 · 0 评论