Vue.js 基本语法

Vue之 - 基本的代码结构和插值表达式

  
  
  
  
  
  



  
  
  

    
{{ msg }}
  

  

Vue之 v-cloak

我们把加载vue.js放在插值表达式之后，打开网页就可以看到闪烁出现来{{ msg }}

  
  
  
  



  


    
++++++++ {{ msg }} ----------
  


  

  

然后我们可以打开浏览器的开发者模式，选择disable cache和选择shlow 3G 可以看到效果更加明显。

使用v-cloak

  
  
  
  
  



  

    
    
++++++++ {{ msg }} ----------
  


  

  

Vue指令之v-text和v-html

默认 v-text 和v-html是没有闪烁问题的
v-text和v-html会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空

  
  
  
  
  



  

    
    
++++++++ {{ msg }} ----------
    
==================
    
    

    
{{msg2}}
    

    
1212112
  


  

  

Vue指令之v-bind的三种用法

v-bind: 是 Vue中，提供的用于绑定属性的指令

1. 直接使用指令v-bind

2. 使用简化指令:

3. 在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

  
  
  
  
  



  

    
    
++++++++ {{ msg }} ----------
    
==================
    
    

    
{{msg2}}
    

    
1212112

     
     
     
     
    

  


  

  

Vue指令之v-on

Vue 中提供了 v-on: 事件绑定机制，不需要我们操作dom获取元素绑定事件。

  
  
  
  
  



  

    
    
++++++++ {{ msg }} ----------
    
==================
    
    

    
{{msg2}}
    

    
1212112

    
    
    
    

    
    


    
  


  

  

跑马灯效果

  
  
  
  
  
  



  
  

    
    

    
{{ msg }}

  

  

Vue指令之v-on的缩写和事件修饰符

使用.stop 阻止冒泡

我们点击里面的戳他按钮，我们可以看到打印了两句，但是如果我们只想要触发btn按钮的时间，该怎么做？

我们可以使用.stop来阻止冒泡。

使用.capture 实现捕获触发事件的机制

因为事件冒泡，所以我们可以看到前面的点击按钮的时候触发事件的顺序是从里面到外面的，但是如果我们想要的是先触发外面再触发里面的该怎么做。我们可以使用.capture 实现捕获触发事件的机制

使用 .prevent阻止默认行为

接下来我们来看看如何阻止默认行为，比如我们使用 链接到百度，然后我们给他添加一个click事件，默认行为就是会打印并弹出百度页面，但是我们想要的是只触发点击事件，取消掉默认的弹出页面的行为。所以我们可以使用.prevent来阻止默认行为。

  
  
  
  
  
  



  


    
    

      
    

    
    有问题，先去百度


  

  

使用 .self 实现只有点击当前元素时候，才会触发事件处理函数

这样看起来使用.self也是可以阻止冒泡的，那么使用.stop 和使用self之间有什么区别呢？

.stop 和 .self 的区别

可以看到我们点击了按钮，阻止了冒泡，只有答触发了按钮的事件。

然后我们再来看看使用.self

可以看到.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

使用.once 只触发一次事件处理函数

  
  
  
  
  
  



  


    
    有问题，先去百度

  

  

可以看到效果只有第一次点的时候阻止了默认行为，第二次点击就会弹出百度的页面。

源代码

查看l