vue入门——基本概念

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

首先附上一个基本demo:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <title>vue 入门</title>
     <script src="./vue.js"></script>
 </head>
 <body>
     <div id="root">
         <!-- <h1>{{msg}}</h1> -->
     </div>
     <script>
         new Vue({
             el: "#root",
             template: '<h1>{{msg}}</h1>',
             data: {
                 msg: "HEllo Vue "
             }
         })
     </script>
 </body>
 </html>

解释：

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

模板：div里面的内容

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

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <title>vue 入门</title>
     <script src="./vue.js"></script>
 </head>
 <body>
     <div id="root">
         姓：<input  v-model="firstName">
         名：<input v-model="lastName">
         <div>全名：{{fullName}}</div>
         <div>计数：{{count}}</div>
     </div>
     <script>
         new Vue({
             el: "#root",
             data: {
              firstName: ' ',
              lastName: ' ',
              count: 0
             },
             computed:{
                 fullName: function(){
                     return this.firstName+ ' '+ this.lastName
                 }
             },
             watch:{
                 fullName: function(){
                     this.count++
                 }
 }
         })
     </script>
 </body>
 </html>

3. v-show 和 v-if  的区别：

附上代码显示隐藏的例子

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <title>vue 入门</title>
     <script src="./vue.js"></script>
 </head>
 <body>
     <div id="root">
         <div v-if="show">hello vue</div>
         <!-- <div v-show="show">hello vue</div> -->
         <button v-on:click="handle">toggle</button>
     </div>
     <script>
         new Vue({
             el: "#root",
             data:{
                 show: true
             },
             methods:{
                 handle: function(){
                     this.show = !this.show;
                 }
             }

         })
     </script>
 </body>
 </html>

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

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

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

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