vue
Yee Jason
这个作者很懒,什么都没留下…
展开
-
Vue 开发TodoList(v-model、v-for、v-on) 二
实现:http://www.todolist.cn/的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src=&quo原创 2019-03-02 17:40:00 · 203 阅读 · 0 评论 -
Vue 列表渲染(十二)
一、数组的循环 当我们想修改一个数组的时候,不能通过下标来添加数组,而是要通过数据的边离方法来进行操作 1、通过数组函数 push pop shift splice sort reverse 2、通过改变数组的引用来变数据 二、tmplate的用法 三、对象的循环<!DOCTYPE html><html lang="en">&...原创 2019-03-04 09:27:50 · 166 阅读 · 0 评论 -
Vue 组件中使用的细节(十三)
一 、is解决标签中的bug例如以下代码html <table> <tbody> <row></row> <row></row> <row></row> </tbody>&am原创 2019-03-04 11:09:12 · 324 阅读 · 0 评论 -
Vue 中组件参数校验与非Props特性(十六)
一、Props特性1、父组件传递、子组件要接,而且可以在组件里用父组件的数据2、不会显示在dom的元素标签中二、 非Props特性1、父组件传递、子组件不接、而且没有办法使用2、属性会展示在子组件dom标签的属性里面<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2019-03-06 22:40:56 · 123 阅读 · 0 评论 -
Vue -- 给组件绑定原声事件(十七)
给 @click 加入 native 就是绑定原生的事件了@click.native="handleClick"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>给组件绑定原生事件&l原创 2019-03-06 22:48:22 · 316 阅读 · 0 评论 -
Vue -- 非父子组件传值(十八)
示意图 (各个组件传值)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <scr原创 2019-03-06 23:05:14 · 96 阅读 · 0 评论 -
Vue 父子组件传值(十四)
1、父组件给子组件传递值(单项数据流) 父组件传递过来的值,子组件不能修改,需要自己克隆出来修改这个值2、子组件传递父组件 this.$emit('inc', 2); // 向父组件传递事件(inc),传值 <!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2019-03-04 14:50:04 · 168 阅读 · 0 评论 -
Vue -- 使用插槽(十九)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue中使用插槽 (slot)</title> <script src="../vue.js"&g原创 2019-03-07 10:07:49 · 94 阅读 · 0 评论 -
Vue -- 作用域插槽(二十)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue中的作用域插槽</title> <script src="../vue.js">&am原创 2019-03-07 10:16:36 · 162 阅读 · 0 评论 -
Vue -- 动态组件与v-once指令(二十一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态组件与v-once指令</title> <script src="../vue.js">原创 2019-03-07 10:27:36 · 274 阅读 · 0 评论 -
Vue 中的 set 方法(十五)
一、改变对象的值 Vue.set(vm.userInfo, "address", "beijing"); vm.$set(vm.userInfo, "address", "shanxi");二、改变数组的值 Vue.set(vm.userInfo, 1, 6); vm.$set(vm.userInfo, 3, 100);<!DOCTYPE html>&...原创 2019-03-06 18:11:17 · 482 阅读 · 0 评论 -
Vue 条件渲染(十一)
第一: v-if v-if v-else v-if v-else-if v-else <div v-if="show">{{message}}</div>第二:v-show="show" (display:none/display:block) <div v-show="show">{{message}}</d原创 2019-03-03 18:25:22 · 92 阅读 · 0 评论 -
Vue 入门(一)
兼容Vue不支持IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 引入vue.js文件 原生javascript代码<!DOCTYPE html><html lang="en"><head> <m...原创 2019-03-02 17:24:28 · 92 阅读 · 0 评论 -
Vue MVVM模式 (三)
传统的模式 M(数据层)V(视图)P(控制器) 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src=原创 2019-03-02 18:14:37 · 706 阅读 · 0 评论 -
Vue 定义组件及简单使用(四)
组件是为了更好的管理、维护代码 定义全局组件Vue.component("TodoItem", { props: ['content'], template: "<li>{{content}}</li>"}); 定义局部组件// 局部组件var TodoItem = { pr...原创 2019-03-02 18:40:48 · 438 阅读 · 0 评论 -
Vue 简单的组件间传值(五)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue.js"></原创 2019-03-03 14:39:38 · 160 阅读 · 2 评论 -
Vue 生命周期(六)
生命周期图 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue实例生命周期函数</title> <script src="./vue.js"原创 2019-03-03 14:53:35 · 84 阅读 · 0 评论 -
Vue 模板语法(七)
第一种 {{name}}第二种<div v-text="name"></div>第三种<div v-html="name"></div>区别:v-html 会解析标签语法,而 {{name}} 和 v-text不会相同之处:都可以写js的表达式,而不仅仅是变量 + ' Lee'<!DOCTYPE html&原创 2019-03-03 16:54:32 · 108 阅读 · 0 评论 -
Vue 计算属性、方法、侦听器(八)
1、computed 计算属性 =》 有缓存 例如改变 age的值,那么computed 里中的 fullName 不会执行一次,而是会取出缓存里的 只有当改变 fullName 里的 firstName和lastName 才执行2、使用方法调用 {{fullName()}}3、watch 侦听器 区别: watch(侦听器)和 computed(计算属性)...原创 2019-03-03 17:05:45 · 93 阅读 · 0 评论 -
Vue 计算属性得getter和setter(九)
get: 首先会寻找 data 里得 fullName值,如果不存在,那么寻找computed里得,这里就找到了get set: 只有改变 fullName里get 里存在的值话,那么就会重新改变fullName的值。<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-03-03 17:15:06 · 569 阅读 · 0 评论 -
Vue 样式绑定(十)
一、class 第一种:对象绑定 :class="{activated: isActivated}" 第二种:数组绑定 :class="[activated, activatedOne]"二、style 第一种:对象绑定 :style="styleObj" // obj 第二种:数组里嵌套多个对象...原创 2019-03-03 18:05:27 · 139 阅读 · 0 评论 -
Vue -- CSS动画原理(二十二)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="../vue.js">&a原创 2019-03-07 10:52:30 · 114 阅读 · 0 评论