vue 笔记一
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
vue 笔记一的更多相关文章
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- Vue笔记(有点乱)
Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- vue笔记
安装vue脚手架工具 sudo cnpm install -g vue-cli
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
随机推荐
- Google的Shell开发规范
官方:https://google.github.io/styleguide/shell.xml 中文: http://zh-google-styleguide.readthedocs.io/en/l ...
- [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题
之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程 ...
- Delphi7下使用FastMM4
1> 将文件Replacement BorlndMM DLL/Precompiled/for Delphi IDE/Performance/BorlndMM.dll,替换掉Delphi/Bin下 ...
- 3D数学读书笔记——3D中的方位与角位移
本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/25339595 方位和角位移 ...
- 使用C#中的out关键字,用世界杯演绎
今年的世界杯好看至极,充满着故事性.戏剧性.无论你平常踢不踢球,也不管你是否懂球,你总能从中获得些许的情感释放.世界杯似乎超越了足球本身,成为世界各地人们的"情感总和",一场场比赛 ...
- Android实例剖析笔记(四)
摘要:分析NoteEditor这个类和以及Content Provider机制 NoteEditor深入分析 首先来弄清楚“日志编辑“的状态转换,通过上篇文章的方法来做下面这样一个实验,首先进入“日志 ...
- extjs 动态设定 DateField 最大值 最小值
yxrqDate.minValue = new Date();yxrqDate.maxValue = new Date(9000,1,1);yxrqDate.validate(); //var pic ...
- cocos2d-x 3.0 事件处理
參考文章: star特530的CSDN博客:http://blog.csdn.net/star530/article/details/18325493 https://github.com/chuko ...
- 为Eclipse添加C/C++开发工具
如果你是一个C / C ++开发人员,正在为你的工作寻找一款开源的IDE工具,你可以考虑基于Eclipse的IDE. Eclipse中拥有一个可扩展的插件系统定制让你轻松的来定制你的IDE,它可以支持 ...
- OpenShift 项目的备份和恢复实验
本测试记录从openshift 3.6环境中导出项目,然后在将项目环境恢复到Openshift 3.11中所需要的步骤 从而指导导入导出的升级过程. 1.安装Openshift 3.6版本 过程略 2 ...