*Vue

vue-router

一愧哟、路由

一奥吩、導(dǎo)航式路由

路由路徑由 <router-link></router-link>標簽配置 標簽內(nèi) to屬性值規(guī)定改標簽指向的path路徑哼蛆；

路由對應(yīng)視圖 通過加載組件 加載到<router-view></router-view>上

<router-link to="/home">去首頁</router-link>
<router-link to=“/news”>去新聞</router-link>

配置路由的步驟：

1）定義組件－－（試圖加載的內(nèi)容組件）Eg：var Home={ template:'<div>這是一個首頁的頁面</div>'}

2）配置路由 定義路由

Path 屬性 配置路由地址 “＊”默認路徑下 redirect 屬性配置路由重定向 component 屬性 配置改地址需要加載的組件視圖

3）實例化VueRouter

var router=new VueRouter({ /router 老老實實的寫這個名字/

? routes:routes

    /*VueRouter里面的屬性名稱不能變  routes  */ 

})

4）VueRouter掛載到Vue實例上面去var app=new Vue({ router:router, el:'#out' })

<!-- 導(dǎo)航式路由 -->
    <div id="box">
        <h1>導(dǎo)航式路由</h1>
        <!-- 路由標簽 -->
        <router-link to="/index">首頁</router-link>
        <router-link to="/about">關(guān)于</router-link>
        <router-link to="/other">其他</router-link>
        <!-- 路由容器 -->
        <router-view></router-view>
    </div>
    <!-- 試圖組件 -->
    <template id="index">
        <div>
            <h1>index</h1>
        </div>
    </template>
    <template id="about">
        <div>
            <h1>about</h1>
        </div>
    </template>
    <template id="other">
        <div>
            <h1>other</h1>
        </div>
    </template>
    <template id="error">
            <div>
                <h1>404Not Found</h1>
            </div>
        </template>
——————————————————————————————————————————————————————————————
    //組件對象
    var Index ={
        template:"#index"
    }
    var About ={
        template:"#about"
    }
    var Other ={
        template:"#other"
    }
    var Err ={
        template:"#error"
    }
    // 路由規(guī)則
    var routes=[
        {path:"/index",component:Index},
        {path:"/about",component:About},
        {path:"/other",component:Other},
        {path:"/",redirect:'/index'},
        {path:"/error",component:Err},
        {path:"*",redirect:'/error'}
    ]
    //創(chuàng)建路由對象
    var router=new VueRouter({
        routes:routes
    })
     var vm = new Vue({
            el:'#box',
            router:router
        })
——————————————————
導(dǎo)航樣式
.router-link-active{
            color:red;
        }

二、編程式路由

事件中路由路徑跳轉(zhuǎn)————router.push('/other')

var Index ={
        template:"#index",
        methods:{
            tap(){
                router.push('/other')
            }
        }
    }

導(dǎo)航標簽會默認轉(zhuǎn)換成a標簽霞赫；可以用tag="div"轉(zhuǎn)換成其他標簽

  <router-link to="/index" tag="span">首頁</router-link>

三腮介、路由的傳參

1、params——傳單個參數(shù)

存儲路徑參數(shù) path：“／index／：id”

獲取 this.$route.params.id

 <li v-for="item in arr">
        <router-link :to="'/detail/'+item.pid">{{item.pname}}</router-link>
 </li>
 //創(chuàng)建組件
 <template id="detail">
            <div>
                <h1>詳情</h1>
                <p>{{str}}</p>
            </div>
 </template>
 //路由規(guī)則
  {path:"/detail/:id",component:Detail},
  // 組件對象 
   var About ={
        template:"#about",
        data:function(){
            return{
                arr:[]
            }
        },
        mounted(){
            
            var _this=this;
            axios({
                url:"http://jx.xuzhixiang.top/ap/api/productlist.php"
            }).then(function(data){
                _this.arr=data.data.data
            })
        }
    }
  var Detail ={
        template:"#detail",
        data:function(){
                return{
                    str:''
                }
            },
        mounted(){
            //console.log(this.$route.params.id)
            var _this=this;
            axios({
                url:"http://jx.xuzhixiang.top/ap/api/detail.php",
                params:{id:_this.$route.params.id}
            }).then(function(data){
                // console.log(data)
                _this.str=data.data.data.pname
            })
        }
    }

2端衰、query——可以傳多個叠洗，以對象形式

query傳參，只能在命名路由中實現(xiàn)

傳參：
<li v-for="item in arr">
            <router-link :to="{name:'detail',query:{id:item.pid}}">{{item.pname}}</router-link>
    </li>

