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>



      

  • 相关阅读:
    第十章:Android消息机制
    第九章:四大组件的工作过程
    第八章:理解Window和WindowManager
    第七章:Android动画深入分析
    第六章:Android的Drawable
    第五章:理解RemoteViews
    第四章:View的工作原理
    第三章:View的事件体系
    chr()返回值是当前整数对应的 ASCII 字符。
    遍历从左到右,打印子串在字符串中出现的次数
  • 原文地址:https://www.cnblogs.com/wuguangwei/p/10910868.html
Copyright © 2011-2022 走看看