vue如何在template模板中写css vue template_Vue

组件

组件系统是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>

显示的结果如下:


vue如何在template模板中写css vue template_vue 路由守卫和路由拦截器_02

还有就是使用父组件的方法:用

$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) }})

看完后,您是不是学废了


vue如何在template模板中写css vue template_数据_03