vue2.0基本用法

(npm run dev)

和angular有許多類似的地方伏伐，由于使用了大量ES6語(yǔ)法，所以不支持IE8以下版本

一晕拆、基本語(yǔ)法

vue實(shí)例最外層放一個(gè)<div id="app"></div>

1.{{}}:同angular一樣藐翎，使用{{}}包裹變量

<h1>{{ name }}</h1>

同樣，和angular一樣实幕，可以在{{}}里面寫(xiě)表達(dá)式吝镣，{{1+1}}{{Math.random()>0.5}}{{‘a(chǎn)bc’.toUpperCase()}}{{ 10>30?30:60 }},注意，這里不能寫(xiě)if()else

2.v-model
和angular的ng-model類似昆庇，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

<h1>{{ name }}</h1>
<input type="text" v-model="name" />

使用name變量之前末贾，要先定義
創(chuàng)建模板對(duì)應(yīng)的vue實(shí)例
var vm=new Vue({
    el:'#app',//el:elements Vue對(duì)應(yīng)的根標(biāo)簽
    data:{//對(duì)應(yīng)的數(shù)據(jù)
        name:'小明'
    }
})

在data中可以定義變量數(shù)組對(duì)象字符串

3遍歷v-for(in/of)
不僅可以遍歷數(shù)組元素，還可以遍歷數(shù)組下標(biāo)

    <ul>
        <li v-for="(person,i) of people">{{i+person.name}}</li>
    </ul>

var vm=new Vue({
    el:'#app',
    data:{
       people:[
          {name:'xiaoming'},
          {name:'xiaohong'},
        ]
    }
})

使用v-for遍歷對(duì)象的value整吆；

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

var vm=new Vue({
    el:'#app',
    data:{
       mine:{
          name:'xiaoming',
          age:18
        }
    }
})

v-for可以遍歷對(duì)象的value和key值拱撵，注意value在前，key在后

<li v-for="(value,key) in mine">{{value}}{{key}}</li>

4.點(diǎn)擊事件v-on:click="change"
無(wú)論使用什么事件表蝙，都是用v-on指令拴测，后面跟事件名稱即可,可以不加()在不傳參的情況下

<h3 v-on:click="show">點(diǎn)擊顯示</h3>

定義函數(shù)時(shí)，要使用methods
var vm=new Vue({
    methods:{
        show:function(){
            console.log(event);
        }
        //可以簡(jiǎn)寫(xiě)成一下的形式ES6新語(yǔ)法
        show(){
            console.log(event)
        }
    }
})

如果想要得到里面的變量府蛇，可以直接寫(xiě)vm.變量名集索，如vm.show或vm.name;

5.v-if決定是否渲染,可以和v-else連用

<section v-if="flag">hhhh</section>
<section v-else>lksdjfkaldj</section>

6.v-show決定是否顯示

<div v-show="flag">h2</div>

7.v-on添加事件

<button v-on:click="test1">按鈕1</button>

可以簡(jiǎn)寫(xiě)成@
<button @click="test1">按鈕1</button>

還可以寫(xiě)其他的事件
<button @mouseover="test2">按鈕2</button>
<input type="text" @keyup='test3' />
等等

還可以添加修飾符，針對(duì)某一個(gè)按鍵起作用
<input type="text" @keyup.enter='test3' />
只用在點(diǎn)擊enter鍵時(shí)，才會(huì)執(zhí)行函數(shù)抄谐，注意渺鹦，這樣的針對(duì)某一個(gè)按鍵起作用，就必須綁定在鍵盤(pán)事件上
<input type="text" @keyup.up='test3' />上下鍵的上

同樣也可以取消默認(rèn)事件
<a  @click.prevent="test4">baidu</a>

還可以取消冒泡
<a  @click.stop="test4">baidu</a>

說(shuō)到這里蛹含，可以復(fù)習(xí)一下原生的取消默認(rèn)事件的方法毅厚，和取消冒泡的方法

