组件:
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。(通俗点讲,如果你在页面上需要显示4个物品窗口,那么我只需要创建1个窗口组件,然后4次调用这个组件即可,这样是不是很节省效率)。下面展示Vue组件的示例:
// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.'})
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是
。我们可以在一个通过
new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
<div id="components-demo"> <button-counter>button-counter>div
new Vue({ el: '#components-demo' })
※※※※※※
为什么突然要用星号提醒呢,以前实例化的时候,
data里面是什么玩意,都是一个对象,但是现在你发现组件里面的
data是什么玩意,特喵的竟然是个
function,而且我告诉你,你不return一个
对象就会报错,why?这样写是不是开发人员脑子瓦特了,答案是否定的。举个例子,在页面上显示两个计数器,点击一下计数+1,组件里面data的数据就会+1,试想一下,如果data里面是个对象,那么每次改变都是这个对象里面的数据,你点击第一个计数器会影响到第二个计数器里面的数据,显然这样是不合理的,如果组件返回是一个新的对象的话,那么每个组件的数据就不会受到它人的影响了。
※※※※※※
当然组件也可以定义全局组件或者每个vm自己的组件,同以前的过滤器很相似的。还有个比较重要的是子组件怎么获取父组件的data和methos,Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题,我们可以用一个
props
选项将其包含在该组件可接受的 prop 列表中:
Vue.component('blog-post', { props: ['title'], template: '{{ title }}
'})
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 data 中的值一样。
一个 prop 被注册之后,你就可以像这样把数据作为一个自定义 attribute 传递进来:
<blog-post title="My journey with Vue">blog-post><blog-post title="Blogging with Vue">blog-post><blog-post title="Why Vue is so fun">blog-post>
显示的结果如下:
还有就是使用父组件的方法:用
$emit
可以使用。
路由: 路由,也许在我们生活中经常听见,但是百度上的解释又很晦涩,其实从程序员角度来看的话,路由分为前端路由和后端路由。
前端路由: 对于单页面程序来说,主要通过URL的hash(#号)来实现不同页面之间的切换,同时,hash有个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现。
后端路由: 对于普通网站来说,所有的链接都是URL地址,所有的URL地址都对应服务器上对应的资源。来个从零开始的路由:
const NotFound = { template: 'Page not found
' }const Home = { template: '
home page
' }const About = { template: '
about page
' }const routes = { '/': Home, '/about': About}new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) }})
看完后,您是不是学废了