Vue.js
关注
分享
扫一扫
文章平均质量分 70
吴声子夜歌
个人学习记录
展开
-
Vue——Vue-resource详解
Vue-resource 提供了一种与 RESTful API 风格所匹配的写法，通过全局变量 Vue. resource 或者组件实例中的 this.$resource 对某个符合 RESTful 格式的 url 进行封装，使得 开发者能够直接使用增删改查等基础操作，而不用自己再额外编写接口。(resource)，所以路径中不推荐有动词，只能有名词，而且所用的名词往往与数据库的表格 名对应，且一般采取复数的形式命名。GET /api/products/:id :获取某个指定产品信息。原创 2023-05-31 01:09:58 · 3508 阅读 · 0 评论 -
Vue——脚手架Vue CLI的使用
static放不会变动的文件。CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.它真的很严格,你少一个空格它都会提示你有规范错误,所以是为强迫症准备的,我就不安装它了,不安装也不影响后期开发的(但也有公司需要用它)…注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。原创 2023-05-30 22:59:19 · 98 阅读 · 0 评论 -
Vue.js--axios详解
axiosaxios是一个基于Promise，同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。安装axiosnpm install axios --saveaxios的请求方式axios(config)axios.request(config)axios.get(url [, config])axios.delete(url [, config])axios...原创 2020-02-03 12:52:16 · 1080 阅读 · 0 评论 -
Vue.js--Vuex使用详解
VuexVuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。使用安装Vuex：npm install --save vuex在...原创 2020-02-02 21:02:39 · 590 阅读 · 0 评论 -
Vue.js--导航守卫
导航守卫vue-router提供的导航守卫主要用来监听路由的进入和离开的。vue-router提供了beforeEach和afterEach，他们会在路由即将改变和改变前后触发。示例在路由跳转的同时，修改页面标题。//引入Vueimport Vue from 'vue'//引入vue-routerimport VueRouter from 'vue-router'//加...原创 2020-02-02 18:44:46 · 318 阅读 · 0 评论 -
Vue.js--前端路由与vue-router
前端路由前端路由，即由前端来维护一个路由规则。实现有两种：利用url的hash：就是常说的锚点（#），JavaScript通过HashChange事件来监听url的改变，IE7及以下需要用轮询；利用HTML5的History模式： 它是url看起来像普通网站那样，以『/』分割，没有#，但页面并没有跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，都指向同一个html文件，不...原创 2020-02-02 14:53:57 · 578 阅读 · 0 评论 -
Vue.js--Virtual Dom概述、VNode类型与属性详解
Virtual DomVirtual Dom并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。与DOM操作相比，Virtual Dom是基于JavaScript计算的，所以开销会小很多。Virtual Dom运行过程：示例：正常的DOM节点在HTML中是这样的：&...原创 2019-10-22 18:50:33 · 3224 阅读 · 0 评论 -
Vue.js--自定义指令（时间转换）
自定义指令 v-time将绝对时间转换为相对时间。（例如，社交软件发布动态里面的时间、几分钟前、几小时前…）入口页面 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content...原创 2019-10-18 08:40:52 · 705 阅读 · 0 评论 -
Vue.js--下拉菜单组件
效果#### 入口页面 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-10-17 23:00:33 · 2669 阅读 · 0 评论 -
Vue.js--标签页组件
效果入口页 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2019-10-17 21:33:18 · 644 阅读 · 0 评论 -
Vue.js--数字输入框组件
效果入口页 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2019-10-17 18:16:39 · 785 阅读 · 0 评论 -
Vue.js---自定义指令
自定义指令自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus指令用于在<input>、<textarea>元素初始化时自动获得焦点，共有两种写法：//全局注册Vue.directive('focus',{ //指令选项});//局部注册var app = new Vue({ el: '#app', directive: ...原创 2019-10-15 15:48:48 · 550 阅读 · 0 评论 -
Vue.js--$nextTick
$nextTick假设如下场景：有一个div，默认用v-if将它隐藏，点击一个按钮后，改变v-if的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是false，直接去获取div的内容是获取不到的，因为此时div还没有被创建出阿里，那么应该在点击按钮后，改变v-if的值为true，div才会被创建，此时再去获取。<!DOCTYPE html><html la...原创 2019-10-15 12:15:08 · 790 阅读 · 0 评论 -
Vue.js--组件高级用法--动态组件、异步组件
动态组件Vue.js提供了一个特殊的元素< component >用来动态地挂载不同的组件，使用is特性来选择要挂载的组件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...原创 2019-10-13 18:22:13 · 1131 阅读 · 1 评论 -
Vue.js--组件高级用法--递归组件、内联模板
递归组件组件在它的模板内可以递归调用自己，只要给组件设置name的选项就可以了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-10-13 17:42:01 · 4897 阅读 · 2 评论 -
Vue.js--作用域插槽、访问slot
作用域插槽作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-10-13 17:09:41 · 1005 阅读 · 0 评论 -
Vue.js--作用域、slot用法（单个slot、具名slot）详解
作用域在介绍slot前，需要先知道一个概念：编译的作用域。比如父组件中有如下模板：<child-component> {{message}}<child-component>这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件< child-component >的数据。父组件模板的内容是在父组件作用域内编译，子组件模板的内...原创 2019-10-13 11:56:49 · 1280 阅读 · 1 评论 -
Vue.js--非父子组件通信（中央事件总线、父链、子组件索引）详解
非父子组件通信在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景，非父子组件一般有两种：兄弟组件和跨多级组件。在Vue.js 2.x中，推荐使用一个空的Vue实例作为中央事件总线（bus），也就是一个中介，为了更形象地了解它，可以举一个生活中的例子。比如我们需要租房子，我们可能会找房产中介来登记需求，然后中介把我们的信息发给满足要求的出租者，出租者再把报价和看房时间告诉中介，由中...原创 2019-10-13 10:26:33 · 680 阅读 · 0 评论 -
Vue.js组件通信之自定义事件
组件通信从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种，归纳起来，组件之间的通信可以用下图来表示：自定义事件当子组件需要向父组件传递数据时，就要用到自定义事件。子组件用**$ emit()来触发事件**，父组件用**$ on()**来监听子组件的事件。父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件。<!DOCTY...原创 2019-10-12 23:58:07 · 983 阅读 · 0 评论 -
Vue.js--组件props数据验证
数据验证一般当组件需要提供给别人使用时，就需要使用数据验证。示例：<script> Vue.component('my-component',{ props:{ //必须是数字类型 propA: Number, //必须是字符串或数字类型 propB:[Stri...原创 2019-10-12 22:27:12 · 817 阅读 · 0 评论 -
Vue.js--组件使用props传递数据
基本用法通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。在组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。示例：构造一个数组，接收一个来自父组件的message，并把它再组件模板中渲染<!DOCTY...原创 2019-10-12 22:02:18 · 820 阅读 · 0 评论 -
Vue.js--组件注册（全局注册、局部注册）、表行组件、组件中的data、组件数据的共享问题详解
组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：组件注册组件与Vue实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册：<!DOCTYPE html><html lang="e...原创 2019-10-12 21:27:27 · 1254 阅读 · 0 评论 -
Vue.js--条件判断（v-if、v-else、v-else-if、v-show）
v-if条件判断使用v-if指令：<div id="app"> <p v-if="seen">你看不到我</p> <template v-if="ok"> <h1>测试</h1> <p>春江潮水连海平</p> <p>海上明月共潮生</p>...原创 2019-10-09 13:18:39 · 3774 阅读 · 1 评论 -
Vue.js---指令与事件、语法糖
指令与事件指令（Directives）是Vue.js模板中最常用的一项功能，它带有前缀v-，指令的职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。v-if:<div id="app"> <p v-if="show">显示这段文本</p></div><script> var app = new Vue...原创 2019-10-08 21:45:24 · 1400 阅读 · 0 评论 -
Vue.js--过滤器
Vue.js支持在 {{}} 插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置。示例：对时间进行格式化处理<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-10-08 19:36:54 · 787 阅读 · 0 评论 -
Vue.js--生命周期详解
生命周期每个Vue实例创建时，都会经历一系列初始化过程，同时也会调用相应的声明周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。（类似于jQuery的ready()方法）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...原创 2019-10-08 13:11:21 · 720 阅读 · 0 评论 -
Vue.js--目录结构详解
目录结构解析目录/文件说明build项目构建(webpack)相关代码config配置目录，包括端口号等。我们初学可以使用默认的。node_modulesnpm 加载的项目依赖模块src这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。components: 目录里面放...原创 2019-10-08 09:44:08 · 886 阅读 · 0 评论 -
Vue.js--插值与表达式
使用双大括号(Mustache语法) "{{}}"是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如：<div id="myApp">{{str}}</div><script> var app = new Vue({ el: '#myApp', data: { str: '测...原创 2019-10-08 09:27:53 · 1517 阅读 · 0 评论 -
Vue.js--实例与数据绑定
Vue实例Vue.js应用的创建很简单，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：var app = new Vue({ //选项})变量app就代表了这个Vue实例。事实上，几乎所有的代码都是一个对象，写入Vue实例的选项内。el：首先：必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也...原创 2019-10-07 21:02:57 · 1729 阅读 · 0 评论 -
Vue.js--循环语句（v-for）
循环语句循环语句使用v-for指令。v-for指令需要以site in sites形式的特殊语法，sites是元数据数组并且site是数组元素迭代的别名。v-for可以绑定数据到数据来渲染一个列表：<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} ...原创 2019-10-09 15:39:42 · 833 阅读 · 0 评论 -
Vue.js--计算属性
计算属性计算属性用于解决表达式过长或逻辑复杂时的问题。关键字：computed示例：<!--处理元数据，便于二次利用--><div id="myApp"> 今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}日元，含税价格为：{{priceInTax}}日元，折合人名币为：{{pricceChinaRMB}}元。</div&g...原创 2019-10-09 21:18:00 · 690 阅读 · 0 评论 -
Vue.js--计算属性缓存
计算属性缓存我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。<div id="app"> <!--注意：这里是方法，所以要带 () --> {{reversedText()}}&...原创 2019-10-09 21:31:49 · 993 阅读 · 0 评论 -
Vue.js--v-bind:class绑定Class、v-bind:style绑定内联样式
绑定Class示例：基本用法，点击按钮切换样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-10-10 11:16:53 · 1055 阅读 · 0 评论 -
Vue.j--内置指令（v-cloak、v-once、v-show）
v-cloak：v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none；配合使用：<div id="app" v-cloak> {{message}}</div><script> var app = new Vue({ el: '#app', ...原创 2019-10-10 16:18:17 · 850 阅读 · 0 评论 -
Vue.js--v-on方法及修饰符
v-on基本用法示例：计数器，点击一次按钮计数器+1<div id="app"> 点击次数：{{counter}} <button @click="counter++">+1</button></div><script> new Vue({ el: '#app', data:...原创 2019-10-10 17:03:28 · 853 阅读 · 0 评论 -
Vue.js--表单的使用（基本用法、单选按钮、复选框、下拉列表）详解
基本用法表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。<div id="app"> <input type="text" v-model="message" placeholder="输入..."> <p>输入的内容是：{{message}}</p></div>...原创 2019-10-11 09:41:33 · 2516 阅读 · 0 评论 -
Vue.js--表单修饰符（.lazy、.number、.trim）详解
.lazy在输入框中，v-model默认是在input事件中同步输入框的数据（除了输入法中文输入的情况），使用修饰符 .lazy 会转变为 change 事件中同步（类似懒加载）:<div id="app1"> <input type="text" v-model.lazy="message"> <p>{{message}}</p>...原创 2019-10-11 09:56:29 · 2429 阅读 · 0 评论 -
Vue.js--表单绑定数据、修饰符详解
单行输入框<div id="myApp"> <h1>表单控件绑定</h1> <input type="text" v-model="message" placeholder="编辑栏"> <p>Message is: {{message}}</p></div><script>...原创 2019-10-11 10:03:48 · 771 阅读 · 0 评论 -
Vue.js概述、MVVM模式、Vue.js与JavaScript和jQuery的不同之处
Vue.jsVue.js的官方文档中是这样介绍它的：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式（Progressive），就是我们可以一步一步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能：解耦视图与...原创 2019-10-05 23:04:57 · 5313 阅读 · 0 评论