`v-cloak`

防止页面加载时出现闪烁问题

 <style type="text/css">  
 
 /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ 
    [v-cloak]{    
        /* 元素隐藏*/    
        display: none; 
    }  
  </style>
  <body>  
  <div id="app">    
      <!-- 2、让带有插值 语法的   添加 v-cloak 属性   在数据渲染完场之后，v-cloak 属性会被自动去除，
      v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签 也就是对应的标签会变为可见-->
    <div  v-cloak  >{{msg}}</div>  
  </div>  
  <script type="text/javascript" src="js/vue.js"></script>  
  <script type="text/javascript">    
     var vm = new Vue({      
         // el   指定元素 id 是 app 的元素        
        el: '#app',      
         // data 里面存储的是数据      
      data: {        
        msg: 'Hello Vue'     
       }  
      }
    );
   </script>
  </body>
  </html>

`v-text`

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id="app">    
    <!--   注意:在指令中不要写插值语法 直接写对应的变量名称    
    在 v-text 中 赋值的时候不要在写 插值语法 一般属性中不加 {{}} 直接写 对应 的数据名  -->    
    <p v-text="msg"></p>    
      <p>  
        <!-- Vue 中只有在标签的 内容中 才用插值语法 -->       
        {{msg}}    
      </p>
      </div>
     <script>    
      new Vue({
           el: '#app',        
          data: {            
              msg: 'Hello Vue.js'       
          }   
            });
      </script>

`v-html`

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app"> 
     <p v-html="html"></p>     <!-- 输出：html标签在渲染的时候被解析 -->        
     <p>{{message}}</p>        <!-- 输出：<span>通过双括号绑定</span> -->     
     <p v-text="text"></p>     <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
     </div>
 <script> 
     let app = new Vue({ 
     el: "#app", 
     data: { 
        message: "<span>通过双括号绑定</span>", 
        html: "<span>html标签在渲染的时候被解析</span>",          
        text: "<span>html标签在渲染的时候被源码输出</span>", 
     } 
    });
    </script>

`v-once`

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js -->     <span v-once>{{ msg}}</span>    
<script>    
     new Vue({        
        el: '#app',        
        data: {            
              msg: 'Hello Vue.js'       
        } 
      });
 </script>

`双向数据绑定`

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

`v-model`

 <div id="app">      
     <div>{{msg}}</div>      
 <div>         
   当输入框中内容改变的时候， 页面上的msg 会自动更新        
   <input type="text" v-model='msg'>      
    </div>  
 </div>

`MVVM`

MVC 是后端的分层开发概念；

MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model, View , VM ViewModel

M--> model数据层 Vue 中数据层都放在 data 里面
V--> view 视图Vue 中 view 即我们的HTML页面
VM-> （view-model）控制器将数据和视图层建立联系vm 即 Vue 的实例就是 vm

`v-on`

用来绑定事件的
形式如：v-on:click 缩写为 @click;

v-on事件函数中传入参数

<body>    
  <div id="app">        
    <div>{{num}}</div>        
    <div>            
        <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->                    <button v-on:click='handle1'>点击1</button>            
       <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，                 
       并且事件对象的名称必须是$event  -->            
       
       <button v-on:click='handle2(123, 456, $event)'>点击2</button>        
    </div>    
    </div>    
  <script type="text/javascript" src="js/vue.js"></script>    
     <script type="text/javascript">        
     var vm = new Vue({            
          el: '#app',            
          data: {                
               num: 0           
          },            
        methods: {                
           handle1: function(event) {                    
              console.log(event.target.innerHTML)               
          },                
           handle2: function(p, p1, event) {      
              console.log(p, p1)                    
          console.log(event.target.innerHTML)                    
              this.num++;               
          }       
        } 
      });  
     </script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符修
饰符是由点开头的指令后缀来表示的

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

`v-bind`

v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;
v-model原理：利用input本身的value属性进行属性绑定，再利用input输入框绑定当前的覆盖value 双向绑定也就是当输入框的值变化，console的值也会变化

