过滤器 获取DOM元素
<div>
请输入内容:<input type="text" name="" v-model="text">
显示:{{text|myFilter}}
</div>
export default{
data(){
return{ text: ''}
}
filters:{
myFilter:function(value){value就是text
//输入的内容帮我做个反转,转换成数组,反转数组,再转为字符串
// return 1;
return value.split('').reverse().join('');
}
}
}
创建全局过滤器
Vue.filter('myFilter',function(value){
return '我是全局过滤器';
})
注意:当全局过滤器和组件内过滤器重名的时候,是以组件内过滤器为有效的
获取DOM元素
<sub-vue ref="sub"></sub-vue> 组件对象
<div ref="myDiv">{{text}}</div> DOM对象
救命稻草,前端框架就是为了减少DOM操作,但是再特定的情况下,还是给你留了后门的
在指定的元素上,添加 ref="名称A"
在获取的地方加上 this.$refs.名称A
如果ref放在了原生DOM元素上,获取的数据就是原生的DOM对象
如果ref放在了组件对象上,获取的就是组件对象
export default{
data(){
return{
text:'123'
}
},
//组价创建后,数据已经完成初始化,但是DOM还未生成
created(){ //事件的处理函数(created)
console.log('created':this.$refs.myDiv);
}
//数据装载到DOM上,各种数据已经就位,将数据渲染到DOM上,DOM已经生成
mounted(){
this.$refs.sub.$el.innerHTML='xxxxx' 组件
console.log('mounted:',this.$refs.myDiv); DOM
//涉及DOM类的操作
//this.$refs.myDiv.innerHTML='hhhh';
//涉及到数据的操作
this.text='xxxx';
}
}
总结:原生的DOM可以直接操作,若是组件对象,想获得DOM对象,通过this.$refs.sub.$el进行操作
对应的事件:
created完成了数据的初始化,此时还未生成DOM,无法操作DOM
mounted将数据已经装载到了DOM之上,可以操作DOM
重定向和404
进入后,默认就是/
重定向 {path :'/',redirect: '/home'}
重定向 {path :'/',redirect:{name:'home'}}
404:在路由规则的最后的一个规则中写一个很强大的匹配
{path : '*',component: NotFoundVue}
两种创建路由对象配置路由规则的方式
方法一:
let router=new VueRouter();
routes:[
{}
]
方法二:
let router=new VueRouter();
router.addRoutes([
])
let router=new VueRouter();
router.addRoutes([
//重定向
{path: '/',redirect: '/home'},
{path: '/home',component:Home}
{path: '/',redirect:{name: 'home'}},
{name: 'home',path: '/home',component: Home}
//最终无法匹配 ->404
{path: '*',component: NotFound}
])
vue2.0入门及实战开发(四)
最新推荐文章于 2018-06-20 19:51:17 发布