Vue
安妍妍
Go Big Or Go Home.
展开
-
Vue系列(九)之生命周期
生命周期Vue实例提供了生命周期供我们调用。所谓生命周期就是Vue实例从创建到销毁的过程。直接看代码注视吧:<script> var vm = new Vue({ el: '#app', data: { name: 'ayy' }, /** * 实例初始化之后 ...原创 2019-12-31 16:59:17 · 169 阅读 · 1 评论 -
Vue系列(八)之计算属性和侦听器
计算属性和侦听器计算属性侦听器模板内的表达式非常便利,但不适合复杂的逻辑,所以就有了计算属性。计算属性计算属性写在computed选项中。举一个简单的例子????:data中有firstName,lastName,都是响应式的,页面上显示全名(firstName + lastName)。<div id="app"> <input v-model="firstnam...原创 2019-12-31 15:06:08 · 114 阅读 · 0 评论 -
Vue系列(十一)之vue-cli脚手架创建项目
环境配置下载安装Node.js设置镜像简单的命令安装vue-cli脚手架创建项目为什么需要配置环境? 为了快速开发,我们不可能赤手空拳的下代码。使用Vue也是这样,Vue-CLI脚手架工具和webpack构建工具都是基于Node的。所以我们需要node环境下载安装Node.jsNode官网下载Node.jswindows需要配置环境变量,方法请自行百度。终端窗口输入:node -v查...原创 2019-12-31 11:20:44 · 306 阅读 · 0 评论 -
Vue系列(十)之小结
小结到这里,vue基础的使用就介绍完了,工作中基本的业务应该可以应对了。为了检验自己是否都已经吸收消化。本节不讲解新的知识点,而是留一个作业。实现一个简单的列表,效果如下图:(数据自己模拟)心图片有点击事件;如果你实现起来比较吃力,建议你不要接着往下进行,先把前面的基础知识掌握了再说。...原创 2019-12-30 22:13:54 · 116 阅读 · 0 评论 -
Vue系列(七)之常用指令逻辑指令
逻辑指令v-showv-if家族v-for今天主要介绍的是一些帮助我们实现判断、循环等逻辑的指令,暂且叫他们为逻辑指令吧。v-show切换元素的display属性<div v-show="show" class="box"></div>data: { show: true},检查元素:将data中的show改为false:data: { ...原创 2019-12-30 22:06:18 · 210 阅读 · 0 评论 -
Vue系列(六)之常用指令v-model
v-model原创 2019-12-30 21:18:55 · 1087 阅读 · 0 评论 -
Vue系列(五)之常用指令v-on
v-on指令缩写用法修饰符stopprevent其它缩写v-on指令的缩写为:@,通常缩写用的较多。用法v-on api参数是event事件,v-on:click或@click;v-on:change或@change等<button @click="click">click</button><select @change="change"> ...原创 2019-12-30 16:35:02 · 1356 阅读 · 0 评论 -
Vue系列(四)之常用指令v-bind
v-bind指令图片的srcclass和style字符串对象自定义组件prop为了避免篇幅过长,常用指令我可能会分几个篇幅来介绍。v-bind api缩写::v-bind指令主要是绑定元素的属性(比如图片的src,元素的class,style,id等)和自定义组件(后面会讲到)的prop。来看几个常见的使用场景:图片的src<div id="app"> <...原创 2019-12-30 14:55:47 · 304 阅读 · 0 评论 -
Vue系列(三)之基本语法文本插值
基本语法Vue实例插值普通文本原始html今天主要介绍Vue常见的语法,声明式渲染和常用的指令。Vue实例上篇文章中我们使用new关键字创建了一个Vue实例:<div id="app"> <div>messgae:{{message}}</div></div><script> var vm = new Vu...原创 2019-12-30 11:33:44 · 2159 阅读 · 0 评论 -
Vue系列(二)之简单demo
简单demo今天就写一个极简单的小案例,大家来感受一下Vue给开发带来的便捷。先看效果图:很简单,一个头像图片,一个姓名,一个年龄,这三个字段是模拟从网络请求得到的数据。先看使用原生js怎么实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-12-30 10:17:10 · 458 阅读 · 0 评论 -
Vue系列(一)之初识Vue
初始VueVue是什么?Vue优势Vue现在是越来越火了,作为前端开发的你,如果还不会使用Vue,那你就out了,今天就带大家来认识一下Vue。Vue是什么?那Vue究竟是何方神圣呢? 先来看下官网的介绍:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架去掉修饰词,Vue就是一套框架,JS框架。与React.js,Angular.js一样,是...原创 2019-12-29 20:10:50 · 237 阅读 · 0 评论