event.stopPropagation取消冒泡事件
event.preventDefault;取消默認(rèn)事件

8.v-bind綁定屬性

<h2 v-bind:class="class"></h2>

同樣可以簡(jiǎn)寫(xiě)成
<h2 :class="class"></h2>

不光可以寫(xiě)class，其他的屬性都可以這樣寫(xiě)浦箱，
在使用v-bind簡(jiǎn)寫(xiě)形式時(shí)吸耿，
必須加冒號(hào)，不然會(huì)把它里面的值當(dāng)成一個(gè)字符串顯示酷窥，而不是我們要的變量得形式

9.計(jì)算屬性computed;

<h2>{{ aDouble }}</h2>
<h2>{{ aPlus }}</h2>
<input type="number" v-model="aPlus">

    var vm=new Vue({
        el:'#app',
        data:{
            a:10,
        },
        computed:{//計(jì)算屬性
            aDouble:function(){
                return this.a*2;//這里的this.a==vm.a;
            },
            aPlus:{
                get:function(){
                    return this.a*2;
                },
                set:function(newValue){
                    console.log(newValue);
                    if(newValue>100){
                        this.a=100;
                    }else if(newValue<=0){
                        this.a=0;
                    }else{
                        this.a=newValue;
                    }
                }
            }
        }
    })

計(jì)算屬性可以內(nèi)部編寫(xiě)兩個(gè)函數(shù)咽安，分別是get和set，讀取計(jì)算屬性的時(shí)候走get方法蓬推，設(shè)置計(jì)算屬性值得時(shí)候妆棒，就走set方法，set方法中的參數(shù)就是要設(shè)置的新值沸伏，可以再get方法內(nèi)部進(jìn)行條件判斷糕珊，決定是否使用其新值

對(duì)于計(jì)算屬性，直接當(dāng)成普通屬性使用即可
不能加括號(hào)作為函數(shù)使用 毅糟，他代表一個(gè)函數(shù)的返回值
如果把它寫(xiě)在methods里面红选，那么他就是一個(gè)函數(shù)的方法

計(jì)算屬性實(shí)現(xiàn)的效果，使用函數(shù)也都可以實(shí)現(xiàn)姆另，喇肋，但是盡量使用計(jì)算屬性，計(jì)算屬性更加加高效迹辐，對(duì)于取值來(lái)說(shuō)蝶防，只有當(dāng)值發(fā)生改變，計(jì)算屬性內(nèi)部的函數(shù)才會(huì)執(zhí)行一次明吩，而函數(shù)會(huì)使用幾次就執(zhí)行幾次

9.實(shí)例屬性
vm.$data
vm.$el
vm.$parent
vm.$root
vm.$children
在路由分級(jí)時(shí)慧脱，會(huì)用到children

10.實(shí)例方法vm.$watch
同angular，

    // 使用$watch可以監(jiān)測(cè)某個(gè)值得變化
    vm.$watch('a',function(newValue,oldValue){
        console.log("newValue="+newValue);
        console.log("oldValue="+oldValue);
    })
返回一個(gè)函數(shù)贺喝，用來(lái)停止觸發(fā)回調(diào)
var unwatch = vm.$watch(‘a(chǎn)’, cb);
unwatch();

二、組件

類似于angular的自定義指令宗兼，用來(lái)封裝重復(fù)使用的代碼塊

注冊(cè)組件

如果需要換行躏鱼，可以使用普通字符串，后面用\拼接殷绍，或者使用模板字符串
Vue.component('hello',{
        template:'<div>\
                        <h1>我是hello</h1>\
                        <p>我是HELLO標(biāo)簽</p>\
                        <p>我是HELLO標(biāo)簽{{msg}}</p>\
                    </div>',
        data(){//組件中的data數(shù)據(jù)染苛，必須是函數(shù)，數(shù)據(jù)通過(guò)return進(jìn)行返回


            // 組件中的data必須是函數(shù)的原因是：每個(gè)組件歐擁有自己獨(dú)立的數(shù)據(jù)，不與其他共享茶行，因?yàn)楣蚕頂?shù)據(jù)后躯概，會(huì)相互影響，導(dǎo)致數(shù)據(jù)錯(cuò)亂
            return {
                msg:'message'
            };
        }
    })

