首先回顾几个关键字:
MVC 、MVVM、model 数据模型、view视图、controller 控制器、module模块、虚拟dom 【在js当中模拟dom树,在数据发生变化时候,会进行dom和虚拟dom的对比,针对变化的dom进行更新】
vue 的特点:
1:相比于angular,vue简化了很多的功能;
2:指令和组件,在angular烛龙指令和自定义的标签是混在一起的
3:性能还,体积小,不使用脏查询;虚拟dom
4:灵活,渐进式的技术栈
vue 的使用:
一:数据绑定:
1:{{}}可以使用js表达式;包括三目运算,但是不包括if判断
2:v-once ; 数据不会再次变化,只绑定一次
3:v-html: 可以应用html结构
二:常用指令:
1:v-for: value 、 index、 key 、 trank-by (1.x版本)
类似于angular中的ng-repeat
2:v-model: 将数据模型绑定到输入框中;
3:v-if :v-else-if : v-else;
v-if 于 v-show 的区别;
v-show 是隐藏或者显示元素
v-if 是渲染不渲染的问题,标签都没有了;
v-else 是必须更在v-if后面 v-else-if;
4:v-show 指令元素是否显示
5:v-bind:可以绑定任意属性;比如:class 、 style 、 disable
可以接受表达式;可以接受数组;
6:v-on :
事件监听:事件处理-- methods : 事件对象;
事件修饰符:
阻止冒泡:stop;
阻止默认行为:prevent
事件捕获:capture
自身触发:self;
单次事件:once;
按键修饰符:可以绑定指定的按键;
三:组件:
全局:component
1:template:组件展示的模板;只能拥有一个父级;
注意:特殊标签需要用到is关键字
2: data :是一个函数,定义当前组件的数据类型;
3:props: 作用:可以将父级的数据传递给予子级的组件;
语法:字面量 ; 动态 ;
特性:单项数据流;
事件:监听事件$on
触发事件:$emit
4:slot:多发内容; -slot
多个slot
5components 局部