|
|
@@ -0,0 +1,62 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ {{msg}}
|
|
|
+ <my-com></my-com>
|
|
|
+ <ul>
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ </ul>
|
|
|
+ <my-coms name="zhangsan" age="18">
|
|
|
+ <div>我是HHHHHHHHH</div>
|
|
|
+ <div>我是XIXIXIXIXIXII</div>
|
|
|
+ </my-coms>
|
|
|
+ </div>
|
|
|
+ <div id="app1">
|
|
|
+ <my-com></my-com>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template id="temp1">
|
|
|
+ <div>
|
|
|
+ <h1>{{name}}</h1>
|
|
|
+ <h1>{{age}}</h1>
|
|
|
+ <slot></slot>
|
|
|
+ <h2>我是temp1</h2>
|
|
|
+ <h3>我是模板</h3>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <script src="vue.js"></script>
|
|
|
+ <script>
|
|
|
+ /* template 模板 最底层的div */
|
|
|
+ Vue.component('my-com', {
|
|
|
+ template: "<h2>hahahhah</h2>"
|
|
|
+ })
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ msg: 1
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ 'my-coms': {
|
|
|
+ template: '#temp1',
|
|
|
+ props: ['name','age']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ new Vue({
|
|
|
+ el: "#app1"
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
zsydgithub