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

推荐阅读更多精彩内容