vue官方文档学习 - 随笔分类 - 半亩花田i

vue-cli3快速创建项目

摘要：一、安装 npm install -g @vue/cli # OR yarn global add @vue/cli 查看安装是否成功以及版本：vue -V 二、创建项目 vue create my-project 指向的vuecli3是因为上一次记录过的cli3配置，第一次执行create是没有的阅读全文

posted @ 2020-05-21 15:46 半亩花田i 阅读(1324) 评论(0) 推荐(0) 编辑

vuex状态管理

摘要：一、什么是Vuex 1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。(可以当成全局对象理解。) 2.Vuex 和单纯的全局对象有两点不同： Vuex 的状态存储是响应式的。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。 3.Vuex的核阅读全文

posted @ 2019-10-17 15:04 半亩花田i 阅读(186) 评论(0) 推荐(0) 编辑

vue组件之间的传值方式

摘要：vue是一个轻量级的渐进式框架，对于它的一些特性和优点在此不做阐述，本篇文章主要来学习一下Vue子父组件通信的问题。 gitHub地址：整个案例的Demo 首先先定义一下，相对本案例来说App.vue是父组件, Child.vue是子组件。一、父组件向子组件传值 1、创建子组件，在src/comp 阅读全文

posted @ 2019-01-09 16:37 半亩花田i 阅读(343) 评论(0) 推荐(0) 编辑

vue-router的基本使用

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson14 安装直接引入： vue-router下载链接：点击复制代码 NPM下载：如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：在你的文件阅读全文

posted @ 2019-01-07 16:06 半亩花田i 阅读(840) 评论(0) 推荐(0) 编辑

vue过滤器

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson13 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器阅读全文

posted @ 2018-12-25 17:22 半亩花田i 阅读(233) 评论(0) 推荐(0) 编辑

vue生命周期详解

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson12 首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉：可以看到在vue 阅读全文

posted @ 2018-12-25 16:17 半亩花田i 阅读(528) 评论(0) 推荐(0) 编辑

Vue的Ajax(vue-resource/axios)

摘要：一简介 1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现 2、axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护 3、阅读全文

posted @ 2018-12-24 16:32 半亩花田i 阅读(548) 评论(0) 推荐(0) 编辑

Vue实例属性/方法/生命周期

摘要：一实例属性 var app = new Vue(); app.$el >返回当前挂在DOM对象。 app.$data >返回当前实例data里面的数据 app.$options >访问自定义的属性三实例方法 app.$watch >监听数据（脏检查）举例栗子： //浅度监听 vm.$watc 阅读全文

posted @ 2018-12-24 15:33 半亩花田i 阅读(126) 评论(0) 推荐(0) 编辑

Vue自定义指令

摘要：一简介自定义指令：以V-开头的，扩展了HTML的语法，通过自定义指令可以操作DOM: 栗子一：栗子二：钩子函数的参数 (即 el、binding、vnode 和 oldVnode): el: 指令所绑定的元素，可以用来直接操作DOM。 binding: 一个对象，包含指令的很多信息。 vno 阅读全文

posted @ 2018-12-24 11:23 半亩花田i 阅读(225) 评论(0) 推荐(0) 编辑

深入了解组件- -- 动态组件 & 异步组件

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson11 一在动态组件上使用keep-alive 在这之前我们已经有学习过用is特性来切换多标签的页面，但有些时候会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。举阅读全文

posted @ 2018-12-10 17:40 半亩花田i 阅读(216) 评论(0) 推荐(0) 编辑

深入了解组件- -- 插槽

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson10 一插槽内容举例：当组件渲染的时候，这个 <slot> 元素将会被替换为<font-awesome-icon>组件内的内容。插槽内可以包含字符串以及任何模板代码，包阅读全文

posted @ 2018-12-06 17:38 半亩花田i 阅读(852) 评论(0) 推荐(0) 编辑

深入了解组件- -- 自定义事件

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson09 一事件名举例：事件名不同于组件和prop,不存在任何自动化大小写的转换，而是触发的事件名需要完全匹配监听这个事件所用的名称。假如说，如果触发一个 camelCa 阅读全文

posted @ 2018-12-06 17:34 半亩花田i 阅读(385) 评论(0) 推荐(0) 编辑

深入了解组件- -- Prop

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson08 一 Prop的大小写(camelCase vs kebab-case) 举个例子： HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意阅读全文

posted @ 2018-12-04 17:58 半亩花田i 阅读(542) 评论(0) 推荐(0) 编辑

深入了解组件- -- 组件注册

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson07 一定义组件 1、组件名：在注册组件的时候我们始终需要给它一个名字，比如在全局注册的时候我们已经看到了。该组件名就是 Vue.component 的第一个参数。阅读全文

posted @ 2018-12-04 17:31 半亩花田i 阅读(797) 评论(0) 推荐(0) 编辑

Vue组件基础

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson06 一 vue组件基本实例举个例子： (1)因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、m 阅读全文

posted @ 2018-12-04 11:44 半亩花田i 阅读(275) 评论(0) 推荐(0) 编辑

Vue表单

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson05 一 vue表单基础用法举个例子：注意：有时候我们可能想把值绑定到Vue实例的一个动态属性上，这时可以用v-bind实现，并且这个属性可以不是字符串。二修饰符举阅读全文

posted @ 2018-12-03 17:44 半亩花田i 阅读(398) 评论(0) 推荐(0) 编辑

Vue事件处理

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson04 一 vue事件处理方法实现举个例子：二方法传参举个例子：三 vue访问原生DOM事件举个例子：四事件修饰符五系统修饰符(键盘事件) 配置键盘码(自定阅读全文

posted @ 2018-12-03 15:58 半亩花田i 阅读(328) 评论(0) 推荐(0) 编辑

Vue列表渲染

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson03 一 v-for循环数组输出结果：Foo Bar ，0 Foo 1 Bar 注意：也可以用of替代in作为分隔符，因为他是最接近javascript迭代器的语法。一阅读全文

posted @ 2018-12-03 14:50 半亩花田i 阅读(186) 评论(0) 推荐(0) 编辑

Vue条件渲染

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson02 一用v-if显示单个元素举个例子：输出结果：显示2 二 v-if显示多个元素需配合<template> v-else元素必须紧跟在带v-if或者v-else-if 阅读全文

posted @ 2018-12-03 14:29 半亩花田i 阅读(176) 评论(0) 推荐(0) 编辑

Vue中class与style绑定

摘要：gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson01 在将 v-bind 用于 class 和 style 时，表达式的类型：除了字符串之外，还可以是对象和数组。一用对象的方法绑定class 很简单，举个例子： * 最阅读全文

posted @ 2018-11-30 10:45 半亩花田i 阅读(221) 评论(0) 推荐(0) 编辑

随笔分类 - vue官方文档学习

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论