问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: <div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view> </div> const router = new Router({scrollBehavior(to, from, savedPosition) {if (savedPosition && to.meta.keepAlive) {return savedPosition;}return { x: 0, y:0 };}, });2. 页面返回出...
Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为： props down, events up 父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。 父子级组件比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写，这样也能提高组件的可维护性。 这里我们先定义父子两个组件和一个 Vue 对象： var childNode = {template: `<div>ch...
说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素） 使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> ...
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。 导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。 贴上文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = new V...
1.keep-alive的作用以及好处 在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。 2.keep-alive的基本用法 在app.vue中 <!-- 缓存所有的页面 --> <keep-alive><router-view v-if="$route.meta.keep_alive"></router-view> </keep-alive> <router-view v-if="!$rout...
1、自定义的过滤器，当然这包括注册在全局和注册在实例化的内部 （1）注册在全局的fliter (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html><head><meta cha...
Vue侦听器watch 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例如： <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </div> <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没...
假设有如下代码： <div><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p> </div>new Vue({el: #root,data: {firstName: Dawei,lastName: Lou,fullName: },watch: {firstName(newName, oldName) {this.fullName = newName + + this.lastName;}} })上面的代码的效果是，当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 handler方法和immediate属性这里 wat...
说下我对vue中mixin的一点理解vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？ 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。 而mixins则是在引入组件之后，则是将组件内部的内容如data等方...
1.第一例 const Home = resolve => {import("@/components/home/home.vue").then( module => {resolve(module)} }注：（上面import的时候可以不写后缀） export default [{path: /home,name:home,component: Home,meta: {requireAuth: true, // 添加该属性可以判断出该页面是否需要登录显示}, }]2.第二例 const router = new Router({routes: [{path: /home,component: (resolve)=> {require([../components/home/home], resolve) ...
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。 但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。 然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"><input type="text" ref="input1"/><button @click="add">添加</button> </div>JS: <script...
先使用vue cli构建一个自己的vue项目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的项目名) 3.一路回车（在这个过程中会提示你是否安装一些依赖包，比如vue-router，es6语法检查等等，这些根据你个人习惯或者癖好选择Y/N） 4.npm i (这个是安装项目的依赖包) 5.npm run dev（启动你的vue项目） 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成，然后你可以删除掉没有用的组件 6.webpack sell默认...
一、递归组件 组件在它的模板内可以递归地调用自己， 只要给组件设置name 的选项就可以了。 示例如下：<div id="app19"><my-component19 :count="1"></my-component19></div> Vue.component(my-component19,{name: my-component19, //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。props: {count: {type: Number,default: 1}},template: <div><my-component19 :count="count+1" v-if="count<...
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件： <template> <div class="train-city"> <span @click=select(`大连`)>大连</span> </div> </template> <script> export default { name:trainCity, methods:{ select(val) { let data = { cityname: val...
Swiper简介 Swiper常用于移动端网站的内容触摸滑动。 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行问题 这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。 <template> <div clas...