VUE学习笔记02

1     new Vue({
2         el:"#app",
3         components:{
4             mytag:{
5                 template:"<h1>普通创建</h1>",
6             },
7         },
8     })

 1 <template id="temp">
 2     <div>
 3         名字:<input type="text" />
 4         密码:<input type="password" />
 5                <input type="button" value="提交" />
 6   </div>
 7 </template>
 8 
 9 <script>
10     new Vue({
11         el:"#app",
12         components:{
13             mytag:{
14                 template:"#temp",
15             },
16         },
17     })
18 </script>

1 <!--script必须使用type="text/template-->
2 <script id="temp" type="text/template">
3     <form action="" method="post">
4         名字:<input type="text" />
5         密码:<input type="password" />
6         <input type="button" value="提交" @click="say"/>
7     </form>
8 </script>

 1 语法:
 2       "组件的名字":{
 3             template: "",
 4             data : function(){
 5                 return {
 6                   键1:值1,
 7                   键2:值2
 8                 }
 9             }
10        }

1      <!--引入路由支持-->
2     <script src="vuejs/vue-router.js"></script>

 1 <div id="app">
 2     <p>
 3         <!--
 4             router-link:路由标签（它就是一个a标签）
 5             to="/foo":路径(连接到的地址)
 6          -->
 7         <router-link to="/main">首</router-link>
 8         <router-link to="/singer">苏</router-link>
 9         <router-link to="/hot">海</router-link>
10     </p>
11     <!-- 路由出口 否则不会跳转-->
12     <!-- 路由匹配到的组件将渲染在这里 -->
13     <router-view></router-view>
14 </div>
15 
16 <script>
17     /*2. 定义路由
18     每个路由应该映射一个组件。 其中"component" 可以是
19     通过 Vue.extend() 创建的组件构造器，
20     或者，只是一个组件配置对象。*/
21     var routes = [
22         {
23             path: ‘/main‘,
24             component: {
25                 template:"<h2>跳</h2>"
26             }
27         },
28         {
29             path: ‘/singer‘,
30             component: {
31                 template:"<h2>唱</h2>"
32             }
33         }, {
34             path: ‘/hot‘,
35             component: {
36                 template:"<h2>热</h2>"
37             }
38         }
39     ]
40 
41     //定义一个路由
42     var router = new VueRouter({
43         routes // (缩写) 相当于 routes: routes
44     })
45 
46     new Vue({
47         el:"#app",
48         router:router
49     })
50 
51 </script>