vue学习笔记
文章平均质量分 77
爱编译也爱吃肉的喵
方法总比问题多
展开
-
Vue之todoList
目前公司做H5项目主要使用vue框架,便在这一周开始学习vue,之前用node做毕设,因此在接触vue的时候挺有熟悉感,基本上是路由-视图-模板框架模式。本文主要是讲解一下todolist这个例子,相对来说比较简单。 TodoList.vue:视图组件,进行增删操作 index.js:路由,在这个demo中较为简单,只有一个主页默认路由 App.vue:主组件,有点像是iframe,所有页面原创 2017-07-24 09:55:54 · 321 阅读 · 0 评论 -
Vue之响应式原理
Vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Obeject.defineProperty()来劫持各个属性的setter、getter。在数据变动时给订阅者发送消息,触发响应的监听回调Object.defineProperty通过此函数实现双向绑定,直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。语法:Object.defineProp...原创 2018-11-20 23:07:00 · 272 阅读 · 0 评论 -
使用Vue开发留言列表
Error in render: “TypeError: Cannot read property ‘list’ of undefined”Property or method “message” is not defined原创 2018-06-10 11:31:42 · 4188 阅读 · 5 评论 -
vue常见错误解决
Error in render: “TypeError: Cannot read property ‘list’ of undefined”[Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this proper...原创 2018-06-10 10:28:40 · 84089 阅读 · 16 评论 -
使用Vue开发数字输入框组件
最近在通过《Vue.js实战》系统学习Vue,虽然在项目中已多次使用Vue进行开发,但是对于一些非常基础性的知识点还不是很了解,因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。 源代码:https://github.com/zndada/learnVue项目整体结构├── src 项目代码│ ├── common 公共js库│ │ ├── number.js 判断是...原创 2018-04-16 20:37:30 · 2114 阅读 · 0 评论 -
Vue之实例详解
Vue的实例是Vue框架的入口,包含了页面中的业务逻辑处理、数据模型等new Vue({ el: '#app', data () { return { swiperOption: { autoplay: 3000, initialSlide: 1, loop: true, paginationClickab原创 2017-07-27 11:50:47 · 831 阅读 · 0 评论 -
Vue之生命周期
Vue实例从创建到销毁的过程。 开始创建→初始化数据(配置数据观测data observer)→编译模板→挂载DOM、渲染→更新→渲染、卸载Vue可注册钩子hook hook:事件劫持机制,会比事件更早进行执行处理。可理解为vue的内置事件,但可自己配置let app=new Vue({ el:"#app", data:{ name:'我是名称',原创 2017-07-26 16:29:48 · 342 阅读 · 0 评论 -
Vue之slot内容分发
Slot内容分发,使用特殊的<slot>元素作为原始内容的插槽,假设父组件需要在子组件内让一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。单个slot:可以将父组件放在子组件的内容,放到想让他显示的地方;父组件放在子组件的内容插到了子组件的<slot></slot> 位置具名slot:将放在子组件里的不同html标签放在不同的位置,父组件在要分发的原创 2017-07-26 11:13:06 · 507 阅读 · 0 评论 -
Vue之插件使用
插件通常会为vue添加全局功能MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, bin原创 2017-07-26 11:17:05 · 937 阅读 · 0 评论 -
vue之v-model
v-model在表单控件或者组件上创建双向绑定,使vue实例中data与其渲染的DOM元素的内容保持一致,无论哪一方被改变,另一方相应更新限制: <input>/<select>/<textarea>/components相当于: <input v-bind:value="something" v-on:input="something = $event.target.value">组原创 2017-07-25 16:04:36 · 354 阅读 · 0 评论 -
Vue之render函数
render方法的实质就是生成template模板; 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的; 通过这三个参数,可以生成一个完整的模板官网实例//未使用render函数Vue.component('anchored-heading', { template: '#anchored-heading-template', props: {原创 2017-08-09 15:56:59 · 2490 阅读 · 0 评论 -
Vue之keep-alive
使用场景:动态组件切换,当你选择了一篇文章,切换到 b 标签,然后再切换回 a,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例;当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会...原创 2019-05-12 16:05:44 · 990 阅读 · 0 评论