vue学习part1
2017-01-19 18:53
211 查看
vue:
vue和angular区别?
vue基本雏形:
常用指令:
bootstrap+vue简易留言板(todolist):
事件:
属性:
class和style:
模板:
过滤器:-> 过滤模板数据
交互:
1、读音: v-u-e 2、vue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧 3、mvc: mvp mvvm mv* mvx 4、官网:http://cn.vuejs.org/ 5、手册: 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展示一条基本数据: html: <div> ng-controller="xxx"{{msg}}</div> js: var app=angular.module('app',[]); app.controller('xxx',function($scope){ //C $scope.msg='welcome' }) vue展示一条基本数据: html: <div id="box"> {{msg}} </div> js: 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标签功能,属性 vue: v-model 一般表单元素(input) 双向数据绑定 循环: vue2.0把$index换成了index,使用方法(name,index) 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 推荐 contextmenu右键 键盘: @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}} v-once 数据只绑定一次 {{{msg}}} v-html HTML转意输出 没有标签<P></P>
过滤器:-> 过滤模板数据
vue2.0取消了过滤器 系统提供一些过滤器: {{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: emulateJSON:true 模拟json数据必须写 this.$http.post('post.php',{ a:1, b:20 },{ emulateJSON:true }).then(function(res){ bf8a 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); });
相关文章推荐
- 一直以来伴随我的一些学习习惯(part1)
- 如何学习数据库??《part1。几个简单的提问》
- (转)[EntLib]微软企业库5.0 学习之路——第十步、使用Unity解耦你的系统—PART1——为什么要使用Unity?
- 【python】学习入门 - part1
- 状态压缩dp学习小记part1
- 面向对象的程序设计学习笔记-10-[]下标运算符的重载-part1
- arm体系结构学习笔记 part1--处理器模式与寄存器
- 一直以来伴随我的一些学习习惯(part1)
- 一直以来伴随我的一些学习习惯(part1)
- 孙鑫vc学习笔记_第11课_part1
- 一直以来伴随我的一些学习习惯(part1)
- 深入理解迭代器与集合 Part1【Linq学习系列】
- [EntLib]微软企业库5.0 学习之路——第十步、使用Unity解耦你的系统—PART1——为什么要使用Unity?
- 学习笔记_VC++深入详解(第一章)(part1)
- 学习uml2(不全)part1 (也许有part2)
- Struts2学习笔记-part1: 快速起步
- 一直以来伴随我的一些学习习惯(part1)(转自 刘未鹏)
- 微软企业库5.0 学习之路——第十步、使用Unity解耦你的系统—PART1——为什么要使用Unity?
- bootstrap 学习之路 9 (javascript part1)
- 树形DP学习小记Part1 选课 Hdu 1561 The more, The Better