个人博客
1.学到的东西
11. 计算属性的使用
目标：计算属性的应用场景，实现将一个日期时间值转换为yyyy-MM-dd格式字符串
分析：
一个日期的毫秒值要显示为格式化（yyyy-MM-dd）的日期字符串的话；可以使用computed计算属性里面的方法进行处理。
小结：
计算属性的应用：
<div id="app">
<h2>
你的生日是：
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
<hr>
<h2>
你的生日是：
{{birth}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
birthday:1429032123201
},
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
}
}
});
</script>
computed计算属性的应用场景：可以应用在插值或者指令表示式复杂的时候。可以将一些属性数据经过方法处理之后返回。
12. watch基本和深度监控
目标：watch的使用场景；并使用其监听简单属性值及其对象中属性值的变化
分析：
在vue实例中数据属性；因为在页面中修改而产生了变化；可以通过watch监控获取其改变前后的值。
如果是修改的对象数据属性，可以开启深度监控获取修改后最新的对象数据。如：person.name
小结：
可以如下使用watch进行数据属性的监控：
<div id="app">
<input type="text" v-model="message">
<hr><br>
<input type="text" v-model="person.name"><br>
<input type="text" v-model="person.age"><button @click="person.age++">+</button>
<h2>
姓名为：{{person.name}}；年龄为：{{person.age}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"黑马",
person:{"name":"heima", "age":13}
},
watch:{
message(newValue, oldValue){
console.log("新值：" + newValue + "；旧值：" + oldValue);
},
person: {
//开启深度监控；监控对象中的属性值变化
deep: true,
//可以获取到最新的对象属性数据
handler(obj){
console.log("name = " + obj.name + "; age=" + obj.age);
}
}
}
});
</script>
watch使用场景：可以监控视图中数据的变化而做出响应；如：下拉框列表中，当如果选择了对于的下拉框选项之后，要根据最新的值去加载一些其它数据的话。
13. 组件使用
目标：了解组件的使用场景；定义点击则计数的组件并使用全局注册和局部注册方式
分析：
可以将通用或者公用的页面模块抽取成vue组件，在vue实例中引用。
小结：
在页面中可以如下实验组件：
<div id="app">
<!--使用组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<script type="text/javascript">
//定义组件
const counter = {
template:"<button @click='num++'>你点击了{{num}}次</button>",
data(){
return {num:0}
}
};
//全局注册组件：在所有的vue实例中都可以使用组件
//参数1：组件名称，参数2：具体的组件
//Vue.component("counter", counter);
var app = new Vue({
el:"#app",
components:{
counter: counter
}
});
</script>
组件使用场景：在项目需要重用某个模块（头部、尾部、新闻。。。）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。
- 全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
- 局部注册：可以在有需要的页面引入组件，如：商城网站首页页面中各种活动模块
2.明日计划
父组件向子组件通信