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>

解释：运行以上代码，查看控制台后发现:utf-8

　　v-if 是直接从整个dom元素中删除该节点（每次触发须要从新建立dom或销毁dom），

　　而v-show是经过display:none来实现节点的隐藏,

　　须要频繁的操做时使用v-show 效率更高，若是只需操做一次使用v-if