*Vue
vue-router
一、路由
一、导航式路由
路由路径由
路由对应视图 通过加载组件 加载到
去首页
去新闻
配置路由的步骤：
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' })
导航式路由
首页
关于
其他
index
about
other
404Not Found
——————————————————————————————————————————————————————————————
//组件对象
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}}
//创建组件
详情
{{str}}
//路由规则
{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、嵌套路由代码示范
嵌套路由
home
about
home
{{item.pname}}
about
详情
{{str}}
————————————————————————————————————————————————————————————————————————
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}},
六、路由 +动画
Transition标签包含 router-view标签即可
七、路由的钩子函数
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.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）