vue:一个mvvm框架(库),小巧,简单易学 容易上手
vue与angular区别:
vue:简单易学易上手
指令以v-xxx,
一段html代码配合上json,在new出vue实例
个人维护项目
适用于移动端项目
angular:上手难
指令以ng-xxx
所有属性和方法都挂在$scope身上
angular由google维护
适用于PC端项目
共同点:不兼容低版本IE
vue基本雏形:
html: <div id="box">{{msg}}</div>
var c = new vue({
el:"#box", //选择器
data:{
msg: 'welcome vue!'
}
})
angular展示一条基本数据:
var app = angular.module('app',[ ]);
app.controller('xxx',function($scope){
$scope.msg = 'welcome'
})
html: div ng-controller = "xxx"
{{msg}}
常用指令:(指令-- >扩展html标签功能属性)
vue: v-modle 一般表单元素(input)双向数据绑定
循环:v-for="name in arr/(name index) in arr"
{{name}} {{index}}
v-for="name in json/(name,key) in json/(name,key,index) in json"
{{name}} {{key}} {{index}}
angular: ng-modle ng-controller ng-repeat ng-click ng-show
$scope.show = function(){}
事件:
v-on:click="函数" ---简写为----> @click="函数"
v-on:click/dbclick/mouseout/mouseover/mousedown...
new vue({
el:"#box",
data:{
arr: ['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){alert(1)}
}
})
html: <input type="button" value="按钮" v-on:click="show()" >
显示隐藏:
v-show = "true/false"
事件对象:
@click="show(event)"
事假冒泡:
阻止冒泡 1、ev.cancelBubble = true;
2、@click.stop 推荐
默认行为:
阻止默认行为 1、ev.preventDefault();
2、@contextmenu.prevent 推荐
键盘事件:
@keydown $event ev.keyCode
常用键:
回车 1、@keyup.13
2、@keyup.enter
上、下、左、右
@keyup/keydown.up/down/left/right
原文地址:https://blog.csdn.net/weixin_44545318/article/details/88390757
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。