Vue
文章平均质量分 54
姜皓
胸藏文墨怀若谷 腹有诗书气自华
展开
-
初识 Vue(01)---(输出 Hello World)
如何输出原生 JS 使用 Vue.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src =原创 2018-06-24 11:41:39 · 1361 阅读 · 0 评论 -
初识 Vue(09)---(计算属性、方法、侦听器)
计算属性计算属性的值是一个函数,并且是内置缓存的;示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性、方法、侦听器</title> <script src="原创 2018-07-27 20:06:26 · 147 阅读 · 0 评论 -
初识 Vue(10)---(计算属性的 setter 和 getter)
计算属性的 setter 和 getter方法一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性、方法、侦听器</title> <script src="./vu原创 2018-07-27 20:33:01 · 1823 阅读 · 0 评论 -
初识 Vue(11)---(Vue 中的事件绑定)
Vue 中的事件绑定案例:点击 Hello World ,从黑变红,再次点击,从红变黑...通过 class 来实现 页面效果的变更方法一:(通过对象)对象绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue原创 2018-07-27 21:29:35 · 235 阅读 · 0 评论 -
初识 Vue(23)---(Vue 中使用 animate.css 库)
Vue 中使用 animate.css 库在上篇博客 《初识 Vue---(Vue中CSS动画原理)》基础上开始这篇博客在上篇完成 缓慢出现和隐藏功能 基础上,添加放大和缩小功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g原创 2018-07-31 21:42:28 · 2723 阅读 · 0 评论 -
初识 Vue(24)---(Vue 中同时使用过渡和动画)
Vue 中同时使用过渡和动画在上篇博客 《Vue 中使用 animate.css 库》基础上开始这篇博客在上篇博客中,完成了 引入 animate.css 库 且实现动画的效果,但发现,在刚开始时元素并没有动画效果若想让元素刚开始时也具备动画效果,则<!DOCTYPE html><html lang="en"><head> <met...原创 2018-07-31 22:21:51 · 320 阅读 · 0 评论 -
初识 Vue(12)---(Vue中的条件渲染)
Vue中的条件渲染1.通过 v-if 指令,决定标签是否在页面展示或存在(当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue原创 2018-07-28 00:02:29 · 222 阅读 · 0 评论 -
初识 Vue(13)---(Vue 中的列表渲染)
Vue 中的列表渲染1.数组循环<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 中的列表渲染</title> <script src="./vue.js"原创 2018-07-28 09:01:30 · 192 阅读 · 0 评论 -
初识 Vue(25)---( Vue 中的 JS 动画与 Velocity.js 的结合)
Vue 中的 JS 动画与 Velocity.js 的结合通过 JS 钩子添加动画(入场)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> Vue 中的 JS 动画与 Velocity.js 的结合<原创 2018-08-05 19:31:53 · 1879 阅读 · 1 评论 -
初识 Vue(26)---( Vue 中多个元素或组件的过渡动画)
Vue 中多个元素或组件的过渡动画实现多个元素的过渡动画的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> Vue 中多个元素或组件的过渡动画</title> &原创 2018-08-05 21:52:10 · 1382 阅读 · 0 评论 -
初识 Vue(14)---(组件使用中的注意点)
组件的使用1.构建组件(使用 is 方法)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件使用中的注意点</title> <script src="./vue.js&q原创 2018-07-28 11:26:25 · 223 阅读 · 0 评论 -
初识 Vue(15)---(父子组件传值)
父子组件传值示例:父组件向子组件传递数据在 Vue 中 ,父组件向子组件传值,通过属性的方式来进行传递<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件传值</title> &l原创 2018-07-28 12:16:28 · 205 阅读 · 0 评论 -
初识 Vue(27)---(Vue 中的列表过渡)
Vue 中的列表过渡功能:有一个列表项,循环显示数组中的数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 中的列表过渡</title> <script sr原创 2018-08-05 22:27:08 · 171 阅读 · 0 评论 -
初识 Vue(22)---(Vue中CSS动画原理)
Vue中CSS动画原理动画流程:(动画从无到有)1.在动画即将被执行的一瞬间,会往内部的 div 添加 两个 class 名字,分别是 fade-enter 和 fade-enter-active;2.当动画第一帧执行结束后,transition 标签分析知道这个 div 的动画效果,会在动画第二帧时做两件事:将之前添加的 fade-enter这个 class 标签去掉,再增加 f...原创 2018-07-31 21:04:59 · 815 阅读 · 0 评论 -
初识 Vue(21)---(Vue中的动态组件与v-once指令)
Vue中的动态组件与v-once指令案例:点击按钮,child-one 变成 child-two;child-two 变成 child-one<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue中的动态组件与v-原创 2018-07-29 09:06:38 · 333 阅读 · 0 评论 -
初识 Vue(02)---( TodoList demo)
TodoList demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> <script src = './vue.js'&g原创 2018-06-24 23:03:49 · 285 阅读 · 0 评论 -
初识 Vue(05)---(组件间传值)
组件间传值(改进 TodoList)改进 TodoList ,点击那个输出 ,那个输出就会消失步骤一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title>原创 2018-07-09 23:18:24 · 152 阅读 · 0 评论 -
初识 Vue(06)---(Vue 实例)
Vue 实例一、创建实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 实例</title> <script src = './vue.js'>原创 2018-07-10 08:29:19 · 151 阅读 · 0 评论 -
初识 Vue(07)---(Vue 实例的生命周期钩子)
Vue 实例的生命周期钩子(生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数)每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行...原创 2018-07-10 16:51:18 · 269 阅读 · 0 评论 -
初识 Vue(03)---(MVVM 设计模式)
MVP 设计模式Model 层:模型层Presenter 层:呈现层(业务逻辑控制层)View 层:视图层(DOM 展示)过程:视图层(V)发出一个事件交给控制器(P 呈现层),控制器调用 Ajax 去模型层(M)获取数据 ; 或者直接去视图层(V)进行DOM 操作。控制器(P 呈现层)是核心,是模型层(M)和 视图层(V) 的中转站,其中大部分代码在进行 DOM 操作(面...原创 2018-07-07 19:55:59 · 2794 阅读 · 1 评论 -
初识 Vue(04)---(组件化改造TodoList)
组件化改造TodoList原始代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> <script src = './vue.js'原创 2018-07-07 23:25:29 · 1254 阅读 · 0 评论 -
初识 Vue(16)---(组件参数校验与非Props特性)
组件参数校验与非Props特性1.组件参数校验:父组件向子组件传递内容,子组件可以对这些内容做一些约束,这种约束称为组件参数校验示例:对传入数据 content 进行约束,必须为 string 类型数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2018-07-28 15:19:58 · 878 阅读 · 0 评论 -
初识 Vue(17)---(给组件绑定原生事件)
给组件绑定原生事件示例:点击文本弹出警示框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>给组件绑定原生事件</title> <script src="./vue.js&q原创 2018-07-28 15:51:28 · 256 阅读 · 0 评论 -
初识 Vue(18)---(非父子组件间的传值)
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值)方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件传值下图这种情况的组件间传值(父子组件间隔代传值,也是非父子组件间传值)方法:将第二层作为中间层,父组件(1)通过 Props 向子组件(2)传值,父组件(2)通过 Prop...原创 2018-07-28 17:10:34 · 960 阅读 · 0 评论 -
初识 Vue(19)---(Vue 中使用插槽(slot))
Vue 中使用插槽(slot)案例:子组件中的一部分内容是根据父组件传递来的 DOM 来进行显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 中使用插槽(slot)</title> &a原创 2018-07-28 18:03:05 · 936 阅读 · 0 评论 -
初识 Vue(08)---(模板语法)
模板语法1.差值表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板语法</title> <script src = './vue.js'>&a原创 2018-07-25 23:06:27 · 154 阅读 · 0 评论 -
初识 Vue(20)---(作用域插槽)
作用域插槽有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽,为了让这个特性成为可能,你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上,然后将所有和其上下文相关的数据传递给这个插槽:使用场景:当子组件做循环,或某一部分的DOM结构是由外部传递进来时案例:子组件列表循环,传值到父组件中显示出来<!DOCTYPE html>&...原创 2018-07-29 08:20:40 · 422 阅读 · 0 评论 -
初识 Vue(28)---(Vue 中的动画封装)
Vue 中的动画封装功能:点击按钮,hello world 出现,再点击隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 中的动画封装</title> <原创 2018-08-05 23:21:06 · 381 阅读 · 0 评论