vue2.0的初始化

vue2.0的初始化,使用 webpack构建工具生成的项目

直接上代码

main.js文件

 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

 

new vue:表示 创建了一个Vue对象的实例

el:'#app' :表示 将刚创建的Vue对象实例 挂载 指定的Dom元素中，本项目是index.html文件的<div id="app"></div>。

               思想就像下面是使用jQuery、JS拼接菜单的Java项目中，JS中"变量html"把结果赋给了html元素nav

 1 <ul id="nav" class="nav"> 

 

 1 function drawTopNav(data) {
 2         var html = [];
 3         $.each(data, function(i, menu) {
 4             html.push('<li><div class="nav-header"><a iconClass='+menu.ICON_CLASS+' class="firstNode" id="firstNode'
 5                     + menu.ID
 6                     + '" href="'
 7                     + (!menu.URL || menu.URL == 'null' ? 'javascript:void(0);'
 8                             : menu.URL) + '"><img src="'+menu.IMG_URL+'"><h2>'
 9                     + menu.NAME + '</h2></a></div></li>');
10             
11             firstArr[menu.ID] = menu;
12         });
13         $("#nav").html(html.join(''));
14         $(".firstNode").bind("click", firstNodeClicked);
15         $(".firstNode").first().click();
16     }
render: h => h(App)：作用是渲染视图，作为填充的内容给挂载点el，这是vue2.0的写法
----
下面是vue1.0的写法
components: { App },
template: '<App/>'
components: { App }，作用是 注册组件信息
template: '<App/>'作用是 简写的模板调用组件的标签

实际上这两行代码的作用是一样的,
作用是渲染视图，作为填充的内容给挂载点el
 

index.html文件

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>test_vue</title>
 7   </head>
 8   <body>
 9     <div id="app"></div>
10     <!-- built files will be auto injected -->
11   </body>
12 </html>

 

App.vue文件

 1 <template>
 2   <div id="app">
 3     <img src="./assets/logo.png">
 4     <router-view/>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: 'App'
11 }
12 </script>
13 
14 <style>
15 #app {
16   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17   -webkit-font-smoothing: antialiased;
18   -moz-osx-font-smoothing: grayscale;
19   text-align: center;
20   color: #2c3e50;
21   margin-top: 60px;
22 }
23 </style>

 

router文件下的index.js文件

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import HelloWorld from '@/components/HelloWorld'
 4 
 5 Vue.use(Router)
 6 
 7 export default new Router({
 8   routes: [
 9     {
10       path: '/',
11       name: 'HelloWorld',
12       component: HelloWorld
13     }
14   ]
15 })

 

components文件夹下的HelloWorld.vue文件

 1 <template>
 2     <div class="hello">
 3         <h1>{{ msg }}</h1>
 4         <h2>Essential Links YYYYYY 2019</h2>
 5         <ul>
 6             <li>
 7                 <a href="https://vuejs.org" target="_blank">
 8                     Core Docs
 9                 </a>
10             </li>
11             <li>
12                 <a href="https://forum.vuejs.org" target="_blank">
13                     Forum
14                 </a>
15             </li>
16             <li>
17                 <a href="https://chat.vuejs.org" target="_blank">
18                     Community Chat
19                 </a>
20             </li>
21             <li>
22                 <a href="https://twitter.com/vuejs" target="_blank">
23                     Twitter
24                 </a>
25             </li>
26             <br>
27             <li>
28                 <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
29                     Docs for This Template
30                 </a>
31             </li>
32         </ul>
33         <h2>Ecosystem</h2>
34         <ul>
35             <li>
36                 <a href="http://router.vuejs.org/" target="_blank">
37                     vue-router
38                 </a>
39             </li>
40             <li>
41                 <a href="http://vuex.vuejs.org/" target="_blank">
42                     vuex
43                 </a>
44             </li>
45             <li>
46                 <a href="http://vue-loader.vuejs.org/" target="_blank">
47                     vue-loader
48                 </a>
49             </li>
50             <li>
51                 <a href="https://github.com/vuejs/awesome-vue" target="_blank">
52                     awesome-vue
53                 </a>
54             </li>
55         </ul>
56     </div>
57 </template>
58 
59 <script>
60     export default {
61         name: 'HelloWorld',
62         data() {
63             return {
64                 msg: 'Welcome to Your Vue.js App'
65             }
66         }
67     }
68 </script>
69 
70 <!-- Add "scoped" attribute to limit CSS to this component only -->
71 <style scoped>
72     h1,
73     h2 {
74         font-weight: normal;
75     }
76 
77     ul {
78         list-style-type: none;
79         padding: 0;
80     }
81 
82     li {
83         display: inline-block;
84         margin: 0 10px;
85     }
86 
87     a {
88         color: #42b983;
89     }
90 </style>

 

最终显示的页面：

 

posted @ 2019-01-18 16:02  杨斌_济南  阅读(1140)  评论(0)  编辑  收藏  举报