下面我们来挑几个练练吧。
①v-bind(简写为 :)
v-bind.red{
color: red;
}
.blue{
background: blue;
}
{{message}}
new Vue({
el:'#app',
data:{
message:'bind',
json:{
red:true,
blue:true
}
}
});
bind.html
②v-on(简写为 @ ) + v-for
v-on- {{v}}
new Vue({
el:'#app',
data:{
arr:['a','b','c']
},
methods:{
add:function(){
this.arr.push('bb');
}
},
});
on-for.html
③v-text、v-html这两个都是渲染数据。这两种方式跟我们直接用{{msg}}又有什么区别呢。
先来说说{{msg}}跟v-text
用法:
data:{
msg:'hello,Liz'
}
上面两个写法都能渲染出msg里面的内容,当加载速度比较慢的时候,使用第一种写法你在浏览器上可能会看到{{msg}},然后才看到渲染出来的数据hello,Liz,但是v-text就没这个问题,你直接看到渲染出来的数据hello,Liz。
v-text跟v-html相比,v-html可以解析html标签,举个栗子
data:{
text:'
}
这时候v-text渲染出来就是
-----------------------------------------------认真看应该明白这三者了吧,下面给代码跑跑看----------------------
v-text,v-htmlnew Vue({
el:'#app',
data:{
msg:'hello,Liz',
text:'
}
});
v-text+v-html.html
3.vue的生命周期,钩子函数。左边是官方给的图例(看不清建议去官网看看),右边是对钩子函数的解释。生命周期是蛮重要的,在后面的开发中你要控制你的事件、数据什么时候进行,都要用到。现在先理解一下,以后用的时候比较清晰。
示例代码理解(运行的时候打开浏览器调试查看它的周期。调试快捷键F12,笔记本按 Fn+F12)
life-cyclewindow.οnlοad=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
console.log('组件实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
}
});
};
{{msg}}
lifeCycle.html
4.vue组件定义
核心部分,先要注册组件。 Vue.component('组件名字',{内容});
然后在html中使用组件标签。组件标签就是你取的组件名字加上尖括号。 组件名字>
(这里解释一下,template其实就是我注册组件的时候里面的内容中的template,他们之间的关系通过 id="aaa"来维系。)
看看代码
component// 注册
Vue.component('my-component', { /*定义组件名称和内容*/
template:'#aaa' /*调用id为aaa的模板*/
});
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
}
});
};
我是组件
{{msg}}
components.html
5.过滤器
本来在vue1.x的版本中,自带了很多好用的过滤器的,但是尤大大为了框架长久发展,决定删除掉,全部交给开发者去自定义。这里就给一个自定义时间过滤器的实例。
我们在html中调用过滤器
然后在script中进行定义过滤器
代码在这里
草稿{{a | toDou}}
//自定义过滤- 时间过滤
Vue.filter('toDou',function(input){
var oDate = new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
new Vue({
el:'#app',
data:{
a:Date.now()
},
});
filter.html
===这里我们定义了组件,过滤器,小结一下。======
其实在vue页面中定义你要的组件也好,过滤器也好,都是要通过vue实例调用这个方法的。总的套路就是
①。在script中定义:Vue.xxx = ('自定义名字',内容)
②。在html代码中使用它
=================================================滴滴 哒~========================
到这里,基础部分就暂告一段落了,是不是很简单。下一篇我们来介绍如何用vue-cli来搭建一个工程项目。会有一个比较大的跨度噢~加油啦~biu~