在html代碼中畔师，只需要加入<hello></hello>就可以了

這是一個(gè)全局的標(biāo)簽
其中template對(duì)應(yīng)的是被替換過(guò)去的HTMl模板結(jié)構(gòu)娶靡；
必須存在一個(gè)跟標(biāo)簽(root element)

下面創(chuàng)建一個(gè)局部的實(shí)例

    var vm=new Vue({
        el:'#app',
        components:{//局部組件直接寫(xiě)在實(shí)例的components中，其他實(shí)例無(wú)法使用看锉。
            hi:{
                template:'<h2>我是hi標(biāo)簽</h2>'
            }
        }
    })

父組件與子組件的傳值props

在這里需要提一下引用類型姿锭；
數(shù)組和對(duì)象都是引用類型，其他的都是普通的值類型

var arr=[1,2,3,4];
var arr2=arr;
arr2.push(5);
此時(shí)arr與arr2同時(shí)都變成了[1,2,3,4,5];
這是因?yàn)閍rr定義一個(gè)數(shù)組伯铣，就會(huì)開(kāi)創(chuàng)一個(gè)空間呻此，并把值都傳到空間，然后arr指向了這個(gè)空間腔寡，定義一個(gè)arr2,讓他等于arr焚鲜，這時(shí)arr2也指向了這個(gè)空間，所以通過(guò)這兩個(gè)隨意改變指都會(huì)影響到另一個(gè)放前，這樣的數(shù)組就是引用型忿磅。此僅為個(gè)人理解。

組件內(nèi)部的props里面的值都是組件的屬性犀斋，用于接受外界的值贝乎，然后賦值到組件內(nèi)部

<my-component :msg="msg"></my-component>

    Vue.component('my-component',{
        props:['msg'],//props用于接受外界傳遞的值
        template:'<p>message={{msg}}</p>'
    })

 父組件與子組件之間的傳值

<my-component :msg="msg"></my-component>
這里的msg是一個(gè)變量

    Vue.component('my-component',{
        props:['msg'],//props用于接受外界傳遞的值
        template:'<p>message={{msg}}</p>'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'message'
        }
    })

在頁(yè)面顯示的<p>message=message</p>

這里的props是單向數(shù)據(jù)流的，但是對(duì)于引用類型的數(shù)組對(duì)象不能單向叽粹；

使用slot分發(fā)
作用類似于angular的ng-transclude嵌套元素览效；

    Vue.component('my-app',{
        template:`
                <div>
                    <p>我是my-app</p>
                    <slot>如果沒(méi)有分發(fā)內(nèi)容，顯示我</slot>
                    <slot name="header">如果沒(méi)有分發(fā)內(nèi)容虫几，顯示我</slot>

                </div>`
        
    })


具名slot的使用
        <my-app>
            <h2 slot="header">h2</h2>
            <hr>
            <h3 slot="footer">h3</h3>
            <hr>
            <h4>h4</h4>
        
        </my-app>

如果寫(xiě)兩遍slot锤灿，那么就會(huì)打印兩遍，但會(huì)報(bào)錯(cuò);但是辆脸，如果把他變成具名屬性但校，就可以正常使用了

// export導(dǎo)出
// import導(dǎo)入

三、使用vue做一個(gè)項(xiàng)目

命令行內(nèi)：
1.通過(guò)命令行安裝vue腳手架
npm install -g vue-cli

2設(shè)置項(xiàng)目名稱
vue init webpack 項(xiàng)目名

cd 項(xiàng)目名

npm install

npm run dev運(yùn)行項(xiàng)目默認(rèn)打開(kāi)8080端口

路由

路由安裝
npm install vue-router

npm run dev

