陈潇冰 php,Vue.js的从入门到放弃进击录（一）

下面我们来挑几个练练吧。

①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

用法：

{{msg}}

data:{

msg:'hello,Liz'

}

上面两个写法都能渲染出msg里面的内容，当加载速度比较慢的时候，使用第一种写法你在浏览器上可能会看到{{msg}},然后才看到渲染出来的数据hello,Liz，但是v-text就没这个问题，你直接看到渲染出来的数据hello,Liz。

v-text跟v-html相比，v-html可以解析html标签，举个栗子

data:{

text:'

hello,liz

'

}

这时候v-text渲染出来就是

hello,liz

，但是v-html渲染出来的是hello，liz

-----------------------------------------------认真看应该明白这三者了吧，下面给代码跑跑看----------------------

v-text,v-html

{{msg}}

new Vue({

el:'#app',

data:{

msg:'hello,Liz',

text:'

hello,liz

'

}

});

v-text+v-html.html

3.vue的生命周期，钩子函数。左边是官方给的图例(看不清建议去官网看看)，右边是对钩子函数的解释。生命周期是蛮重要的，在后面的开发中你要控制你的事件、数据什么时候进行，都要用到。现在先理解一下，以后用的时候比较清晰。

               

示例代码理解(运行的时候打开浏览器调试查看它的周期。调试快捷键F12，笔记本按 Fn+F12)

life-cycle

window.ο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~