vue 和ng的区别
vue:
读音: v-u-e
view
vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官网:http://cn.vuejs.org/
手册: http://cn.vuejs.org/api/
vue和angular区别?
vue——简单、易学
指令以 v-xxx
一片html代码配合上json,在new出来vue实例
个人维护项目
适合: 移动端项目,小巧
vue的发展势头很猛,github上start数量已经超越angular
angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目
共同点: 不兼容低版本IE
-------------------------------------------
vue基本雏形:
angular展示一条基本数据:
var app=angular.module('app',[]);
app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})
html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>
var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});
常用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show
$scope.show=function(){}
指令: 扩展html标签功能,属性
v-model 一般表单元素(input) 双向数据绑定
循环:
v-for="name in arr"
{{$index}}
v-for="name in json"
{{$index}} {{$key}}
v-for="(k,v) in json"
事件:
v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法
alert(1);
}
}
});
显示隐藏:
v-show=“true/false”
bootstrap+vue简易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一样
只需要给标签 赋予class,角色
依赖jquery
确认删除?和确认删除全部么?
-----------------------------------------
事件:
v-on:click/mouseover......
简写的:
@click="" 推荐
事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode
@keyup
常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
-----------------------------------------
属性:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来,但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来,不会发404请求
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
data:{
json:{red:a, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式,采用驼峰命名法
:style="json"
-----------------------------------------
模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出
-----------------------------------------
过滤器:-> 过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 钱
{{msg| filterA 参数}}
....
-----------------------------------------
交互:
$http (ajax)
如果vue想做交互
引入: vue-resouce
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字,默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
https://www.baidu.com/s?wd=s
作业:
1. 简易留言-> 确认删除? 确认删除全部
2. 用vue get 写个例子 weibo
vue 和ng的区别的更多相关文章
- vue和angular的区别:
相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...
- angular和vue还有jquery的区别
angularjs简单介绍和特点 首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每 ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- vue和jQuery的区别
从jquery到vue或者说是到mvvm的转变是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去 vue和jquey对比 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取 ...
- Vue和React的区别,以及如何选择?
简介 React:React是一个用于创建可重用且有吸引力的UI组件的库.它非常适合代表经常变化的数据的组件. Vue:Vue.js是一个开源JavaScript框架,能够开发单页面应用程序.它还可以 ...
- bootstrap与vue,react的区别
链接(与Vue区别):https://www.php.cn/faq/423095.html 链接(BootStrap, React, Vue的比较):https://www.jianshu.com/p ...
- vue watch 和 computed 区别与使用
目录 computed 和 watch 的说明 与 区别 computed 计算属性说明: watch 监听属性说明: watch 和 computed 的区别是: 使用 参考官方文档 compute ...
- 浅析angular,react,vue.js jQuery使用区别
前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...
- Flume OG 与 Flume NG 的区别
1.Flume OG:Flume original generation 即Flume 0.9.x版本 Flume NG:Flume next generation ,即Flume 1.x版本 ...
随机推荐
- Orchard运用 - 为博客启用Markdown编辑器
有时决定你是否使用某一个博客系统,最看重就是如何更简便的写博客,不能让其成为一个负担或别扭费力不讨好的工作. 对此一个好的编辑器就是一个最靓丽的卖点.比如最新的博客系统ghost.org就只定位一个最 ...
- Glide Picasso Fresco UIL 图片框架 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 自定义控件 淘宝头条【ViewFlipper】
简易版 代码 ); tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Acti ...
- SQL INTERSECT
SQL INTERSECT is query that allows you to select related information from 2 tables, this is combine ...
- WebApi-如何实现接口加密
方法一 加一个访问token.例如你的api地址是http://www.example.com/api.php需要接受的参数有a,b,c三个那么可以加一个验证token(通过约定的key加密生成). ...
- Microsoft Bot Builder Overview
微软机器人构建器概述 微软机器人Builder是一个强大的框架构建机器人可以处理自由交互和更多的引导,这种可能性是显式地显示给用户. 它很容易使用和利用c#写机器人提供一个自然的方式. 高级功能: 强 ...
- 【BIRT】修改BIRT的背景颜色
修改BIRT报表的背景颜色都在这里了 在BIRT的webcontent/birt/styles/目录下有如下文件列表: dialogbase.css文件修改 dialogbase_rtl.css文件修 ...
- 让zend studio 支持 redis函数自动提示
phpredis作者https://github.com/nicolasff/phpredis 写了文档https://github.com/ukko/phpredis-phpdoc上面提到了如何让e ...
- 铁通网络没有一个真实的公网IP,NAT转换能不能解决?
铁通网络没有一个真实的公网IP,NAT转换能不能解决? 我的是铁通宽带,现在想用自己的机子做一个动态主机,可是因为铁通垃圾网络的NAT转发问题,使用cn99qdns手动更新动态域名IP后公网能 ...
- 如何判断自己家的宽带是否有公网IP
1)点击链接 http://www.net.cn/static/customercare/yourIP.asp 抓取自己的IP地址 2)打开一个命令提示符窗口 tracert <刚才获取的IP& ...