我有一个像这样的Vue组件：<script> import { mapActions, mapGetters } from 'vuex'export default {props: ['index'],computed: {...mapGetters(['type','width','height','description','smtTagMeasureUnits','tagValue'])} </script><template><div :class='["block","module-"+type(index), "width"+width(index), "height"+height(index)]'><h3>{{ description(index) }}</h3><div class="data"><h1>{{ tagValue(index) }}</...
我想知道如何迭代组件名称列表(来自对API服务器的AJAX调用)并将它们呈现为组件,并将相关属性传递给每个组件(即动态绑定它们的属性). 到目前为止,我已设法迭代表示组件的JSON项列表,并成功呈现这些组件.我现在要做的是使用v-bind绑定每个组件的属性. 在下面的示例中,item-one组件将接收带有item1.jpg值的image属性;并且第二项组件不会收到任何属性.<template><div v-for="item in items"><component :is="Object.keys(item)[0]" :v-...
Vue中的Diff算法 本篇文章主要介绍Diff算法的思想和Vue中对Diff算法的基本实现。 1. 为什么要用Diff算法 由于在浏览器中操作DOM的代价是非常“昂贵”的，所以才在Vue引入了Virtual DOM，Virtual DOM是对真实DOM的一种抽象描述，不懂的朋友可以自行查阅相关资料。 即使使用了Virtual DOM来进行真实DOM的渲染，在页面更新的时候，也不能全量地将整颗Virtual DOM进行渲染，而是去渲染改变的部分，这时候就需要一个计算Virtual DOM树改...
Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了； JavaScript只有函数构成作用域(注意理解作用域，只有函数 {} 构成作用域,对象的 {} 以及 if(){}都不构成作用域) ,data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。 组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的d...
vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如：//父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mounted () { console.log(this.$emit(setAge,1234567)); }这时子组件触发了父组件的修改函数使父组件的age修改成了1234567 这种情况比较...
有时候表单登录验证时，希望通过敲回车就去验证，而不需要去移动鼠标点击按钮才验证，这个小功能就需要用到按键修饰符语法： @keyup.enter=‘func’ //表示鼠标回车被按下抬起时，执行func这个函数里面的逻辑. 更多参阅：https://cn.vuejs.org/v2/guide/events.html。 主要是记录一下有这个功能，难度是没有难度的！！
一、NextTick是什么 官方给出的定义是： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 原理是什么？ this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是...
很早之前就了解了数据劫持现，重温一下源码又有了新的理解主要还是了解里面的设计思想观察者模式 import Vue from 'vue'let vm = new Vue({el: '#app',data () {return {title: '学生列表',classNum: 1,info:{a:{b: 1}},teachers: ['张三','李四'],students: [{id: 1,name:'小红'},{id: 2,name: '小明'}]}} }) 写项目写多了感觉没提升就得看看源码，提高下自己的素养。经常这样写vue2.0，new出一个vue对象里面是一个对象里面有很多...
在用Vue框架的时候，组件（component）是我们必不可以少创建的，组件既可以作为父组件，也可以作为子组件和兄弟组件。但如何让它们之间互相通信呢？ 大家用的比较多应该就是父子组件之间的通信了，父组件可以通过 props 给子组件传递参数，子组件可以通过 $emit 事件告诉父组件该干嘛干嘛了。 那么如果要实现兄弟组件间的通信呢？兄弟组件基于同一个父组件，之前有一个比较传统的做法，比如要实现A组件和B组件两个兄弟组件的通信。...
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /userrouter.js{path: ...
一、vant组件库的官网地址：https://vant-contrib.gitee.io/vant/#/zh-CN/icon 二、具体安装配置步骤： 1、在项目里cmd输入命令进行安装： npm i vant -S2、安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式(输入命令)： npm i babel-plugin-import -D3、在.babelrc.js或者 babel.config.js文件中配置plugins(放入这段代码)：注意：如果没有这两...
vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项在使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了vue的说明文档。 实际上，插槽的概念很简单，下面通过分三部分来讲。这三部分也是按照vue说明文档的顺序来写的。 进入这三部分之前，先让还没接触过插槽的同学对什么是插槽有一个简单的...
一、dispatch/commit this.$store.dispatch("actions方法名", 值) this.$store.commit(mutations方法名,值) Action提交的是Mutation，不能够直接修改state中的状态，而Mutations是可以直接修改state中状态的； Action是支持异步操作的，而Mutations只能是同步操作。 handleLogin() {this.$refs.ruleForm.validate(valid => {if (valid) {this.loading = true;this.$store//含有异步操作，例如向后台提交数据，写法： this.$store...
vue中的重点指令 什么是指令，指令使用的方式vue中的常见指令 v-text：内容渲染指令v-html：内容渲染指令v-for：列表渲染指令v-model：双向绑定指令v-on：事件绑定指令v-bind：属性绑定指令v-show：条件渲染指令v-if：条件渲染指令 vue中的常见指令: v-text 介绍： v-text是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容 作用： 设置或更新元素的内容 语法： <标签 指令='值'></标签>，如<span v-text="msg"></span> 与插...
目录基础使用小剧场 基础使用vue-router是vue中的路由，使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。vue-router的官方文档：https://router.vuejs.org/zh/guide/ 在vue文件中，即通过<router-view></router-view>或者<router-view />来渲染路由匹配到的组件。 路由文件index.js中：{pat...