子组件 <template><div class="slotcontent"><ul><!--<slot></slot>--><li v-for="item in items">{{item.text}}</li></ul></div> </template> <script>export default{data(){return{items:[{id:1,text:第1段},{id:2,text:第2段},{id:3,text:第3段},]}}} </script> <style scoped> </style> 父组件 <template><div><h2>首页</h2><router-link to="/home/details">跳转到详情</router-link><p>父组件</p><slotshow><p>{{msg}}</...
上一篇主要写了一下vuer-router的基本使用，可以说解决温饱了，下面就再来点下午茶吧 模式 vue-router中的模式选项主要在router实例化的时候进行定义的，如下 const router = new VueRouter({mode: history, // 两种类型history 还有 hashroutes: routes // 可以缩写成routes })有两种模式可供选择，history 和 hash，大致对比一下，模式优点缺点hash使用简单、无需后台支持在url中以hash形式存在，不会传到后台history地址明确，便...
官网实例： https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html 指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比...
.self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。 代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>self</title><script src="vue.js"></script><!--请自行引入vue.js--> </head> <style type="text/css">* {margin: 0 auto;text-align:center;line-height: 40px;}div {width: 100px;}#obj1 {background: deeppink;}#obj2 {background: pink;}#obj3 {backgroun...
watch应用场景 我想信图片预加载大家肯定都有接触过，当图片量大的时候，为了保证页面图片都加载出来的时候，我们才把主页面给显示出来，再进行一些ajax请求，或者逻辑操作 那此时你用computed对这种监听一个数据然后进行一系列逻辑操作和ajax请求，那watch再适合不过了，如果用computed的话那你连实现都实现不了，只有用watch监听<template><div v-show=show><img src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutb...
下面给大家介绍Vue组件中slot的用法 主要是让组件的可扩展性更强。 1. 使用匿名slot2. 给slot加个名字如果不在有slot的组件里加入任何标签，slot什么都不会显示的。 总结 以上所述是小编给大家介绍的Vue组件中slot的用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
有时候我们在做开发的时候，就想自己写一个插件然后就可以使用自己的插件，那种成就感很强。博主最近研究element-ui和axios的时候，发现他们是自定义组件，但是唯一有一点不同的是，在用element-ui的时候是使用Vue.use()语句来使用的，而axios的时候，不用Vue.use()，只要import就可以导入进来了，感觉很神奇，细细的发现，原来他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法，下面就利用这个install来...
1、示例代码 采用vue单文件组件，使用moment插件格式化日期 <template><div><h1>{{date | dateFormat}}</h1> </div> </template> <script>import moment from moment;import moment/locale/zh-cn;moment.locale(zh-cn);export default {data() {return {date: new Date()}},filters: {dateFormat(val) {return moment(val).calendar();}}} </script>2、效果3、说明 过滤器内是没有this引用的，过滤器内的this是undefined，所以不要...
简介主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。 分为三大类：全局守卫、路由守卫、组件守卫 全局守卫 beforeEach beforeResolve afterEach路由守卫 beforeEnter组件守卫 beforeRouteEnter// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建虽然无法直接获取组件实力但是我们可以通...
vue提供了mixins、extends配置项，最近使用中发现很好用。 混合mixins和继承extends 看看官方文档怎么写的，其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。 继承钩子函数 const extend = {created () {console.log(extends created)} } const mixin1 = {created () {console.log(mixin1 created)} } const mixin2 = {created () {console.log(mixin2 created)} ...
本文介绍了Vue.js中ref ($refs)用法举例总结，分享给大家，具体如下：看Vue.js文档中的ref部分，自己总结了下ref的使用方法以便后面查阅。 一、ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"><component-father ref="outsideComponentRef"></component-father><p>ref在外面的组件上</p> </div> js部分var refoutsidecomponentTem={template:"<div class=childComp><h5>我是子组件</h5...
vue.js 教程 Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。 前 言前段时间为了一个数据查询的项目自学了Vue，感觉这款框架还是很不错的，今天就整理整理这个框架如何使用，希望对正在学这个框架的小伙伴有所帮助~ 首先，我...
前 言 最近用Vue.js做了一个数据查询平台，还做了一个拼图游戏，突然深深的感到了vue的强大。 Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供...
ESLint简介 关于ESLint的介绍网上很多，这里就简单说些有用的。 ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同，所以统一代码风格在团队协作中尤为重要。 vue-cli的eslint相关 vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。 .eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。.eslintrc.js是ESLint...
今天使用Vuex的时候遇到一个坑，也可以说是自己的无知吧，折腾了好久，终于发现自己代码的错误了。真是天雷滚滚~~~~~~ index.js import Vue from vue import Vuex from vuex import mutations from ./mutations import actions from ./action import getters from ./gettersVue.use(Vuex)const state = {userInfo: { phone: 111 }, //用户信息orderList: [{ orderno: 1111 }], //订单列表orderDetail: null, //订单产品详情login: ...