完成之后進(jìn)行的步驟：
在main.js中

1.import VueRouter from 'vue-router'//引入路由文件

引入home

import Home from 'home'

//2.安裝插件main.js

Vue.use(VueRouter)

3.編寫(xiě)頁(yè)面在app.js

 <router-link to="/home"></router-link>

4.定義路由main.js

const routes=[
    {path:'/home',component:Home}
    path對(duì)應(yīng)的是app.js 中to="/home"
    components對(duì)應(yīng)的是引入的名稱
]

其中的

const routes=[
    { path: '/', component: Home }
      表示打開(kāi)默認(rèn)顯示home頁(yè)面
]

5創(chuàng)建VueRouter實(shí)例main.js

const router = new VueRouter({
    routes//這是簡(jiǎn)寫(xiě)(routes:routes)
})

6.在main.js中的

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
添加：
  router
})

添加一個(gè)文件夾在src文件夾下啡氢，里面添加我們需要的頁(yè)面状囱，每個(gè)頁(yè)面只需要一個(gè)后綴名為vue的文件，里面就包含了html倘是，css和js的所有內(nèi)容亭枷。其中html寫(xiě)在<template></template>內(nèi)，并且在里面添加一個(gè)根標(biāo)簽搀崭，把內(nèi)容都放在我們?cè)O(shè)置的跟標(biāo)簽里面

和angular不同的是叨粘，路由跳轉(zhuǎn)沒(méi)有直接使用a標(biāo)簽的錨點(diǎn)，而是有它專用的標(biāo)簽
<router-link to="/home">首頁(yè)</router-link>
，同樣升敲，也不需要使用ui-view,而是它專用的
<router-view></router-view>

replace屬性

<router-link :to="/home" replace></router-link>//頁(yè)面切換不會(huì)留下歷史痕跡

tag屬性,會(huì)渲染成tag指定的標(biāo)簽

<router-link :to="/home" tag="li">Home</router-link><li>Home</li>

active-class屬性
這個(gè)屬性是設(shè)置激活鏈接時(shí)的class屬性

<router-link :to="/home" active-class="active">Home</router-link>

active-class屬性的默認(rèn)值是router-link-active

exact屬性
開(kāi)啟router-link的嚴(yán)格模式

<router-link :to="/" exact>home</router-link>

二級(jí)路由

先引入
import One from 'one',
import two from 'two',

const router=[
    {path:'/home',component:Home,children:[
        {path:'one',component:One},
        {path:'two',component:two},
    ]}
]

 <router-link to="/home/one">One</router-link>
<router-view></router-view>

網(wǎng)絡(luò)請(qǐng)求
npm install vue-resource
安裝

Vue.use(VueResource)


export default{
    data(){
        return {
            data:[]//把返回的數(shù)據(jù)都放到數(shù)組中
        }
    },
    mounted(){
        this.$http.get().then(function(res){
            console.log(res);
            // console.log(JSON.parse(res.body).data);
            this.data=JSON.parse(res.body).data;
        })
    }
}

網(wǎng)絡(luò)請(qǐng)求使用mounted

引用第三方j(luò)s庫(kù)：

在需要的.vue文件中答倡，script里面引入；
import $ from '../../static/lib/jquery-3.1.1.min.js'

就這么簡(jiǎn)單

export default{
    data(){
        return (
            //定義的變量寫(xiě)這里
            data:[];
            name:'xiaoming'
        )
    },
    mounted(){
        //js代碼寫(xiě)在這里
       在引用swiper時(shí)驴党，把swiper的js代碼放到這里瘪撇，如果是動(dòng)態(tài)創(chuàng)建的元素，
       建議用setTimeout包住
           new Swiper ('.swiper-container', {
                direction: 'horizontal',
                loop: true,
                autoplay:2000,
                speed:1000,
                autoplayDisableOnInteraction:false,
                pagination: '.swiper-pagination',
            })
    }鼻弧，
    methods:{//方法寫(xiě)這里
        get(){}
    }

}