vue学习（一） vue和angular大比较

最新推荐文章于 2024-05-31 21:18:16 发布

薛定谔的喵喵喵

最新推荐文章于 2024-05-31 21:18:16 发布

阅读量6.9k

点赞数 1

分类专栏： vue-js

本文链接：https://blog.csdn.net/gongzhonghua/article/details/79724789

版权

1.vue和angular的异同？

vue

上手容易
指令以 v-xxx
html+json,然后再new Vue()实例化对象
个人维护项目
适合移动端

angular

上手难
指令以 ng-xxx
列表内容
所有属性和方法都挂载到$scope上
由google维护
适合PC端

2.vue和angular的雏形差异

vue:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue雏形</title>
	</head>
	<body>
		<div id="box">
			{
  {msg}}
		</div>
		<script src="js/vue.js"></script>
		<script>
			window.onload = function(){
				new Vue({
					el : "#box",
					data : {
						msg :"hello girls"
					}
				});
			}
		</script>
	</body>
</html>

angularJs

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>angular雏形</title>
	</head>
	<body>
		<!--<div id="box" ng-app="" ng-init="msg='hua'" ng-model="msg">
			{
  {msg}}
		</div>-->
		<div ng-app="myApp" ng-controller="myCtrl">
			{
  {msg}}
		</div>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var app = angular.module("myApp",[]);   
			app.controller("myCtrl",function($scope){
				$scope.msg = "hello girls";
			})
		
		</script>
	</body>
</html>

vue：直接实例化对象，再将带有数据的对象挂载到相应DOM节点即可。

angular : 中间多了一层controller，所有操作在相应controller的$scope中进行(纯属个人理解)。

2.vue事件

常见事件 v-on:click/mouseover... 简写 @click

事件对象 @click = "show($event)"

事件冒泡 a) ev.cancelBubble = true; b) @click.stop

默认事件 @contextmenu

阻止默认行为 a) ev.preventDefault(); b) @contextmenu.prevent

键盘事件 @keydown @keyup $event ev.keycode 回车(keycode = 13)

3.属性

写法： v-bind:src=""，简写 :src="" 不用这个可能会报一个404错误

class和style

class用法 1. :class="[a,b]" a,b为data中的数据 2. :class="{a:true,b:false}" 3.:class="json" data:{json:{a:true,b:false}}}

style用法同class

4.模板

{ {msg}}实时更新

{ {*msg}}数据只绑定一次

{ { {msg}}} html转义输出

5.过滤器

内置过滤器 uppercase lowercase capitalize currency(美元)

语法 : { {msg | filterA}} { {'welcome' | filterA | filterB}} 过滤器传参 { {msg | filterA 参数}}

6.交互

引入vue-resource

//get 请求
this.$http.get(url,param)

最低0.47元/天解锁文章

薛定谔的喵喵喵

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
vue学习（一） vue和angular大比较

1.vue和angular的异同？vue上手容易指令以 v-xxx html+json,然后再new Vue()实例化对象个人维护项目适合移动端angular上手难指令以 ng-xxx 列表内容所有属性和方法都挂载到$scope上由google维护适合web端2.vue和angular的雏形差异vue:&lt;!DOCTYPE...
复制链接

扫一扫

专栏目录