vue2.0的初始化

時間 2019-11-05

標籤 vue2.0 vue 初始化简体版

原文原文鏈接

vue2.0的初始化,使用 webpack構建工具生成的項目javascript

直接上代碼html

main.js文件vue

// 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對象的實例java

el:'#app' :表示將剛建立的Vue對象實例掛載指定的Dom元素中，本項目是index.html文件的<div id="app"></div>。webpack

思想就像下面是使用jQuery、JS拼接菜單的Java項目中，JS中"變量html"把結果賦給了html元素navgit

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

 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文件web

 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文件vue-router

 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文件vuex

 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>

最終顯示的頁面：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。