Vue入门篇（一）

官网:https://cn.vuejs.org/

手册：https://cn.vuejs.org/api/

-------------------------------------------

vue读音: 类似于View

-------------------------------------------

vue到底是什么?

一个mvvm框架(库)、和angular类似，比较容易上手、小巧

-------------------------------------------

mvc:

           mvp

           mvvm

           mv*

           Mvx

-------------------------------------------

vue和angular区别?

vue——          1）简单、易学

                       2）指令以v-xxx

                       3）一片html代码配合上json，在new出来vue实例

                       4）个人维护项目

                       5）适合:移动端项目,小巧

                       6）vue的发展势头很猛，github上start数量已经超越angular


angular——    1）上手难

                       2）指令以ng-xxx

                       3）所有属性和方法都挂到$scope身上

                       4）angular由google维护

                       5）合适: pc端项目

vue和angular共同点:不兼容低版本IE(8以下)

-------------------------------------------

vue基本雏形:

angular展示一条基本数据:

var app=angular.module('app',[]);

app.controller('xxx',function($scope){ //C

$scope.msg='welcome'

})

html:

div ng-controller="xxx"

{{msg}}

vue:

html:

{{msg}}

// 实例化一个Vue对象

var c = new Vue({

// el:"选择器"：是固定的，可以是id选择器、类选择器、标签选择器

固定的      el:'#box',

// data:表示数据也是固定的

data:{ // 存储数据

    msg:'welcome vue'

}

});

// 实例化一个vue对象，可以没有名字new Vue({    // el:"选择器"：是固定的    el:"#box",    // data：表示数据也是固定的    data:{        msg:"welcome vue"    }});

-------------------------------------------

data里面存储数据:

// 实例化一个vue对象，可以没有名字new Vue({    // el:"选择器"：是固定的    el:"body", // 标签选择器    // data：表示数据也是固定的，string、number、boolean、array、json    data:{        msg:"welcome vue",        msg2:12,        msg3:true,        arr:["apple","banana","orange","pear"],        json:{a:"apple",b:"banana",c:"orange"}    }});

Html:

<input type="text" v-model="msg"/><input type="text" v-model="msg"/><br />{{msg}}<br />{{msg2}}<br />{{msg3}}<br />{{arr}}<br/>{{json}}

-------------------------------------------

常用指令:

angular:

 ng-model   ng-controller

 ng-repeat

 ng-click

 ng-show 

$scope.show=function(){}

指令:扩展html标签功能,属性

数据:

v-model:产生数据,一般表单元素(input) 双向数据绑定

数据更新模板自动更新

循环:

v-for="name in arr"

{{name}} 

 {{$index}}

v-for="name in json"

{{name}}  

{{$index}} 

{{$key}}

v-for="(k,v) in json"

{{k}}

{{v}}

{{$index}}

{{$key}}

<li v-for="value in arr">     {{value}} li>

事件:

v-on:click="函数"

v-on:click="a=false"

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”

v-show=“myData.length == 0”

-----------------------------------------

关于this的问题:

methods:{    add:function(){        /* 因为我们实例化了一个vue对象，因此this就是我们实例化的这个对象，而arr,json都是这个对象的属性因此我们可以this.属性*/        this.arr.push("tomato");    }}

bootstrap+vue简易留言板(todolist):

bootstrap: css框架 跟jqueryMobile一样

只需要给标签赋予class，角色

依赖jquery

----------------------------------------

事件:   

v-on:click/mouseover......

简写的:

@click="" 推荐

事件对象:

@click="show($event)"


methods:{     show:function(ev){         alert(ev.clientX);     }   }

@click="show($event)" // 只传一个参数$event

methods:{     show:function(ev,b){         alert(ev.clientX);         alert(b);     }   }

@click="show($event,12)" //传两个参数$event和其他参数，可以互换位置

事件冒泡:

Html:

<div @click="show2()">     <input type="button" value="按钮" @click="show()"/>   div>

阻止冒泡: 

  // JS原生阻止事件冒泡

[if !supportLists]a) [endif]. ev.cancelBubble=true;   

