Vue.js及其相关应用II

Vue.js及其相关应用II

Vue组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

全局组件模板示例

<body>
	<div id="app">
		<myform></myform>
	</div>
	
	<!--模板方式一-->
    <!--<template id="mytemp">
        <form action="" method="post">
            用户<input type="text" name="username"/><br/>
            密码<input type="password" name="password"/><br/>
            <input type="submit" value="提交">
        </form>
    </template>-->
	
	<!--模板方式二-->
    <script id="mytemp2" type="text/template">
        <form action="" method="post">
            用户<input type="text" name="username"/><br/>
            密码<input type="password" name="password"/><br/>
            <input type="submit" value="提交">
        </form>
    </script>
	
	<script>
		Vue.component("myform",{
            template:"#mytemp2"
        })
        new Vue({
            el:"#app",
            data:{
                message:"你好!"
            }
        })
	</script>
	
</body>

页面展示
在这里插入图片描述

小结:全局组件模板创建方式有两种,一是在标签中编辑模板

	//组件模板创建方式一
	<template id="mytemp">
        <form action="" method="post">
            用户<input type="text" name="username"/><br/>
            密码<input type="password" name="password"/><br/>
            <input type="submit" value="提交">
        </form>
    </template>

	//组件模板创建方式二,在
                    
                    

你可能感兴趣的:(java相关总结)