![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础-Vue
Vue基础知识简介
我有一个梦!
努力拼搏,坚持不解!
展开
-
在windows下搭建vue-cli3项目环境
说明今天将介绍vue-cli脚手架在windows环境下搭建项目的过程。其中,vue-cli的版本是3.0,电脑系统是windows10。搭建过程第一步安装vue-cli,在这里我首先在桌面建立了一个文件夹test,然后将它使用vscode打开。我在命令行输入如下命令即可安装全局安装vue-cli。当前,你也可以在cmd或者其他命令行工具中输入命令。第二步安装vue-cli项目,使用vue create 项目名称即可开始安装项目。在安装的过程中,我们都默认回车选择默认配置。如下图所示。这里原创 2020-07-03 15:32:50 · 611 阅读 · 0 评论 -
用vue组件实现不同样式的按钮
说明原创 2020-07-03 10:23:13 · 3590 阅读 · 0 评论 -
vue过滤器实现日期格式化
说明今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例。大家都知道,我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。console.log(new Date());我们获取的是一个标准时间,控制台的输出如下所示。在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化。过滤器在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下:// Vue.filter(过滤器名称,处原创 2020-07-01 20:02:06 · 3151 阅读 · 2 评论 -
vue组件的全局注册和局部注册
说明vue中的组件是vue.js最强大的功能之一,它可以扩展 HTML 元素,封装可重用的代码,实现代码的复用。今天将介绍一下组件的全局注册和局部注册。全局注册全局注册的组件,每一个HTML区域都可以引用。我们使用Vue.extend()来定义组件,使用Vue.component()来注册组件。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta n原创 2020-06-30 14:53:31 · 1114 阅读 · 0 评论 -
vue小案例-todolist
说明今天将介绍的是用vue写的一个小案例todolist。效果展示它可以实现信息的增加和删除、按条件选择展示在页面中等功能。代码展示index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2020-06-29 12:50:38 · 2200 阅读 · 0 评论 -
v-if、v-else和v-else-if的用法
说明今天将给大家介绍vue.js中常见指令v-if、v-else和v-else-if。v-if的用法v-if根据判断条件的值来有条件的渲染元素。如果条件的值为真,则元素出现在页面中。反之则不会出现。判断条件可以是一个变量:<div id="app"> <p v-if="flag">Hello</p></div><script> new Vue({ el: "#app", data: { flag: true, }原创 2020-06-28 10:02:37 · 5578 阅读 · 0 评论 -
v-on的用法
说明今天将介绍一下vue.js中的指令v-on的用法。用法v-on是用来给目标元素绑定事件的,事件的类型由参数决定。接下来,将举一个v-on用法的小例子。代码如下。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g原创 2020-06-28 09:21:23 · 13556 阅读 · 1 评论 -
v-for的用法
说明今天将介绍一下vue.js中的v-for的用法。用法直接上代码了。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <原创 2020-06-28 08:43:26 · 1388 阅读 · 2 评论 -
v-text和v-html的用法
前提今天开始了前端流行的框架之一Vue.js的学习,我的内心是激动的。接下来,我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。v-text的使用方法直接上代码了。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sca原创 2020-06-24 16:45:55 · 10697 阅读 · 4 评论