[if !supportLists]b) [endif]. @click.stop推荐

默认行为(默认事件):

Html:

<input type="button" value="按钮" @contextmenu="show()"/>

阻止默认行为:

  // JS原生阻止浏览器默认行为

[if !supportLists]a) [endif]. ev.preventDefault();  

b). @contextmenu.prevent 推荐

键盘:

@keydown $event  ev.keyCode  // JS原生键码

@keyup

常用键:

回车

//当按下回车时才会触发这个事件

a). @keyup.13

b). @keyup.enter

上、下、左、右键

@keyup/keydown.left

@keyup/keydown.right

@keyup/keydown.up

@keyup/keydown.down

.....

@keydown.up.prevent="changeUp()"

----------------------------------------

属性:

v-bind:src=""

width/height/title....

简写:

:src="" 推荐

注：自定义属性也可以使用v-bind进行绑定，也可以使用”:”简写

Vue：

new Vue({    el:"#box",    data:{        url:"../../../img/瓢虫1.png",        w:"100px",        t:"这是一张美丽的的图片"    }});

Html：

<img :src="url" alt="" :width="w" :title="t"/>

-----------------------------------------

class和style:

:class="" v-bind:class=""

:style="" v-bind:style=""

:class="{grey:$index == now}"


:class="[red]" // red是data里的数据    data:{        red:"red" // 字符串是类名    }

:class="[red,blue]" // red和blue是data里面的数据    data:{        red:"red" // 字符串是类名

  blue:"blue" // 字符串是类名    }

:class="{red:true, blue:false}" // red blue是类名

:class="{red:a, blue:b}" // red是类名 true/false也可以给数据    data:{        a:true,        b:false    }

:class="json" // json是data里面的数据

data:{

json:{red:a, blue:false}

}


----------------------------------------

style:

:style="[c]" // c是data里面的数据

data:{     c:{color:"red"} // c一定是一个json }

:style="[c,d]" // c和d是data里面的数据

data:{     c:{color:"red"}, // c一定是一个json     d:{backgroundColor:"blue"} // d一定是一个json，复合属性采用驼峰命名法 }

注意:复合样式，采用驼峰命名法

:style="{color:’red’}" // red是类名 注意：red要加引号

:style="json" // json是data里面的数据

data:{       json:{        color:"red",        backgroundColor:"blue"     } }

注：style里面一定是json

-----------------------------------------

模板:

{{msg}} 数据更新模板变化

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

{{{msg}}} HTML转意输出h1-h6等标签会被解析

-----------------------------------------

过滤器:->过滤模板数据

系统提供一些过滤器:


{{msg| filterA}}

{{msg| filterA | filterB}} // 多个过滤器

eg:{{'WELCOME'|lowercase|capitalize}}


uppercase eg: {{'welcome'| uppercase}}

lowercase

capitalize


currency 钱 eg:{{12|currency}}


{{msg| filterA参数}} eg:{{12|currency “￥”}}  {{12|currency “rmb”}}



....

-----------------------------------------

交互:

 $http （ajax）


vue本身不支持交互，如果vue想做交互

引入: vue-resource.js，引入resource相当于给vue实例添加了一个方法或对象

get/post/jsonp(“url请求的路径”，{传递给后台的数据}，{options配置})

then(function(){},function(){})，一个是成功执行的，一个是失败执行的

res是个对象


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 // 模拟json数据，使用post必须用

}).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


360：

this.$http.jsonp("https://sug.so.360.cn/suggest",{     word:"a" // 其实就是我们搜索的关键字 }).then(function(res){ // res是个对象     alert(res.data.s); },function(res){     alert(res.status); });


百度：

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

    wd:'a' // 其实就是我们搜索的关键字

},{

    jsonp:'cb' //callback名字，默认名字就是"callback"

// vue中jsonp默认名称是callback如果不是一定要改

}).then(function(res){

    alert(res.data.s);

},function(res){

    alert(res.status);

});


https://www.baidu.com/s?wd=s

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,544评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,430评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,764评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,193评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,216评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,182评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,063评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,917评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,329评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,425评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,019评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2赞 353

推荐阅读更多精彩内容