vue学习笔记（一）

最近开始看一些vue的视频，记录一下笔记：

vue常用指令：

  1. v-cloak  解决插值表达式闪烁的问题

  2. v-text   默认v-text是没有闪烁问题的，但是它会覆盖元素中的内容，而插值表达式并不会清空整个元素的内容

  3. v-html  不用多说了，可以显示html标签

  4. v-bind  绑定属性的指令，后面的值可以为js表达式       v-bind:属性名=’xxx' 可以简写为   :属性名 = 'xxx'

  5. v-on  事件绑定机制， v-on:click='show' ，show为方法名，在methods中去定义。  缩写为为@click='show'

<div id="app">
    <input type="button" value="按钮" v-on:click='show' @mouseover='mouseover'>
</div>
<script>
  var vm = new Vue({
      el: '#app',
      data: {
          msg: '123'
      },
      methods: {
          show() {
              alert('鼠标点击按钮');
          },
          mouseover() {
              console.log('鼠标滑过');
          }
      }
  })
</script>

 

 

 

 

6. 在VM实例中，如果想要获取data中的数据，或者调用methods的方法，要通过this.调用，this指向new出来的实例对象

7. 事件修饰符：

    .stop 阻止冒泡（阻止所有冒泡）

    .prevent  阻止默认事件

    .capture  添加事件时使用捕获模式

    .self 只在元素本身触发回调，子元素不会触发 （阻止了当前元素的冒泡）

    .once 事件只触发一次

   

　　示例代码：

    <div id="app">
        <div class="inner" @click='divHandler'>
            <input type="button" value="按钮" @click='btnHandler'>
        </div>
    </div>
    <script>
      var vm = new Vue({
          el: '#app',
          data: {
              msg: '123'
          },
          methods: {
              divHandler() {
                  console.log('触发div点击事件');
              },
              btnHandler() {
                console.log('触发按钮的点击事件');
              }
          }
      })
    </script>

　默认是有冒泡机制的：

.stop 阻止冒泡：

    <div id="app">
        <div class="inner" @click='divHandler'>
            <input type="button" value="按钮" @click.stop='btnHandler'>
        </div>
    </div>

　　

 

.prevent 阻止默认事件

    <div id="app">    
        <a href="http://www.baidu.com" @click='linkClick'>百度一下</a>
    </div>
    <script>
      var vm = new Vue({
          el: '#app',
          methods: {
              linkClick() {
                  console.log('触发了连接的点击事件');
              }
          }
      })
    </script>

 页面默认跳转了：

 

.prevent 阻止连接跳转行为，也可以阻止submit跳转行为。

<a href="http://www.baidu.com" @click.prevent='linkClick'>百度一下</a>

　　

 

 

 .capture 捕获机制

<!-- .capture 捕获机制 -->
<div class="inner" @click.capture='divHandler'>
    <input type="button" value="按钮" @click='btnHandler'>
</div> 

 

.self  只在元素本身触发

  <!-- .self 只在元素本身触发，不会被动(冒泡、捕获)触发 -->
  <div class="inner" @click.self='divHandler'>
     <input type="button" value="按钮" @click='btnHandler'>
  </div> 

点击按钮不会冒泡触发div的点击事件

.once 只触发一次点击事件, 事件修饰符可以引用多个：

<a href="http://www.baidu.com" @click.prevent.once='linkClick'>百度一下</a>

 8. v-model 数据双向绑定

    v-bind只能实现数据的单向绑定，从Model 到 View

    v-model 只能运用在表单元素中： input(radio、text、address、email)  select   checkbox  textarea