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 笔记一的更多相关文章

  1. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  2. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

  3. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  4. Vue笔记(有点乱)

    Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...

  5. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  6. vue笔记

    安装vue脚手架工具 sudo cnpm install -g vue-cli

  7. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  8. vue笔记-列表渲染

    用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...

  9. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  10. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

随机推荐

  1. Google的Shell开发规范

    官方:https://google.github.io/styleguide/shell.xml 中文: http://zh-google-styleguide.readthedocs.io/en/l ...

  2. [Phonegap+Sencha Touch] 移动开发18 Sencha Touch项目通过phonegap打包后的程序名字的问题

    之前说过 sencha phonegap init com.pushsoft.myapp MyApp 之后打包的程序安装包apk的名字是"MyApp.apk",显示在手机桌面上的程 ...

  3. Delphi7下使用FastMM4

    1> 将文件Replacement BorlndMM DLL/Precompiled/for Delphi IDE/Performance/BorlndMM.dll,替换掉Delphi/Bin下 ...

  4. 3D数学读书笔记——3D中的方位与角位移

    本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/25339595 方位和角位移 ...

  5. 使用C#中的out关键字,用世界杯演绎

    今年的世界杯好看至极,充满着故事性.戏剧性.无论你平常踢不踢球,也不管你是否懂球,你总能从中获得些许的情感释放.世界杯似乎超越了足球本身,成为世界各地人们的"情感总和",一场场比赛 ...

  6. Android实例剖析笔记(四)

    摘要:分析NoteEditor这个类和以及Content Provider机制 NoteEditor深入分析 首先来弄清楚“日志编辑“的状态转换,通过上篇文章的方法来做下面这样一个实验,首先进入“日志 ...

  7. extjs 动态设定 DateField 最大值 最小值

    yxrqDate.minValue = new Date();yxrqDate.maxValue = new Date(9000,1,1);yxrqDate.validate(); //var pic ...

  8. cocos2d-x 3.0 事件处理

    參考文章: star特530的CSDN博客:http://blog.csdn.net/star530/article/details/18325493 https://github.com/chuko ...

  9. 为Eclipse添加C/C++开发工具

    如果你是一个C / C ++开发人员,正在为你的工作寻找一款开源的IDE工具,你可以考虑基于Eclipse的IDE. Eclipse中拥有一个可扩展的插件系统定制让你轻松的来定制你的IDE,它可以支持 ...

  10. OpenShift 项目的备份和恢复实验

    本测试记录从openshift 3.6环境中导出项目,然后在将项目环境恢复到Openshift 3.11中所需要的步骤 从而指导导入导出的升级过程. 1.安装Openshift 3.6版本 过程略 2 ...