vue入门——基本概念

1. 挂载点，模板，实例的关系？

首先附上一个基本demo:

 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>

解释：

挂载点：就是el 所代表的id为root的div,指明vue只对这个div起作用

模板：div里面的内容

实例：在vue实例中指定了挂载点，模板，vue会自动结合模板和数据生成最后的内容，然后把内容放在挂载点之中

2. 计算属性和侦听器(computed 与watch)

 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 的区别：

附上代码显示隐藏的例子

 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>

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

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

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

　　需要频繁的操作时使用v-show 效率更高，如果只需操作一次使用v-if

vue入门——基本概念

猜你喜欢