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

作者: JK酱 | 来源:发表于2018-10-30 08:46 被阅读0次

*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）

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

*Vue

一、路由

一、导航式路由

二、编程式路由

三、路由的传参

1、params——传单个参数

2、query——可以传多个，以对象形式

四、嵌套路由

1）父级路由

2）配置路由定义路由

3、嵌套路由代码示范

五、命名路由

六、路由 +动画

七、路由的钩子函数

二、自定义指令

1、两种:全局、私有；

2、钩子函数：

3、简写形式

三、脚手架

1、安装脚手架（全局安装，只需一次）

2、项目构建

3、插件安装

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

*Vue

一、路由

一、导航式路由

二、编程式路由

三、路由的传参

1、params——传单个参数

2、query——可以传多个，以对象形式

四、嵌套路由

1）父级路由

2）配置路由 定义路由

3、嵌套路由代码示范

五、命名路由

六、路由 +动画

七、路由的钩子函数

二、自定义指令

1、两种:全局、私有；

2、钩子函数：

3、简写形式

三、脚手架

1、安装脚手架（全局安装，只需一次）

2、项目构建

3、插件安装

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2）配置路由定义路由