介绍一下，已经有很多的vue分页的组件了，大家都是大同小易，那么我就结合自身的使用，写出了一片文章首先在新建一个分页模块在模块中引入相应的代码，（内有详细的注释） template中<div class="page-bar"><ul><li class="first"><span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span></li><li v-if="cur>1"><a v-on:click="cur--,pageClick()"><</a>//点击上一页</li><li v-if="cur==1"><a class="banclick"><</a>//点击第一...
当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。 在下面这个例子中，如果不给 p 元素绑定k...
Vue 实现组件信息的缓存 当我们在开发vue的项目过程中，避免不了在路由切换到其他的component再返回后该组件数据会重新加载，处理这种情况我们就需要用到keep-alive来缓存vue的组件信息，使其不再重新加载。 一、在app.vue里 <keep-alive><router-view></router-view> </keep-alive>但是这种情况会对所有的组件进行缓存，不能达到单个组件缓存的效果。 那么我们给部分组件加上，实现方法如下： 在app.vue <!--这里是需要keepalive的...
具体代码如下所示： export default new Router({routes: [{path: /live,name: live,component: () => import(@/view/live/live.vue)}] })上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决 新建一个 loadable.vue <template><index></index> </template> <script>import LoadingComponent from ./load.vue /...
本文主要介绍了vue中的数据绑定原理的实现，分享给大家，也给自己留个笔记，具体如下：vue中的响应式数据绑定是通过数据劫持和观察者模式来实现的。当前学习源码为vue2.0源码关键目录 src |---core | |---instance | |---init.js | |---state.js | |---observer | |---dep.js | |---watcher.js 当我们实例化一个vue应用的时候，会伴随着各种的初始化工作，相关的初始化工作代码在init.js文件中 // src/core/inst...
Prop 基本用法 Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component(child, {...// 接收messageprops: [message]... })tips：由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，驼峰写法需要转化为短横线写法。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为。 Prop中的静态和动态值 在正常情况下，一般在父组件中通过v-bind定义一个动态值...
computed 计算属性：通过属性计算得来的属性 计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值 a:<input type="number" v-model.number="a" />b:<input type="number" v-model.number="b" /><!--c:<input type="number" v-model.number="c" />-->总和：{{sum()}}总和：{{count}}平均值：{{avg}}<p v-once>单价：{{price}}</p><p>数量：<input type="number...
使用场景： 例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新，或者使用的都是一个方法的时候，我们就可以使用vue mixins进行封装调用，以及继承，具体看代码。 选项合并var mixin = {data: function () {return {message: hello}},created:function(){console.log(我是mixins中的created)},methods:{show:function(num){console.log(num) //mixins种的函数可以接收组件种的传参。},foo: function () {console.log(foo)},...
1、HTML模板和字符串模板 HTML模板：直接在HTML页面挂载的模板。（即非字符串模板）非字符串模板：在单文件里用 <template></template> 指定的模板，换句话说，写在 html 中的就是非字符串模板。 字符串模板：在js字符串中定义的模板。 2、Props属性：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名)： （1）、HTML模板： Vue....
何为scoped？ 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。 scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码： <style scoped> .ex...
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种： 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一、父组件传值给子组件 父组件给子组件传子，使用props //父组件：parent.vue <template><div><child :vals = "msg"></child></div> </template> <script> import child from "./child"; export default {data(){return {msg:"我是父组件的数据，将传给子组件"}},components:{...
前言最近在看element-ui的源码，发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。 需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。下面我们来验证下猜想： first：定义一个parent component<template><div> <childOne></...
引子 v-bind 主要用于属性绑定，Vue官方提供了一个简写方式 :bind，例如： <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 一、概述 v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。 示例： <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 内联字符串...
写在前面 对话框是很常用的组件 ， 在很多地方都会用到，一般我们可以使用自带的alert来弹出对话框，但是假如是设计出的图该怎么办呢 ，所以我们需要自己写一个对话框，并且如果有很多地方都用到，那我们很有必要写成一个通用的组件形式，在需要的地方之间引用。 现在我们来动手实现一个对话框组件 ，按照之前的习惯，我们先看下实现的效果图1.首先，通过template定义一个组件 <template id="dialog"><div class="dialog"><div cla...
在vue中，经常会用到数据请求，常用的有：vue-resourse、axios 今天我说的是axios的post请求 github源文件及文档地址：【https://github.com/axios/axios】 + 首先，引入axios CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入：import axios from axios;?get请求 axios.get(/user?ID=12345).then(function (response) {console.log(response);}).catch(fun...