<!-- 绑定一个属性 --> 
<img v-bind:src="imageSrc">  
<!-- 缩写 --> 
<img :src="imageSrc">

<div id="app">
        <div>{{msg}}</div>
        <div>{{num}}</div>
        <div @click='handle1'>
            <button @click.stop='handle'>儿子没有加加</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent='handle4'>百度</a> <br>
        <a :href="url">属性绑定</a> <br>
        <!-- v-model原理：利用input本身的value属性进行属性绑定，再利用input输入框绑定当前的覆盖value
        双向绑定也就是当输入框的值变化，console的值也会变化 -->
        <input type="text" :value="mgs" @input='handel'>
        <div>{{mgs}}</div>
        <div :class="{active:isActive}"></div>
        <button @click='toggle'>切换</button>
        <input type="text" v-model='a'>
        <input type="text" v-model='b'>
        <button @click='jsq'>计算</button>
        <span>计算结果</span>
        <span v-text='result'></span>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '事件修饰符',
                url: 'http://www.itcast.com',
                num: 0,
                mgs: '333',
                isActive: true,
                a: '',
                b: '',
                result: ''
            },
            methods: {
                handle: function() {
                    console.log('儿子执行了');
                },
                handle1: function() {
                    this.num++;
                },
                handel(event) {
                    this.mgs = event.target.value;
                },
                handle4() {},
                toggle() {
                    this.isActive = !this.isActive;
                },
                jsq() {
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
            }
        })
    </script>

`v-if v-show`

v-show本质就是标签display设置为none，控制隐藏

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

v-if是动态的向DOM树内添加或者删除DOM元素

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

说白了： v-if:在操作Dom，创建与删除的操作 v-show:只是简单的显示与隐藏display:none
如果用户频繁切换，则用v-show,可以提高性能; 如果一刷新进入页面的状态，就用v-if，性能比v-show好点.

<div id="app">
        <div v-if="score>90">优秀</div>
        <div v-if-else="score>80">还行</div>
        <div v-else>一般</div>
        <div class="hezi1" v-if='isTrue1'></div>
        <button @click='btnFn1'>切换</button>
        <div class="hezi2" v-show='isTrue2'></div>
        <button @click='btnFn2'>切换</button>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                score: 89,
                isTrue1: true,
                isTrue2: true
            },
            methods: {
                btnFn1() {
                    this.isTrue1 = !this.isTrue1;
                },
                btnFn2() {
                    this.isTrue2 = !this.isTrue2;
                }
            }
        })
    </script>

`v-for`

原生js遍历对象

      var obj = {
          name: 'lisi',
          age: 99,
          score: 99
      }
      for (var key in obj) {
          console.log(key, obj[key]);
      }

v-for遍历数组+对象

<div id="app">
      <ul>
          <li v-for='(item,index) in fruits' :key='index'>
              <span>{{item.cname}} </span>
              <span> ----------- </span>
              <span>{{item.ename}}</span>
          </li>
      </ul>
      v:值  k:属性名  i:索引
      <div v-for='(v,k,i) in obj'>
          {{v+'---'+k+'---'+i}}
      </div>
  </div>
  <script src="./vue.min.js"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              msg: 'kkk',
              fruits: [{
                  cname: '苹果',
                  ename: 'apple'
              }, {
                  cname: '梨子',
                  ename: 'pear'
              }, {
                  cname: '香蕉',
                  ename: 'bannan'
              }],
              obj: {
                  name: 'lisi',
                  age: 99,
                  score: 99
              }
          }
      })
  </script>

Vue基础指令及面试题

v-cloak

v-text

v-html

v-once

双向数据绑定

v-model

MVVM

v-on

事件修饰符

v-bind

v-if v-show

v-for

`v-cloak`

`v-text`

`v-html`

`v-once`

`双向数据绑定`

`v-model`

`MVVM`

`v-on`

`v-bind`

`v-if v-show`

`v-for`