Vue最重要的知识点组件化开发刘小爱

北京湿疹医院治疗 http://m.39.net/pf/a_8814564.html

今天是刘小爱自学Java的第天。

感谢你的观看,谢谢你。

学习计划安排如下:

首先补充两个知识点:计算属性和监控。再学一下vue中的组件化开发,包括全局、局部组件以及父子组件之间的通信。最后关于组件框架,后续在项目中遇到具体的需求再做说明。一、计算属性

需求:有一个日期的数据,但是是毫秒值,将其转换成日期格式并在页面输出。

在插值表达式中使用js表达式是非常方便的,而且也经常被用到。

①转换毫秒值为日期

和Java中一样,js中也是使用newDate()创建日期对象,可以将毫秒值转换成日期。

但是其格式是美国的日期格式,所以我们需要转换成中国人自己看得懂的格式。

②转换日期格式

getFullYear():获取日期中的年份。getMonth():获取日期中的月份,注意:美国人月份是从0月开始的,所以需要+1.getDate():获取日期中的每月的第几天。getDay():获取每个星期的第几天,注意:和getDate()不要弄混淆了。但是这样的话表达式内容很长,就会显得不够优雅,而且后期维护起来也不方便。

并且有一个很大的问题:如果多个地方都要使用到该日期呢?每次都这么长的表达式?

在Java中自然而言就会想到方法的封装,同样的道理,在Vue中提供了计算属性,来替代复杂的表达式,本质也是方法:

既然是方法,肯定要有返回值,页面渲染时,可以把这个方法当成一个变量来使用。

这样的好处在于,只需要使用一次计算属性,哪里需要用该数据,直接引用就好了。

二、监控

watch可以让我们监控一个值的变化,从而做出相应的反应。

通过watch属性可以监控data属性中name值的变化,定义监控时,name这个值对应的是一个监控处理函数name()。

将name属性和对话框绑定,并在对应页面绑定name值,然后在浏览器中测试,页面上数据会随着对话框中输入值的变化而变化。

其中监控处理函数name有两个参数:

v1表示当前监控的值。v2表示上一次监控的值。如果监控的是一个对象,需要进行深度监控,才能监控到对象中属性的变化:

现在定义监控时,person是一个对象,并且要指定两个属性:

deep:代表深度监控,不仅监控person变化,也监控person中属性变化。handler:就是以前的监控处理函数。通过v.name和v.age获取对象中具体的值。

三、组件化开发

组件的使用,比如说网易云音乐就是一个典型的例子,多个页面共用一个头部导航栏,所以需要在不同的组件中共享导航栏组件。

这就叫做组件化开发。

这样就能避免重复的代码编写,就有点类似于Java中方法或者类的封装。

1定义全局组件

①定义个计数器组件

我们以前直接newVue(),这叫创建一个vue实例,现在是自定义一个组件。

因为组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。template:其和el属性的作用是类似的,对应视图模板。data():定义方式比较特殊,必须是一个函数,作用就对应vue实例中的data属性。②注册组件为全局组件

通过Vue的


转载请注明:http://www.aierlanlan.com/grrz/2898.html