随笔分类 -  Vue

vue--响应式原理(2)
摘要：在谈 Vue 响应式原理之前，我们需要先了解一下 ES5 的 Object 的一个属性 defineProperty。 下面我们来看一段官方的介绍 The Object.defineProperty() method defines a new property directly on an obj 阅读全文
posted @ 2020-12-03 20:07 盲仔不瞎忙 阅读(119) 评论(0) 推荐(0)
vue--响应式原理(1)
摘要：发现一篇以白话文的形式讲解 Vue 的响应式系统原理的文章，觉得不错~ 响应式系统 我们都知道，只要在 Vue 实例中声明过的数据，那么这个数据就是响应式的。 什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。 也正是因为这个系统，让我们可以脱离界面的束缚，只需要操作数 阅读全文
posted @ 2020-12-03 19:57 盲仔不瞎忙 阅读(88) 评论(0) 推荐(0)
vue--监听对象变化
摘要：思路 我们有两个难点需要解决。 第一：当对象的某个属性变化的时候，如何触发自定义的回调函数？ 答案：ES5中新添加了一个方法：Object.defineProperty，通过这个方法，可以自定义getter和setter函数，从而在获取对象属性和设置对象属性的时候能够执行自定义的回调函数。 第二：对 阅读全文
posted @ 2020-12-03 19:49 盲仔不瞎忙 阅读(719) 评论(0) 推荐(0)
vue-devtools的安装
摘要：先导 vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 第一步： 我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。 克隆方法 阅读全文
posted @ 2020-11-28 14:10 盲仔不瞎忙 阅读(342) 评论(0) 推荐(0)
Vue--修饰符
摘要：修饰符 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 <form v-on:submit.prevent="onSubmit">...</form> v-on能使用的修饰符： 修饰符 作用 .stop 调用 event.stopPropaga 阅读全文
posted @ 2020-11-28 11:09 盲仔不瞎忙 阅读(101) 评论(0) 推荐(0)
Vue--watch
摘要：在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, 阅读全文
posted @ 2020-11-28 11:07 盲仔不瞎忙 阅读(82) 评论(0) 推荐(0)
Vue--防止页面闪烁
摘要：vue会把{{ xxx }} 编译成我们指定的数据，但是在编译的那一刹那间， {{ xxx }} 还是会显示出来的。 方案1 （ 使用v-html替代 {{ }} ） <div id='app'> <span v-html='msg'></span> </div> <script src='js/v 阅读全文
posted @ 2020-11-28 11:02 盲仔不瞎忙 阅读(353) 评论(0) 推荐(0)
Vue--过滤器
摘要：过滤器用于格式化一些数据 语法 ： 数据 | 过滤器名字 例子： <div id='app'> {{text | lowercase}} </div> <script src='../js/vue.js'></script> <script> new Vue({ el : '#app', data 阅读全文
posted @ 2020-11-28 10:54 盲仔不瞎忙 阅读(92) 评论(0) 推荐(0)
Vue--自定义指令
摘要：自定义指令 使用Vue的静态方法directive，我们可以定义属于自己的指令。 格式：Vue.directive(指令的名字， 回调函数) 例子： <div id='app'> <span v-red>vue</span> </div> <script src='../js/vue.js'></s 阅读全文
posted @ 2020-11-28 10:43 盲仔不瞎忙 阅读(116) 评论(0) 推荐(0)
Vue--生命周期
摘要：什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方 阅读全文
posted @ 2020-11-28 10:35 盲仔不瞎忙 阅读(71) 评论(0) 推荐(0)
Vue--全局注册和局部注册
摘要：全局注册，注册的组件需要在初始化根实例之前注册组件； 局部注册，通过使用组件实例选项注册，可以使组件仅在另一个组件或者实例的作用域中可用 全局组件 Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit 阅读全文
posted @ 2020-11-28 10:18 盲仔不瞎忙 阅读(250) 评论(0) 推荐(0)
vue--父子组件传递数据
摘要：vue中的组件是自定的标签，可以扩展的原生html元素，封装可复用的代码 note： 1、在标签命中不要使用大写，标签名字必须用短横线隔开 2、模板中只能有一个根元素，不能使用并列标签。 3、子组件不能直接使用父组件的数据 4、子组件可以声明自己的数据 一、子组件调用父组件的data中的值： 父组件 阅读全文
posted @ 2020-11-28 10:11 盲仔不瞎忙 阅读(211) 评论(0) 推荐(0)
vue--父子组件调用彼此的方法
摘要：子组件调用父组件的方法： 父组件： <editUser ref="editUser" v-on:childMethod="parentMethod"></editUser> <script> import editUser from './Edit.vue'; export default { da 阅读全文
posted @ 2020-11-28 10:01 盲仔不瞎忙 阅读(114) 评论(0) 推荐(0)