vuejs笔记之vue组件使用例子

责编:menVScode 2017-10-31 21:55 阅读(1183)

项目环境是基于 vue-cli 搭建的脚手架,下图是 src 文件下的目录,具体如何使用 vue-cli 搭建脚手架可以查看此篇文章:http://menvscode.com/detail/59de348610c98d0e654c1b87

QQ截图20171031212706

src/components/About.vue

<template>
	<div>
		<h4>这里是about页面</h4>
		<p>{{ routerDate }}</p>
	</div>
</template>
<script>
	export default {
		props:['routerDate']
	}
</script>

src/components/Header.vue

<template>
	<div>
		<h3>这里是导航</h3>
		<img src='../assets/111.jpg' />
		<img src='/static/111.jpg' />
		<ul>
			<!--
			<li><router-link to="/">首页</router-link></li>
			<li><router-link to="/about">about</router-link></li>
			<li><router-link to="/job">job</router-link></li>
			-->
			<li v-for="item in nav"><router-link :to="item.path">{{item.title}}</router-link></li>
			<li><router-link :to='"info?id="+name'>{{name}}</router-link></li>
			<!-- 可以将引号看成script标签 -->
		</ul>
	</div>
</template>
<script>
	export default{
		props:['name'],
		data(){
			return {
				nav:[
					{title:'首页',path:'/'},
					{title:'about',path:'/about'},
					{title:'job',path:'/job'}
				]
			}
		}
	}
</script>
<style>
	.router-link-active{
		color:green
	}
</style>

src/components/Job.vue

<template>
	<div>
		<h5>这里是job页面</h5>
		<p>{{ routerDate }}</p>
	</div>
</template>
<script>
	export default {
		props:['routerDate']
	}
</script>

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// @是 webpack规定@代表src目录
//组件的后缀写不写都可以,如果没有后缀的名的话,会自动去寻找Hello.vue,若是没找到就会去找Hello.js ...
import Hello from '@/components/HelloWorld'
import About from '@/components/About'
import Job from '@/components/Job'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
    	path:'/about',
    	component :About
    },
    {
    	path:'/job',
    	component :About
    }
  ]
})

App.vue

<template>
  <div id="app">
    <WebHeader :name='name'></WebHeader>
    <button @click="$router.go(-1)">返回</button>
    <p>首页默认显示的内容</p>
    <router-view :routerDate='routerDate'></router-view>
  </div>
</template>

<script>
    import WebHeader from './components/Header.vue'
    export default {
      name: 'app',
      data(){
          return {
              name:'menvscode.com',
              routerDate:'MVC前端网'
          }
      },
      components:{
          WebHeader
      }
    }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>

main.js

import Vue from 'vue'
// 引入文件的路劲没有 ./ 或者 / ,那么直接是找node_modules目录下的文件
import Router from 'vue-router'
import App from './App.vue'
//如果引入的是目录的话,默认回去找文件名为index的文件
import router from './router'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app', 
  router,
  // template: '<App/>',
  // components: { App }
  render:(h)=>h(App)
})

1. 父组件向字组件传递数据还是用 v-bind,缩写 : ,子组件接收方式用 props 。

2. 向对应路由的模板传递数据也是用 v-bind,如:<router-view :routerDate='routerDate'></router-view>。

3. <li><router-link :to='"info?id="+name'>{{name}}</router-link></li>,可以将引号看成script标签,内部进行正常的字符串的拼接。

4. 组件中使用另一个组件的方法,首先用 import 引入其他组件,如:import WebHeader from './components/Header.vue',然后用使用 components:{}。 

5. <router-link to=''></router-link> 会自动解析成 a 标签,然后选中的状态的class名字是 .router-link-exact-active,可设置选中状态的颜色。

标签: 组件 vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码