vue入門——基本概念

時間 2020-05-06

標籤 vue 入門基本概念简体版

原文原文鏈接

1. 掛載點，模板，實例的關係？html

首先附上一個基本demo:vue

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>vue 入門</title>
 6     <script src="./vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="root">
10         <!-- <h1>{{msg}}</h1> -->
11     </div>
12     <script>
13         new Vue({ 14  el: "#root", 15  template: '<h1>{{msg}}</h1>', 16  data: { 17  msg: "HEllo Vue "
18  } 19  }) 20     </script>
21 </body>
22 </html>

解釋：dom

掛載點：就是el 所表明的id爲root的div,指明vue只對這個div起做用this

模板：div裏面的內容spa

實例：在vue實例中指定了掛載點，模板，vue會自動結合模板和數據生成最後的內容，而後把內容放在掛載點之中code

2. 計算屬性和偵聽器(computed 與watch)htm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>vue 入門</title>
 6     <script src="./vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="root">
10         姓：<input v-model="firstName">
11         名：<input v-model="lastName">
12         <div>全名：{{fullName}}</div>
13         <div>計數：{{count}}</div>
14     </div>
15     <script>
16         new Vue({ 17  el: "#root", 18  data: { 19  firstName: ' ', 20  lastName: ' ', 21  count: 0
22  }, 23  computed:{ 24  fullName: function(){ 25                     return this.firstName+ ' '+ this.lastName 26  } 27  }, 28  watch:{ 29  fullName: function(){ 30                     this.count++
31  } 32 } 33  }) 34     </script>
35 </body>
36 </html>

3. v-show 和 v-if 的區別：blog

附上代碼顯示隱藏的例子ip

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>vue 入門</title>
 6     <script src="./vue.js"></script>
 7 </head>
 8 <body> 
 9     <div id="root">
10         <div v-if="show">hello vue</div>
11         <!-- <div v-show="show">hello vue</div> -->
12         <button v-on:click="handle">toggle</button>
13     </div>
14     <script>
15         new Vue({ 16  el: "#root", 17  data:{ 18  show: true
19  }, 20  methods:{ 21  handle: function(){ 22                     this.show = !this.show; 23  } 24  } 25 
26  }) 27     </script>
28 </body>
29 </html>