1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <script src="../js/vue.js"></script>
10 <body>
11 <div id="app">
12 <mycom3></mycom3>
13 </div>
14
15 <!-- 在被控制的 #app 外面， 使用 template 元素， 定义组件的HTML模板结构 -->
16 <template id="tmpl">
17 <div>
18 <h1>这是通过 template 元素， 在外部定义的组件结构， 这个方式， 有代码的智能提示和高亮</h1>
19 <h4>好用，不错！</h4>
20 </div>
21 </template>
22 </body>
23 </html>
24 <script>
25
26 Vue.component('mycom3', {
27 template: '#tmpl'
28 })
29
30 var vm = new Vue({
31 el:'#app',
32 data:{
33
34 },
35 method:{
36
37 }
38 })
39
40 </script>
