*Vue

vue-router

一、路由

一、导航式路由

路由路径由 标签配置 标签内 to属性值规定改标签指向的path路径；

路由对应视图 通过加载组件 加载到上

去首页

去新闻

配置路由的步骤：

1)定义组件－－(试图加载的内容组件)Eg：var Home={ template:'

'}

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' })

——————————————————————————————————————————————————————————————

//组件对象

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"转换成其他标签

首页

三、路由的传参

1、params——传单个参数

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

获取 this.$route.params.id

{{item.pname}}

//创建组件

//路由规则

{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传参，只能在命名路由中实现

传参：

{{item.pname}}

规则配置

{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)父级路由

首页

用户

子路由

2)配置路由 定义路由

子路由配置

{path:'/user',component:User,

'children':[

/定义自组件的路由/

{ path:'username',component:UserName, } /注意：子路由前面的斜杠/

]

} ,

其他步骤一样

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

watch:{

'$route'(to,from){

}

}

路径：

​ 相对路径：不加 / 继承父级的路径

​ 绝对路径：/detail

3、嵌套路由代码示范

————————————————————————————————————————————————————————————————————————

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

对比：

home

about

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

下方路由规则里配置：

对比：

{path:"/home",component:Home} //这里的path必须与to的值一致

{path:"/aaa",name:'hello',component:About},//这里的path里可以任意写

一个页面加载多个视图

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

通过名字匹配加载的容器

{path:"/index",components:{

default:Index,

'other':Other

}

},

六、路由 +动画

Transition标签包含 router-view标签即可

enter-active-class="animated bounceInLeft"

leave-active-class="animated bounceOutRight"

>

七、路由的钩子函数

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: 只能以字符串输出；

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

举例：

lorem

data:{

str:"hello"

},

打印结果：

expression:str

value:hello

arg:给指令传参：

传参方式：

lorem

取参值： 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;

}

}

实例：拖拽；

————————————————————————————————————————————————————————

var vm = new Vue({

el:"#wrap",

directives:{

'move':function(a,b){

a.οnmοusedοwn=function(e){

var x = e.clientX - a.offsetLeft;

var y = e.clientY - a.offsetTop;

document.οnmοusemοve=function(e){

a.style.left = e.clientX - x +"px";

a.style.top = e.clientY - y +"px";

}

document.οnmοuseup=function(e){

document.οnmοusedοwn=null;

document.οnmοusemοve=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)