vue基础

(v- cloak . v-text . v-html . v-bind .

v-on . v-mode )

一. v-cloak v-text v-html
1.v-cloak ：解决插值表达式闪烁的问题，只会替换自己的这个占位符，不会把整个元素的内容清空。
2.v-text ：没有闪烁的问题，会直接覆盖元素中原本的内容。
3.v-html :将内容作为html的形式显示，会直接覆盖元素中原本的内容。

二：v-bind绑定：是vue中提供的用于绑定属性的指令
例子：

<input type="button" value="按钮" v-bind:title="mytitle">  

或

 v-bind:title="mytitle + '123123' "

定义：mytitle: ‘啦啦啦啦啦啦’
v-bind：指令可以被简写为 ：要绑定的属性。只能实现单向绑定

三：v-on :事件绑定机制 【缩写@】
例子：

<input type="button" value="按钮" v-on：click="show">

定义方法： methods :{
show:function(){
alert(‘Hello’) 【弹窗】
}
}
methods这个属性定义了当前vue实例所有可用的方法
mouseover：鼠标覆盖事件

四：v-mode:
使用v-mode指令，可以实现表单元素和Mode中数据的双向数据绑定。
*注；v-mode只能运用在表单元素中。

五：修饰符

实例1：

  <input type="button" value="戳他" @click.stop="zhie"> 

【使用.stop组织冒泡】
实例2：

<a href="http://www.baidu.com" @click.prevent="linkClick"> 有问题问百度</a>

【使用.prevent阻止默认行为】
【使用.capture实现捕获触发事件的机制】
【使用.self实现只有点击当前元素时候，才会触发事件处理函数，只会阻止自己身上的冒泡行为的触发，并不会阻止冒泡行为的触发】
【.once事件只触发一次】

实例一（跑马灯）
html.

<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{msg}}</h4>

js.

 data:{
        msg: '猥琐发育，别浪~~！'
        intervalId:null     在data上定义，定时器Id
 }
   methods:{ 
        lang() { 
  if（this.intervalId !=null）return;  判断 intervalId 是否为null
       this.intervalId setInterval( ()=>{    添加定时器
        var start = this.msg.substring(0,1)  获取首的第一个数据
        var end = this.msg.substring(1)  获取尾部最后一个数据
        this .msg=end+ start  获得新的字符串，并且赋值给 this.msg
      },400) 
       stop(){  停止定时器
          clearInterval(this . intervalId )
          this .interbalId = null； 定义 intervalId 为null
     }
   }
  }

实例二（计算器）
html:

<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
 <option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<select>
<input type="text" v-model="n2">
<input type="buttion" value="="  @click="calc">
<input type="text" v-model="result">

js:

   data:{
     n1:0，
     n2:0,
     result:0,
     opt：'+'
   }
    methods:{  
       calc(){    //计算器算数 
       switch( this.opt){ 
         case"+":
           this.result = parseInt( this.n1) +parseInt( this.n2)
           break ;
         case"-":
           this.result = parseInt( this.n1) -parseInt( this.n2)
           break ;
         case"*":
           this.result = parseInt( this.n1) *parseInt( this.n2)
           break ;
         case"/":
           this.result = parseInt( this.n1) /parseInt( this.n2)
           break ;
   }
     }
      }

总结：
一.
1.data是个对象，制定了控制的区域内需要用到的数据
2.methods虽然带个s后缀，但是是个对象，这里可以自定义方法
二.
1.如果要访问data上的数据，或者访问methods的方法，必须带this
三.
1.在v-for要会使用key属性
四.
1.v-model只能应用在表单元素
五.
1.在vue中绑定样式的两种方法 v-bind：class v-bind：style