![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE 笔记
记录VUE学习的笔记,如有错误,欢迎指正~
蓝色清晨_
不经一番寒彻骨,怎得梅花扑鼻香。
展开
-
vscode快速生成Vue模板
第一步: 新建模板并保存文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存第二步: 添加配置,让vscode允许自定义的代码片段提示出来文件 --> 首选项 --> 设置 —> 添加这2项(配置过的可以跳过)// Specifies the location of snippets in the suggestion widget"editor.snippetSuggestions原创 2021-07-08 15:02:56 · 392 阅读 · 0 评论 -
路由:指定根路由地址
指定根路由地址:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter);// 引入一级路由import Main from './../views/main/Main'//引入路由组件import Foo from './../views/main/components/Foo'import Bar from './../views/main/components/Bar'//创建 route原创 2021-07-08 13:45:39 · 244 阅读 · 0 评论 -
路由嵌套
qiantaoRouterVue嵌套路由:实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染):1. 项目中安装路由:npm install vue-router --save2. 创建route文件夹,并添加并编写路由配置文件index.js3.在App.vue中配置根路由出口:<!--App.vue--><template> <div id="app">原创 2020-07-03 17:17:14 · 686 阅读 · 0 评论 -
捕获所有路由或 404 Not found 路由
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径,我们可以使用通配符 (*):{ // 会匹配所有路径 path: '*'}{ // 会匹配以 `/user-` 开头的任意路径 path: '/user-*'}当使用 通配符 路由时,请确保路由的顺序是正确的,也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。这样当我们访问不存在的路径(页面)时,会自动帮助我们跳转到404页面。这个在项目中还是经常用到的原创 2020-07-02 18:38:23 · 970 阅读 · 0 评论 -
动态路由匹配
动态路由匹配:我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个User组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果://router/index.jsexport default new VueRouter({ routes:[ { // 动态路径参数 以冒号开头原创 2020-07-02 18:37:43 · 874 阅读 · 0 评论 -
VueRuter路由组件传参
vue-router如何传递参数vue-router传递参数有三种方法:使用name传递;之前在配置路由的时候,出现一个name属性,但是不知道具体有什么用,在路由中它可以用来 传递参数。在router.js中将路由都写好。接收参数: 在我们需要接收它的页面里添加:<!--App.vue--><template> <div id="app"> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 -原创 2020-07-02 17:34:04 · 312 阅读 · 0 评论 -
Vue Router-配置路由文件
Vue RouterNPM安装:npm install vue-router在一个工程化的项目中,我们通常在src文件下单独创建一个router文件夹,来保存各类路由的相关配置。如在router文件夹下,创建一个index.js文件,管理项目的各类路由配置。import Vue from "vue"import Router from "vue-router"Vue.use(Router);//引入一级路由import DashBoard from "./../views/dashboar原创 2020-07-01 16:36:06 · 5280 阅读 · 0 评论 -
组件间通信:props与$emit
一、props / $emit父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。1. 父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义']<!--父组件 Father.vue--><template> <Child :articleList="articleList">&原创 2020-07-01 14:51:16 · 2317 阅读 · 0 评论 -
组件通信:vuex
序言:今天我们简单说一下vuex的使用,vuex是什么呢,相当于react的redux,如果项目使用数据过多的话,直接管理是非常不方便的,那么采用vuex,那些繁琐的问题就迎刃而解了,首先我们先看看官方对vuex的说明:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状翻译 2020-07-01 12:45:17 · 214 阅读 · 0 评论 -
组件通信:$attrs与$listeners
多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,有点大材小用了。所以就有了 $attrs / $listeners ,通常配合 inheritAttrs 一起使用。inheritAttrs :默认值为true。inheritAttrs:true表示继承除props之外的所有属性;inheritAttrs:false表示只继承class属性$attrs:可以通过v-bind = "$attrs"传入内部组件。当一个组件没有声明任何prop原创 2020-06-30 12:38:03 · 3809 阅读 · 0 评论 -
组件间通信:订阅和发布消息
订阅消息和发布消息可以实现跨组件通信。使用订阅和发布消息方式实现组件间通信,需要先在项目下安装pubsub-js库。在项目下安装pubsub-js 库,库内包含subscribe订阅消息和publish发布消息方法。npm install --save pubsub-js订阅和发布消息都是异步操作。使用订阅和发布消息功能要在组件中引入pubsub-js库。import PubSub from "pubsub-js"//订阅PubSub.subscribe('消息名称',(msg,index原创 2020-06-29 12:01:15 · 402 阅读 · 0 评论 -
vue报错:TypeError: Object(...) is not a function
报错描述:TypeError: Object(...) is not a function这种问题常见的原因如下:data中的数据和methods中的方法重名,解决办法:将名字修改即可。在 这里 我会讨论另外一种错误:经过排查,发现原因是导入的JS文件没有用大括号接收,然后又把它当做方法调用了:错误代码如下:正确代码如下:...原创 2020-06-24 15:26:02 · 39433 阅读 · 0 评论 -
vue组件中引入图片报错
问题描述:在vue组件中,创建images文件夹,并放入图片。在正确引入图片路径的情况下,运行项目(npm run serve),报如下错误:未找到具体原因;解决办法:只是把img手动重写了一下就好了(之前是复制人家写好的样式)求解????????????????????...原创 2020-02-27 22:27:28 · 1231 阅读 · 0 评论 -
vue小练习
创建一个Vue实例 所有的Vue组件都是Vue实例,并且接受相同的选项对象 (一些根实例特有的选项除外)。var vm=new Vue({ // 选项});我们的数据对象var data={a:1};该对象被加入到一个Vue实例中var vm=new Vue({ data:data});获得这个实例上的属性,并返回源数据中对应的字段...原创 2018-06-29 14:39:27 · 670 阅读 · 0 评论