Vue第一次课程笔记

Vue第一次课程笔记

使用Vue第一步

只有IE8以上的浏览器才能兼容

引入Vue

在

new Vue({json})

el ->vue 输出的作用域
data -> 输出的数据

{{}} ->在作用域里面放入在输出的模版 模板里放入data中定义的变量。

el类似jquery

常用指令
angular ng-show ng-repeat ng-model

v-show display true/false true = 显示 false = 隐藏

json -> 键值对
左边是键 右边是值

v-for = ‘i in arr’
{{i}} => 值
{{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲} => 索引值 {{key}} => 键值

v-moodel = var 让标签与变量双向绑定
数据和输出进行绑定

事件 标签内输入
v-on:click = 函数名
@click = 函数名 （推荐）
函数定义: 函数名:function(参数){函数体}

事件对象
$event传入事件对象如果没有传入的参数默认第一个参数就是事件对象如果想要在函数中传入其他参数则，在调用函数时形参用$event表示，直接写event会被识别为undifined变量
此外，可以通过console。log(event) 命令在浏览器控制台查看事件对象的属性

防止冒泡（冒泡:标签嵌套时从内标签到外标签都触发同一事件）
传统方案：在函数体内输入以下任一命令
1.event.cancelBubble = true;
2.event.stopPropagation();
Vue方案（推荐):@click.stop =函数名

阻止默认事件
传统方案:函数体内输入
1.event.preventDefault
Vue方案(推荐)
@click.prevent = 函数名
@contextmenu:prevent = 函数名

键盘事件
keydown/up
按键对象可以用keyCode进行唯一标识
Vue快速识别按键:
keydown.65.66.68
keydown.left…

el 作用域/ data 数据/ methods 事件