Vue
关注
分享
扫一扫
文章平均质量分 92
以vue基础为主，逐步深入Vue开发各个环节，掌握前端常用性能体验优化思路，打造完整前端工作流，提升工程化编码能力和思维能力。
qing_小诺
这个作者很懒，什么都没留下…
展开
-
【Vue】基础知识要点
vue基础知识要点原创 2022-06-30 22:02:13 · 348 阅读 · 0 评论 -
【Vue】移动端和PC端 UI框架
自从Vue成为前端的主流框架之后，各家UI框架也越来越多，今天重点聊一聊那些框架吧，以下排名不分先后，开发过程中根据自己的具体业务需求来做选择。一、移动端UI框架：1、vonic中文文档：https://wangdahoo.github.io/vonic-documents/#/在线预览：https://wangdahoo.github.io/vonic/docs/#/home...原创 2020-04-02 18:19:06 · 3524 阅读 · 1 评论 -
【Vue教程一】Vue介绍、Vue安装、项目目录介绍
一、Vue介绍：Vue.js是一套构建用户界面的前端框架，只关注视图层，还便于与第三方库(插件)兼容，能够帮我们减少不必要的dom操作；提高渲染效率；双向数据绑定。二、Vue安装：方式1：下载js到本地，直接用<script>引入，Vue 会被注册为一个全局变量。在官网（https://cn.vuejs.org/v2/guide/installation.html......原创 2019-05-10 18:26:03 · 1687 阅读 · 0 评论 -
【Vue】vue开发调试必备工具Vue Devtools的安装
step1：点击（链接:https://pan.baidu.com/s/1RLTOJxM36yGjplJyMyjmHw 密码: wp86）下载文件。（文件是编译过的，直接可以拿来安装，省得自己编译了） step2：打开chrome浏览器，点击"更多工具"-->"扩展程序"，或者直接浏览器输入"chrome://extensions/",进入到扩展程序页面，点击"加载已解压...原创 2018-08-10 10:28:27 · 268 阅读 · 0 评论 -
【Vue教程二】数据绑定、样式绑定
我们用下载vue.js文件并用script标签引入的方式来介绍基本语法，实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-.........原创 2019-05-13 16:04:13 · 935 阅读 · 0 评论 -
【Vue教程三】点击事件、表单输入事件、键盘事件
一、点击事件：1、可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。<body> <div id="app"> <!-- `greet` 是在下面定义的方法名 --> <p>{{name}}</p> <button v-on:c.........原创 2019-07-09 17:34:29 · 5981 阅读 · 0 评论 -
【Vue教程四】条件渲染、列表渲染、数组更新
一、条件渲染：【v-if】【v-show】1、v-if 指令用于条件性地渲染一块内容。1.1、在元素中使用 v-if 指令：<body> <div id="app"> <h1 v-if="seen">Hello qing!</h1> <div v-if="type === 'A'">.........原创 2019-07-11 15:48:48 · 1946 阅读 · 0 评论 -
【Vue教程五】创建和使用组件、父子组件传值、自定义输入框、prop详解和验证
一、创建和使用组件1、全局注册：注册一个全局组件语法格式如下：Vue.component('my-component-name', { /* ... */ })第一个参数‘my-component-name’为组件名2、定义组件名的方式有两种：2.1、使用 kebab-case：（短横线分隔命名的形式）Vue.component('my-component-nam.........原创 2019-07-15 14:22:02 · 1108 阅读 · 0 评论 -
【Vue教程六】插槽
1、插槽内容我们经常需要向一个组件传递内容，可以用 Vue 自定义的 <slot>元素：<body> <div id="app"> <alert-box> Something bad happened. </alert-box> </div> ...............原创 2019-07-15 18:03:15 · 1207 阅读 · 0 评论 -
【Vue教程七】自定义指令、钩子函数
一、钩子函数先来看一个场景，有一个input框，我们想让页面加载完成后，给输入框自动获得焦点，那应该怎么做呢？其实很简单，现在让我们用全局自定义指令来实现这个功能：<body> <div id="app"> <input v-focus /> </div> <script> ......原创 2019-09-09 16:51:24 · 3701 阅读 · 0 评论 -
【Vue教程八】生命周期
由于官方版本生命周期图示有点儿大，拉过来会不清晰，图示直接点击链接吧：生命周期图示下面我们将结合代码去看看钩子函数的执行：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...原创 2019-09-10 10:15:53 · 210 阅读 · 0 评论 -
【Vue教程九】获取服务器api接口数据
获取服务器api接口数据有下面几种方法：方法1：axios（https://github.com/axios/axios）看文档使用，与react引用方式相同。方法2：vue-resource （https://github.com/pagekit/vue-resource/blob/develop/docs/http.md）使用实例如下：<!DOCTYPE ......原创 2019-09-11 10:33:42 · 9964 阅读 · 0 评论 -
【Vue教程十】过渡 和 动画
待续原创 2020-04-20 17:15:46 · 501 阅读 · 0 评论 -
【Vue教程十一】监听属性watch 和 计算属性computed
一、监听属性watch1、 使用这个属性可以监听data中指定数据的变化，然后触发这个watch对应的function函数：<template> <div> <input type="text" v-model="firstName" /> + <input type="text" v-model="lastName" /> = <input type="text" v-model="fullName" />原创 2020-07-20 16:47:32 · 373 阅读 · 0 评论