zoukankan      html  css  js  c++  java
  • 路由 组件

    1. 创建组件:创建单页面应用需要渲染的组件
    2. 创建路由:创建VueRouter实例
    3. 映射路由:调用VueRouter实例的map方法
    4. 启动路由:调用VueRouter实例的start方法
    var Home = Vue.extend({
    	template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    	data: function() {
    		return {
    			msg: 'Hello, vue router!'
    		}
    	}
    })
    
    var About = Vue.extend({
    	template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
    })
    
    var router = new VueRouter()
    router.map({
    	'/home': { component: Home },
    	'/about': { component: About }
    })
    
    div class="list-group">
    	<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    	<a class="list-group-item" v-link="{ path: '/about'}">About</a>
    </div>
    
    <router-view></router-view>
    在页面上使用<router-view></router-view>标签,它用于渲染匹配的组件。
    
    var App = Vue.extend({})
    router.start(App, '#app')


    Vue.js的组件的使用有3个步骤:创建组件构造器、注册组件和使用组件。

     

    <!DOCTYPE html>
    <html>
    	<body>
    		<div id="app">
    			<!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
    			<my-component></my-component>
    		</div>
    	</body>
    	<script src="js/vue.js"></script>
    	<script>
    	
    		// 1.创建一个组件构造器
    		var myComponent = Vue.extend({
    			template: '<div>This is my first component!</div>'
    		})
    		
    		// 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
    		Vue.component('my-component', myComponent)
    		
    		new Vue({
    			el: '#app'
    		});
    		
    	</script>
    </html>



      

  • 相关阅读:
    orcale 多列转一行显示
    orcale 树形结构查询
    orcale 32位guid转36位guid
    orcale 树形结构查询
    win7下安装virtualbox+Ubuntu12.04笔记
    Spring调度器corn表达式详解
    MYSQL之一主多从搭建方案
    None of the configured nodes are available:[{#transport#-1}解决方案
    大数据分批次提交保存
    ORACLE时间类型字段加减简便运算
  • 原文地址:https://www.cnblogs.com/wuguangwei/p/10910868.html
Copyright © 2011-2022 走看看