vue路由、自定义指令、脚手架

*Vue

vue-router

一、路由

一、导航式路由

路由路径由 <router-link></router-link>标签配置 标签内 to属性值规定改标签指向的path路径；

路由对应视图 通过加载组件 加载到<router-view></router-view>上

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

配置路由的步骤：

1）定义组件－－（试图加载的内容组件）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' })

<!-- 导航式路由 -->
    <div id="box">
        <h1>导航式路由</h1>
        <!-- 路由标签 -->
        <router-link to="/index">首页</router-link>
        <router-link to="/about">关于</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"
    }
    // 路由规则
    var routes=[
        {path:"/index",component:Index},
        {path:"/about",component:About},
        {path:"/other",component:Other},
        {path:"/",redirect:'/index'},
        {path:"/error",component:Err},
        {path:"*",redirect:'/error'}
    ]
    //创建路由对象
    var router=new VueRouter({
        routes:routes
    })
     var vm = new Vue({
            el:'#box',
            router:router
        })
——————————————————
导航样式
.router-link-active{
            color:red;
        }
二、编程式路由

事件中路由路径跳转————router.push('/other')

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

导航标签会默认转换成a标签；可以用tag="div"转换成其他标签

  <router-link to="/index" tag="span">首页</router-link>
三、路由的传参
1、params——传单个参数

存储路径参数 path：“／index／：id”

获取 this.$route.params.id

 <li v-for="item in arr">
        <router-link :to="'/detail/'+item.pid">{{item.pname}}</router-link>
 </li>
 //创建组件
 <template id="detail">
            <div>
                <h1>详情</h1>
                <p>{{str}}</p>
            </div>
 </template>
 //路由规则
  {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传参，只能在命名路由中实现

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

规则配置
{path:"/home",component:Home,
            children:[
                {path:"/detail",name:'detail',component:Detail}
            ]
 },
 query传参，规则中不做任何参数的保留
 
 接收参数：
 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, }  /注意：子路由前面的斜杠/           
        ]   
   } ,
   其他步骤一样

注意：在嵌套路由的时候，需要监听，视图切换通过watch检测路由参数更改

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的值为设置的路由路径

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

name属性设置路由视图名字－－无名字默认default

下方路由规则里配置：

 对比：
 {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>
七、路由的钩子函数
beforeRouteEnter(to,from,next){  next( )  } 路由进入钩子函数 next()方法调用才会触发路由切换
beforeRouteUpdate(to,from,next) 路由更新钩子函数
beforeRouteLeave（to,from,next) 路由离开钩子函数

二、自定义指令

1、两种:全局、私有；
全局：
Vue.directive('color',{
        inserted:function(a，b){    /*这个元素插入父元素的时候执行的操作*/
          a.style.color='blue';  
        }
    })

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

a就指的是获取到的dom节点（下图中的el）；参数b是一个对象(下图中的binding)，属性如下：

[图片上传失败...(image-d752f8-1540860357631)]

value：可以解析变量，进行业务逻辑的处理；

expression: 只能以字符串输出；

注意：自定义命令可以绑定实例化对象里的任意变量；

举例：
<p v-color="str">lorem</p> 
 data:{
             str:"hello"
         },
 打印结果：
expression:str
value:hello

arg:给指令传参：

传参方式：  <p v-color：str>lorem</p> 
取参值：  b.reg   结果是  str
只能传字符串常量；想当成变量解析，只能以绑定值得形式；

modifiers:修饰符：以 . 的形式链式的写法，返回键值对：案例如图；

2、钩子函数：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作；

inserted: 被绑定元素插入父节点时调用。(bind与该生命周期钩子函数作用十分类似)

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

3、简写形式
正常形式：
directives:{
             'bac':{
                inserted:function(a){
                 a.style.background='yellow'
                },
                update:function(a){
                 a.style.background='blue'
                },
             }
         }
简写形式
directives:{
    /*简写 表示bind 和update的时候都会执行*/
     '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、项目构建

官方模版 vue init webpack my-project （tips：代码语法检查较麻烦）

推荐 vue init webpack-simple my-project (适合开发经验丰富者）

根据提示 进行依赖安装

​ 项目启动 npm run dev

项目打包 npm run build

单文件组件 css拥有作用域，

scoped属性可规定当前css只作用于自己的组件，不影响其他

3、插件安装

1、插件安装 axios : npm install axios —-save-dev

哪个文件需要使用，就在该文件的js中 导入 import axios from ‘axios’

2、路由 vue-router （tips：路由规则配置均在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）

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

推荐阅读更多精彩内容

  • 收拾好心情去漂泊
    你我都是这陌生星球的 陌生访客 有一种生活 叫漂泊 没有什么 永久的彼岸 也无所谓 该完成的功课 注定的恩典 永不...
    阿桂爱原创阅读 307评论 25赞 63
  • 致20岁的自己『Soybean----Mr.V』
    不知不觉一年又过去了事情经历得不算少，但却还是 像一个笨小孩一样长不大 以后还很长 당신은 ...
    R黄豆豆阅读 297评论 0赞 0
  • iOS集成激励视频
    因为业务需求，要在app里集成激励视频，类似游戏app内的观看视频奖励钻石的。本文就介绍了两种激励视频，谷歌激励视...
    子书不言阅读 2,805评论 0赞 1