規(guī)則配置
{path:"/home",component:Home,
            children:[
                {path:"/detail",name:'detail',component:Detail}
            ]
 },
 query傳參旅东，規(guī)則中不做任何參數(shù)的保留
 
 接收參數(shù)：
 mounted(){
            var _this=this;
            axios({
                url:"http://jx.xuzhixiang.top/ap/api/detail.php",
                params:{
                    id:_this.$route.query.id
                }
            }).then(function(data){
                _this.str=data.data.data.pname
            })
        },

四灭抑、嵌套路由

1）父級路由

<router-link to="/home">首頁</router-link>
<router-link to=“/user”>用戶</router-link>
<router-view></router-view>

子路由

<template id="user">
        <div>
            <router-link to="user/username">去子路由</router-link>      
        <!--子路由視圖顯示的地方-->    
        <router-view></router-view>   
        </div>
</template>

2）配置路由 定義路由

子路由配置

    {path:'/user',component:User,
            'children':[
                 /定義自組件的路由/ 
                { path:'username',component:UserName, }  /注意：子路由前面的斜杠/           
        ]   
   } ,
   其他步驟一樣

注意：在嵌套路由的時候，需要監(jiān)聽抵代，視圖切換通過watch檢測路由參數(shù)更改

watch:{
'$route'(to,from){

    }
}

路徑：

? 相對路徑：不加 / 繼承父級的路徑

? 絕對路徑：/detail

3腾节、嵌套路由代碼示范

 <div id="box">
        <h1>嵌套路由</h1>
        <router-link to="/home">home</router-link>
        <router-link to="/about">about</router-link>   

        <!-- 容器 -->
        <router-view></router-view>
    </div>

    <template id='home'>
        <div>
            <h1>home</h1>
            <ul>
                <li v-for="item in arr"><router-link :to="'/detail/'+item.pid">{{item.pname}}</router-link></li>
            </ul>
            <router-view></router-view>
        </div>
    </template>
    <template id='about'>
        <div>
            <h1>about</h1>
        </div>     
    </template>
    <template id='detail'>
        <div>
            <h1>詳情</h1>
            <p>{{str}}</p>
        </div>     
    </template>
————————————————————————————————————————————————————————————————————————
    var Home={
        template:"#home",
        data:function(){
            return{
                arr:[]
            }
        },
        mounted(){
            var _this=this;
            axios({
                url:"http://jx.xuzhixiang.top/ap/api/productlist.php"
            }).then(function(data){
                _this.arr=data.data.data
            })
        }
    }
    var About={
        template:"#about"
    }
    var Detail={
        template:"#detail",
        data:function(){
            return{
                str:''
            }
        },
        mounted(){
            var _this=this;
            axios({
                url:"http://jx.xuzhixiang.top/ap/api/detail.php",
                params:{
                    id:_this.$route.params.id
                }
            }).then(function(data){
                _this.str=data.data.data.pname
            })
        },
        watch:{
            '$route':function(a){
                var _this=this;
                axios({
                    url:"http://jx.xuzhixiang.top/ap/api/detail.php",
                    params:{
                        id:a.params.id
                    }
                }).then(function(data){
                    _this.str=data.data.data.pname
                })
            }
        }
    }

    var routes=[
        {path:"/home",component:Home,
            children:[
                {path:"/detail/:id",component:Detail}
            ]
        },
        {path:"/about",component:About},
        
        {path:"/",redirect:"/home"}
    ]
    var router=new VueRouter({
        routes:routes
    })

    var vm = new Vue({
        el:'#box',
        router:router
    })

五、命名路由

路徑的另一種定義方式 綁定屬性to 對象 name的值為設(shè)置的路由路徑

對比：
<router-link to="/home">home</router-link>
<router-link :to="{name:'hello'}">about</router-link>

name屬性設(shè)置路由視圖名字－－無名字默認default

下方路由規(guī)則里配置：

 對比：
 {path:"/home",component:Home}                      //這里的path必須與to的值一致
 {path:"/aaa",name:'hello',component:About},//這里的path里可以任意寫

一個頁面加載多個視圖

{path:'/index',name:'index',    components:{default:index,page:about}},

<router-view></router-view>
<router-view name="other"></router-view>
通過名字匹配加載的容器

{path:"/index",components:{
            default:Index,
            'other':Other
            }
        },

六荤牍、路由 +動畫

Transition標簽包含 router-view標簽即可

<transition
            enter-active-class="animated bounceInLeft"
            leave-active-class="animated bounceOutRight"
        >
            <router-view></router-view>  
</transition>

七禀倔、路由的鉤子函數(shù)

