上一页 1 2 3 4 5 6 ··· 8 下一页
摘要:安装node.js 从node.js的中文官网下载安装包:https://nodejs.org/zh-cn/ 然后就和安装其他程序一样进行安装即可。在安装的时候会顺带将npm这个包管理工具安装上。 安装完成后可以在终端输入node查看。 使用淘宝镜像 在终端执行: npm install -g cn 阅读全文
posted @ 2020-02-26 16:56 xsan 阅读(224) 评论(0) 推荐(0) 编辑
摘要:导航解析流程:1、导航被触发2、在失活的组件里调用beforeRouteLeave离开守卫3、调用全局的beforeEach守卫4、在重用的组件里调用beforeRouteUpdate守卫5、在路由配置里调用beforeEnter。6、解析异步路由组件7、在被激活的组件里调用beforeRouteE 阅读全文
posted @ 2020-02-25 23:11 xsan 阅读(138) 评论(0) 推荐(0) 编辑
摘要:组件导航守卫,就是组件中写守卫。也就是进入到这个组件之前会调用的方法。组件导航守卫大体分为:`beforeRouteEnter`、`beforeRouteUpdate`、`beforeRouteLeave`三个。 beforeRouteEnter:在进入组件之前调用的。在这里不能使用`this`,因 阅读全文
posted @ 2020-02-25 23:09 xsan 阅读(152) 评论(0) 推荐(0) 编辑
摘要:导航守卫: 就是导航过程中各个阶段的钩子函数。分为:全局导航守卫、路由导航守卫、组件导航守卫。 全局导航守卫: 在整个网页中,只要发生了路由变化,就会触发。全局导航守卫主要包含两个函数:beforeEach、afterEach。 beforeEach: 在路由发生了改变,但是还没有成功跳转的时候会调 阅读全文
posted @ 2020-02-25 22:49 xsan 阅读(257) 评论(0) 推荐(0) 编辑
摘要:重定向: 在定义路由的时候,可以通过添加`redirect`参数,重定向到另外一个页面。 routes: [{ path: "/", redirect: "/article" }] 别名: 在定义路由的时候,可以通过添加`alias`参数,表示该url的别名,以后也可以通过这个别名来访问到这个组件。 阅读全文
posted @ 2020-02-25 20:41 xsan 阅读(590) 评论(0) 推荐(0) 编辑
摘要:背景: 在一个url中(一个页面中)使用多个组件,此时,需要为组件进行命名,然后通过命名区分各组件的使用位置 用法: 1、在写路由时,将原先的`component`多加一个`s`改为`components`,并且以键值对的形式进行命名。 let router = new VueRouter({ ro 阅读全文
posted @ 2020-02-25 19:59 xsan 阅读(130) 评论(0) 推荐(0) 编辑
摘要:背景 `<router-link>`是在用户点击的情况下进行页面更新,但是有时候,我们想要在`js`中手动的修改页面的跳转,此时就需要“编程式导航”了。 方法 有三种方法: 1、`this.$router.push`:转到下一个`url`,会把新传入的url添加到浏览器的`history`中。 pu 阅读全文
posted @ 2020-02-25 17:35 xsan 阅读(313) 评论(0) 推荐(0) 编辑
摘要:背景: 在大的路由下面有时候需要一些字路由进行切换数据,那么这时候需要使用路由嵌套。 方法: 1、直接在父路由中添加`children`字路由,格式和父路由一样。 let router = new VueRouter({ routes: [{ path: "/", component: index, 阅读全文
posted @ 2020-02-25 16:03 xsan 阅读(175) 评论(0) 推荐(0) 编辑
摘要:404错误分为两种: 1> 页面中不存在该路由; 2> 页面中传递的参数在服务器端不存在,比如,个人中心是需要从后端获取数据的,但是你查询的用户是不存在的,此时也是404错误。 配置 在路由规则中,`*`代表的是任意字符。所以只要在路由的最后加一个`*`路由,那么以后没有匹配到的`url`都会被导入 阅读全文
posted @ 2020-02-25 14:49 xsan 阅读(2402) 评论(0) 推荐(0) 编辑
摘要:在使用路由参数时,比如从`/our/Xsan`跳转到`/our/foo`,原来的组件实例会被复用。因为这两个路由都是渲染的同一个组件,比起销毁再重建,复用则显得更加高效。不过,这也就意味着组件的生命周期钩子函数将不会被再次调用。 解决办法: 1、监听`this.route`属性。通过判断`to`和` 阅读全文
posted @ 2020-02-25 11:23 xsan 阅读(257) 评论(0) 推荐(0) 编辑
摘要:用法: 在url中,通过定义参数,那么以后url中就可以动态的传递这些参数。语法:`/our/:参数名` let router = new VueRouter({ routes: [ { // user为参数 path: "/our/:user", component: our } ] }) 2. 阅读全文
posted @ 2020-02-24 22:40 xsan 阅读(348) 评论(0) 推荐(0) 编辑
摘要:当我们想创建单页面应用时,可以使用`vue-router`进行实现。 cdn引用: <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 使用方法: 1、`vue-router`必须结合组件使用,因为加载的内容 阅读全文
posted @ 2020-02-24 17:32 xsan 阅读(142) 评论(0) 推荐(0) 编辑
摘要:该项目主要是练习vue的基础语法,其中涉及到`v-model`数据双向绑定、事件绑定的修饰符(阻止默认事件发生)、过滤器。项目使用的是bootstrap的css样式进行布局,实现了图书的动态增加、动态查找的功能。 最终效果: 源码: <!DOCTYPE html> <html lang="en"> 阅读全文
posted @ 2020-02-24 15:02 xsan 阅读(201) 评论(0) 推荐(0) 编辑
摘要:过滤器是数据在真正渲染到页面的时候,可以使用过滤器对数据进行一些处理,把最终处理的结果渲染到网页中。 过滤器的使用: 过滤器可以用在两个地方:`{{ }}`和`v-bind`表达式。过滤器应该被添加在`JavaScript`的尾部通过管道符("|")进行分割。 注意: 需要写在创建实例之前。 `fu 阅读全文
posted @ 2020-02-24 10:58 xsan 阅读(101) 评论(0) 推荐(0) 编辑
摘要:生命周期函数代表的是`vue`实例、`vue`组件,在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段、运行阶段及销毁阶段的函数。这些阶段的函数都是和methods同级的,不是写在methods中。 创建期间的函数: 1)beforeCreate:在创建实例前所执行的函数;Vue已经创建 阅读全文
posted @ 2020-02-23 18:56 xsan 阅读(85) 评论(0) 推荐(0) 编辑
摘要:当定义完一个组件后,可能在使用时还需要往这个组件中插入新的元素或者文本。这个时候就可以使用插槽来完成。 在定义`template`时,在需要插入的地方使用`<slot></slot>`标识出来。在使用时只需将传递的值放在定义的组件标签包裹起来即可。 插槽可以设置默认值。在定义template时,用` 阅读全文
posted @ 2020-02-22 11:15 xsan 阅读(175) 评论(0) 推荐(0) 编辑
摘要:一个组件上的`v-model`默认会利用名为`value`的prop(属性)和名为input的事件,但是像单选框、复选框等类型的输入控件可能会将`value`特性用于不同的目的。这时候我们可以在定义组件的时候,通过设置`model`选项可以用来实现不同的处理方式。 在创建组件的时候,添加`model 阅读全文
posted @ 2020-02-21 18:32 xsan 阅读(1296) 评论(0) 推荐(0) 编辑
摘要:当我们需要在操作组件后引起组件之外的元素发生变化时,就需要是这里的内容。比如:当选中书后,自动显示您选中的书名。其中书籍列表是使用组件写的。显示选中书籍名是在组件之外。 在添加事件的时候需要注意一下事项: 1、在定义组件时`Vue.component(组件名,{props(参数),template( 阅读全文
posted @ 2020-02-21 16:36 xsan 阅读(1049) 评论(0) 推荐(0) 编辑
摘要:定义组件时,如果是需要参数传递则,将要传递的参数放在`props`中,`props`可以是一个数组也可以是一个字典,字典中可以定义是否是必须传递和参数的类型。如下: porps:{ books:{ type: Array, required: true, default: '四大名著' } } 在传 阅读全文
posted @ 2020-02-20 19:00 xsan 阅读(8216) 评论(0) 推荐(0) 编辑
摘要:当某些html代码是重复使用时,就可以将其写成组件,直接调用,方便以后的修改。 需要注意的是:定义的组件只能在注册过的代码块中使用,且定义组件的Vue.component是 和注册代码是同级的。 其形式为: Vue.component("组件名", { template: "定义的html代码", 阅读全文
posted @ 2020-02-20 18:04 xsan 阅读(383) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 ··· 8 下一页