凃凃老师, 该拓展的一定要拓展, 即使有部分同学跟起来吃力 , 以后工作很可能在项目中遇到相似问题, 至少知道老师讲过 , 有对照也好解决. 可以说清楚有哪些必须掌握, 有哪些让有余力的同学掌握.
Vue.filter(名,fn)
//载入后 数据已经就位 将数据渲染到页面上,dom已经生成
mounted() {
console.log("mounted",this.$refs.myDiv);
console.log("mounted",this.$refs.sub);
console.log("mounted",this); //组件对象
//涉及dom类的操作
this.$refs.myDiv.innerHTML = 'hahahhah';
//更好的方式是操作变量,涉及到数据的操作
this.text = '99999';
//操作组件对象并获取dom对象
console.log(this.$refs.sub.$el);
this.$refs.sub.$el.innerHTML = '和嘿嘿';
},
npm i vue-router -S
import VueRouter from 'vue-router';
Vue.use(VueRouter);
let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });
router:router
去北京
去北京
routes: [
//配置name方便查找只用名称就可以找到,
//path是url上显示的地址,是正则匹配后面有?xxx都不影响
//更好使用,方便修改
{ name:'music', path: '/mymusic',component: Music },
{ name:'movie', path: '/movie', component: Movie },
]
//或者在router实例中使用方法 addRoutes()
router.addRoutes([
//重定向 从上到下
{path: '/', redirect: {name: 'home'}},
{name: 'home', path: '/home', component: Home},
{path: '*', component: NotFound},
])
xxx
{ name:'detail' , path:'/detail',组件}
this.$route.query.id
xxx
{ name:'detail' , path:'/detail/:name',组件}
this.$route.params.name
{name:'xxx',query:{id:1},params:{name:2} }
this.$router.push('/movie');
或者 this.$router.push({name: 'movie' });
或者this.$router.go(-1);
this.$router.push({name: 'movie', query: {id:1, name:2}});
window.addEventListener('hasnchange', function(){
var text = '';
switch(location.hash){
case '#/music':
text='音乐数据';
break;
case '#/movie':
text='电影数据';
break;
}
document.getElementById('app').innerHTML=text;
})
window.addEventListener('hashchange',fn);
作为一个DOM上的标识{ path:'/' ,redirect:'/home' }
{ path:'/' ,redirect:{name:'home'} }
{ path:'*' , component:notFoundVue}
routes: [{path: '/', components:{header: HeaderVue, footer: FooterVue, default: MidVue}}]
-> 不传 name就是default
-> name就是xxxrouter-view
包含 router-view
//组件内包含着第一层router-view
{ name:'music' ,path:'/music', component:Music ,
children:[ //子路由的path /就是绝对路径 不/就是相对父级路径,推荐使用相对路径 .和_都可以标识名字非必须
{name:'music.oumei' ,path:'oumei', component:Oumei },
{name:'music.guochan' ,path:'guochan', component:Guochan }
]
}
Vue.use()
),早期vue团队开发的插件npm i vue-resource -S
import VueResource from 'vue-resource'
created(){
//get请求
this.$http.get('urladdress')
.then(res =>{
console.log(res);
this.data = res.body.message;
},err =>{
console.log(err);
});
//post请求
this.$http.post('urladdress',{
//请求的数据
content: 'something'
},{
//设置 消除json的预检请求
emulateJSON: true;
//此时请求头为 conten-type: application/x-www-form-urlencoded
})
.then(res=>{
this.data = res.body.message;
},err=>{
console.log(err);
});
}
import Axiox from 'axios';
//给对象的原型挂载属性,所有的实例对象都可以使用
Vue.prototype.$axios = Axios;
...
created(){
//get请求
this.$axios.get('url')
.then(res=>{
console.log(res);
this.data = res.data.message;
})
.catch(err=>{
console.log(err);
});
//post请求
this.$axios.post('url',
'content=something',{
headers: application/x-www-form-urlencoded
}
)
.then(res=>{
console.log(res);
this.data = res.data.message;
})
.catch(err=>{
console.log(err);
});
}