beforeRouteEnter(to,from,next){  next( )  } 路由進入鉤子函數(shù) next()方法調(diào)用才會觸發(fā)路由切換
beforeRouteUpdate(to,from,next) 路由更新鉤子函數(shù)
beforeRouteLeave（to,from,next) 路由離開鉤子函數(shù)

二、自定義指令

1参淫、兩種:全局救湖、私有；

全局：
Vue.directive('color',{
        inserted:function(a涎才，b){    /*這個元素插入父元素的時候執(zhí)行的操作*/
          a.style.color='blue';  
        }
    })

私有：
var vm = new Vue({
         el:"#box",
         directives:{
             'bac':{
                inserted:function(a,b){
                 a.style.background='yellow'
             }
             }
            
         }
     }) 

a就指的是獲取到的dom節(jié)點（下圖中的el）鞋既；參數(shù)b是一個對象(下圖中的binding)，屬性如下：

[圖片上傳失敗...(image-d752f8-1540860357631)]

value：可以解析變量耍铜，進行業(yè)務(wù)邏輯的處理邑闺；

expression: 只能以字符串輸出；

注意：自定義命令可以綁定實例化對象里的任意變量棕兼；

舉例：
<p v-color="str">lorem</p> 
 data:{
             str:"hello"
         },
 打印結(jié)果：
expression:str
value:hello

arg:給指令傳參：

傳參方式：  <p v-color：str>lorem</p> 
取參值：  b.reg   結(jié)果是  str
只能傳字符串常量陡舅；想當成變量解析，只能以綁定值得形式伴挚；

modifiers:修飾符：以 . 的形式鏈式的寫法靶衍，返回鍵值對：案例如圖；

2茎芋、鉤子函數(shù)：

bind: 只調(diào)用一次颅眶，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作田弥；

inserted: 被綁定元素插入父節(jié)點時調(diào)用涛酗。(bind與該生命周期鉤子函數(shù)作用十分類似)

update: 被綁定元素所在的模板更新時調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值商叹，可以忽略不必要的模板更新燕刻。

componentUpdated: 被綁定元素所在模板完成一次更新周期時調(diào)用。

3剖笙、簡寫形式

正常形式：
directives:{
             'bac':{
                inserted:function(a){
                 a.style.background='yellow'
                },
                update:function(a){
                 a.style.background='blue'
                },
             }
         }
簡寫形式
directives:{
    /*簡寫 表示bind 和update的時候都會執(zhí)行*/
     'color':function(el,binding){   
         el.style.color=binding.value;
             }
 }

實例：拖拽卵洗；

 <div id="wrap">
        <p class="box" v-move></p>
        <p class="box"  v-move></p>
        <p class="box"  v-move></p>
        <p class="box"  v-move></p>
 </div>
————————————————————————————————————————————————————————
    var vm = new Vue({
        el:"#wrap",
        directives:{
            'move':function(a,b){
                a.onmousedown=function(e){
                    var x = e.clientX - a.offsetLeft;
                    var y = e.clientY - a.offsetTop;
                    document.onmousemove=function(e){
                         a.style.left = e.clientX - x +"px";
                        a.style.top = e.clientY - y +"px";
                    }
                    document.onmouseup=function(e){
                        document.onmousedown=null;
                        document.onmousemove=null;
                    }
                };               
            }
        }
    })

三、腳手架

1枯途、安裝腳手架（全局安裝忌怎，只需一次）

npm install vue-cli -g

2籍滴、項目構(gòu)建

官方模版 vue init webpack my-project （tips：代碼語法檢查較麻煩）

推薦 vue init webpack-simple my-project (適合開發(fā)經(jīng)驗豐富者）

根據(jù)提示 進行依賴安裝

? 項目啟動 npm run dev

項目打包 npm run build

單文件組件 css擁有作用域酪夷，

scoped屬性可規(guī)定當前css只作用于自己的組件，不影響其他

3孽惰、插件安裝

1晚岭、插件安裝 axios : npm install axios —-save-dev

哪個文件需要使用，就在該文件的js中 導(dǎo)入 import axios from ‘a(chǎn)xios’

2勋功、路由 vue-router （tips：路由規(guī)則配置均在main.js中）

依賴安裝 nam install vue-router —-save-dev使用

在main.js引入 import VueRouter from ‘vue-router’

聲明使用 在main.js 中 Vue.use(VueRouter)

3坦报、Vue ui框架Element －－pc (算是目前支持vue2.0最好的ui框架)

npm i element-ui -s

Mintui ---基于Vue的移動端ui框架 Vue.use(MintUi)

Vux

Framework7Tips；

vue全家桶 指（vue + vuex + vue-router + axios）