learn Vue.js 目录 (Vue.js火速上手, from 163)

向所有抗争不公命运的力量致敬!

http://127.0.0.1/001/

001/index.html base

001/index2.html v-model="name" 绑定值; 是否显示 v-show='age'(display:none) 或 v-if='sex';(直接删除dom)

001/index3.html v-for

001/index4.html v-bind:href="paraInJS" 简写 :href="paraInJS"

001/index5.html v-on:click="fnInJS"; 简写做 @:click="fnInJS";
写多个动作v-on="{mouseenter:onEnter, mouseleave:onOut}";
v-on:submit="onSubmit;v-on:submit.stop="onSubmit;v-on:submit.prevent="onSubmit;; v-on:submit="onSubmit($event); v-on:submit.prevent="onSubmit($event)

001/index6.html v-model模型用于和input双向数据绑定: v-model="name";
鼠标移开才更新 v-model.lazy="name";
去掉头尾的空格 v-model.trim="name";
只能输入数字 v-model.number="name"

其他元素和类型上使用model: input type="radio";input type="checkbox"; select; textarea;

001/index7.html vue控制流 v-if

001/index8.html vue计算属性 computed:{ value2:function(){} }定义键,值是带返回值的匿名函数; 使用{{ value2 }}

001/index9.html vue方法 methods:{fn:function(){}}; 使用{{fn()}}

001/index10.html vue全局及局部组件:

001/index11.html 组件-配置组件:

001/index12.html 组件的通信

001/index12_2.html 组件的通信: 父级组件给子组件传参,通过自定义属性,从外向内传(html to js)

001/index12_3.html 组件的通信: 子级组件给父组件传参,

001/index12_4.html 组件的通信: 子级组件给父组件传参,通过事件通信,子组件触发父组件事件,同时传参

001/index13.html 组件的通信: 组件通信之任意及平行组件间通信:调度器

001/index14.html 过滤器

001/index15.html 自定义指令 - 基础配置

001/index15_2.html 自定义指令 - 修饰符及传参

001/index16.html mixin: 组件内部可以使用@mouseenter="visible=true" 调用自己的数据visible

001/index16_2.html mixin: 组件内调用方法@mouseenter="show" 访问数据

001/index16_3.html mixins 混合 - v3使用mixin减少重复代码,优先级(自定义会覆盖掉mixin)

001/index17.html slots 插槽 - 基本slot

001/index17_2.html slots 插槽 - 带名字的 slot(特别常用,可以把一个组件套到另一个组件中)



001/index4.html xx


https://study.163.com/course/courseLearn.htm?courseId=1004181065
https://study.163.com/course/courseLearn.htm?courseId=1004181065#/learn/video?lessonId=1048299100&courseId=1004181065
mixin https://study.163.com/course/courseLearn.htm?courseId=1004181065#/learn/video?lessonId=1048297109&courseId=1004181065