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