Vue
晓宇码匠
尽信书,不如无书
展开
-
Vue 数组操作
Vue 数组操作Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push() 添加元素<ul id="example-1"> <li v-for="item in items" :key="item.id">{{ item.message }} </li></ul><script type="text/...原创 2019-12-09 19:00:40 · 1949 阅读 · 0 评论 -
node 的运行命令
psychologypsychology manageBuild Setup# install dependenciesnpm installnpm install --save dg-tablenpm install --save jsbarcode# 本地运行npm run dev# 打包部署npm run build# build for production ...原创 2019-09-20 08:43:18 · 2079 阅读 · 0 评论 -
vue + element 创建
vue + element 创建教程1.环境准备node安装node版本:v10.15.3node下载地址:https://nodejs.org/zh-cn/vue-cli安装全局安装vue-clinpm install --global vue-cli2.创建 vue + element 项目创建 vue 项目并初始化vue init webpac...原创 2019-08-29 21:01:14 · 188 阅读 · 0 评论 -
Vue学习之实例生命周期
通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象,如下var vm = new Vue({...})那么这个Vue实例的生命周期是怎么样的呢?本文我们就来详细的介绍下此图为Vue官方给出的生命周期图,可先大概浏览下,如果不懂先不管,继续往下看。Vue实例生命周期上图是官方给出的生命周期的流程图。我们一一来介绍下生命周期中各个方法的具体作用,为了便于理解将这些方...原创 2019-07-22 23:47:59 · 136 阅读 · 0 评论 -
Vue学习之自定义指令
Vue自定义指令案例代码还是在前一个案例的基础上我们来继续。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...原创 2019-07-22 23:47:00 · 167 阅读 · 0 评论 -
Vue学习之按键修饰符
Vue按键修饰符1.准备页面沿用前面案例的页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-07-22 23:46:14 · 1128 阅读 · 2 评论 -
Vue学习之过滤器的使用
过滤器概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示(" | ");分类:过滤器分为全局过滤器和局部过滤器(私有过滤器)全局过滤器我们先通过案例来介绍下过滤器的使用,然后再看下何为全局过滤器过滤器的语法// 声明过滤器...原创 2019-07-22 16:35:28 · 182 阅读 · 0 评论 -
Vue学习之增删改查小案例
增删改查小案例案例效果如下:其实也就是实现对表单数据的添加,删除和关键字查询的操作。综合案例1.页面布局页面布局我们通过bootstrap来快速实现,具体步骤如下1.1 基础页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...原创 2019-07-21 22:59:03 · 1311 阅读 · 0 评论 -
Vue学习之v-if和v-for指令
v-if和v-showv-if和v-show的作用有点类似,我们一起来看下,案例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2019-07-20 22:16:53 · 533 阅读 · 0 评论 -
Vue学习之样式处理
Vue样式处理一、class我们首先来看下class属性的使用。1.基本的class使用我们先来看下非vue情况的class的使用,如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten...原创 2019-07-20 22:15:58 · 230 阅读 · 0 评论 -
Vue学习之v-model指令
v-model指令介绍v-bind指令的使用前面的文章中我们已经介绍过了v-bind指令,该指令可以获取vue对象中的数据,但是这个指令只能实现 M 到V的数据传递,反过来实现不了,如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...原创 2019-07-20 22:14:29 · 157 阅读 · 0 评论 -
Vue学习之事件修饰符
Vue事件修饰符事件修饰符概览 修饰符 | 说明 -------- | -------------------------- .stop | 阻止冒泡 .prevent | 阻止默认事件 .capture | 添加事件侦听器时使用事件捕获...原创 2019-07-19 22:47:05 · 120 阅读 · 0 评论 -
Vue学习之跑马灯效果
一个简单的跑马灯效果,就是如下这种效果Vue跑马灯效果1.分析a.点击"加油"按钮绑定一个点击事件,使用v-on或者缩写:"@"b.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时...原创 2019-07-19 22:46:11 · 180 阅读 · 0 评论 -
Vue学习之基础入门
一、Vue基础介绍1.什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它...原创 2019-07-19 22:45:16 · 144 阅读 · 0 评论 -
Vue的安装及使用快速入门
一、安装node环境1、下载地址为:https://nodejs.org/en/ 2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可...原创 2019-06-30 10:11:19 · 2850 阅读 · 0 评论 -
vue常用命令
切换到文件夹cd desktop/eleme项目运行git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elmnpm install编译环境npm run dev访问 http://localhost:8088线上版本npm run build生成的elm文件夹放在服务器即可正常访问创建vue...原创 2019-07-04 22:06:15 · 112 阅读 · 0 评论 -
vue脚手架基本使用
首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具,对于刚接触的新手们建议关闭,不然代码写的不符合它的规范你的编译器会一直报错,如下图安装好脚手架之后就像这样终端输入npm run dev,然后...原创 2019-07-07 20:18:23 · 13736 阅读 · 1 评论