scoped的由来 css一直有个令人困扰的作用域问题：即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。为了避免css样式之间的污染，vue中引入了scoped这个概念。 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件。通过设置该属性，使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了...
v-module 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件，父组件监听 input 事件中传递的 value 值，并存储在父组件 data 中；然后父组件再通过 prop 的形式传递给子组件 value 值，再子组件中绑定 input 的 value 属性即可。 我们着手实现一遍： 子组件传值 首先子组件需要一个 input 标签，这个 input 标签需要绑定 input 事件，$emit 触发父组件的 input 事件，通过这种方法子组件传递值给父组件 <input type="t...
Vue项目中实现用户登录及token验证先说一下我的实现步骤： 使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后， 拿到token，将token存储到sessionStorage中，并跳转到首页前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。注销后，就清除sessionStorage里的token信息并跳转到登录页面使用eas...
00 前言$dispatch 和 $broadcast 作为一对情侣 属性，在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 —— 通过向上或向下以冒泡的形式传递事件流，以实现嵌套父子组件的通信。但是由于其显功能缺陷，在 Vue 2.0 中就被移除了。虽然 Vue 官网已经不再支持使用 $dispatch 和 $broadcast 进行组件通信，但是在很多基于 Vue 的 UI 框架中都有对其的封装，包括 element-ui、iview 等等。那么 $dispatch 和 $broadcast 到底是怎么...
现成MVVM 菜单教程 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://unpkg.com/vue/dist/vue.js"></script> </head><body><div id="app"><input type="text" v-model="message"><p>{{ message }}</p></div><script>let vm = new Vue({el: #app,data: {message: Hello Vue.js!}})</script> </body></html>视图影响数据数据影响视图项目构架 <!DOCTYPE ...
开始 声明一个对象man，可以视为vue中的data let man = {height: 180,weight: 70,wealth: 100000000 }添加Observer 作用在于将参数对象的属性变为响应式，只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例，将man作为参数扔进去。这里的proxyData是将man的属性代理到以man为参数的Observer实例上去。 class Observer {constructor(obj) {this.walk(obj)}walk(obj) {Object.keys(obj).forEach(prop => {this[pr...
学习了MVVM模式 起先还觉得有点难，后面与双向数据绑定链接起来还是很容易理解的。 那么什么是MVVM呢？ 不明思议咋们肯定和我想的一样 每个单词的首写字母呗！ 对没错就是它 Model-View-ViewModel。 可以实现我们的双向数据绑定 下面我来用我的理解解析下它们之间的关系： 哈哈 有点小尴尬哈 先来说下View与Model之间有联系吗？ 在MVVM架构下，View 和 Model 之间其实并没有直接的联系，而是通过ViewModel进行交互，Model 和 Vi...
现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State，一个正面例子来证实，同时也介绍一下Vue核心概念State。 Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 单状态树和模块化并不冲...
受控组件什么是受控组件？其值由React控制的输入表单元素称为“受控组件”。 受控组件有两个特点：1. 设置value值，value由state控制，2. value值一般在onChange事件中通过setState进行修改 什么时候使用受控组件？需要对组件的value值进行修改时，使用受控组件。比如：页面中有一个按钮，每点击一次按钮受控组件的值加1. 非受控组件什么是非受控组件？表单数据由 DOM 处理的组件非受控组件。 非受控组件有两个特点：1. 不设置valu...
今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下 1.箭头函数中的this 箭头函数内部的this是词法作用域，由上下文确定函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象2.vue中的computed 使用箭头函数 list: () => {console.log(this) } 不使用箭头函数 allFigure: function() {console.log(this) }, 使用get() allFigure: {get() {console.log(this);} } 3.自己的理...
前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画、keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的...
看到这个标题就知道这篇文章接下来要讲的内容，我们在使用vue的时候methods、watch、computed这三个特性一定经常使用，因为它们是非常的有用，但是没有彻底的理解它们的区别和各自的使用场景，也很难用好它们，希望接下来的介绍为你答疑解惑。 computed 我们先来看计算属性:computed，光看名字也知道是用来干什么的，计算属性当然是用来计算的，但是是怎么计算的呢？计算属性有两个显著的特点： 计算属性计算时所依赖的属性一定是响...
今天做了一个需求，场景是这样的： 在页面拉取一个接口，这个接口返回一些数据，这些数据是这个页面的一个浮层组件要依赖的，然后我在接口一返回数据就展示了这个浮层组件，展示的同时，上报一些数据给后台（这些数据就是父组件从接口拿的），这个时候，神奇的事情发生了，虽然我拿到数据了，但是浮层展现的时候，这些数据还未更新到组件上去。 父组件： <template>.....<pop ref="pop" :name="name"/> </template> <script> expor...
ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点普通的DOM元素上使用 <div id="app7"><input type="text"ref="T...
前言 做移动端时，适配 是必须的。使用rem单位，可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。 px2rem 地址：https://www.npmjs.com/package/px2rem 这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexible cnpm install --save lib-flexible在main.js中 ：import 'lib-flexible/flexible'2.引入px2rem-loader cnpm install --save px2rem-loader3.将p...