vue 对象

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

vue 对象

vue 对象是管理 vue 的基本单元，开发者可以在 JS 代码中创建 vue 对象。

在 vue 对象中，必须通过 el 指定 vue 对象作用域。

<script>
    var app = new Vue({
      el: '#app',
      ...
    });
</script>Copy to clipboardErrorCopied

数据显示

在 vue 对象中，通过 data 存储 vue 对象中的数据。

<!-- 数据显示 -->
<p v-text="message"></p>              <!-- v-text -->
<p>Word is {{ message }}</p>          <!-- 插值表达式：可以对内容进行扩展 --> 
<p v-html="message"></p>              <!-- v-html: 可以直接插入 html 元素 -->  

<!-- vue 对象 -->
<script>
    var app = new Vue({
      el: '#app',
      // 数据
      data: {
        message: 'Hello Vue',         // 数据
        data: []                      // 数组数据
      },
    });
    app.message="GoodBye Vue.";       // vue 对象数据可以被 JS 代码更新
</script>Copy to clipboardErrorCopied

方法调用

• 在 vue 对象中，通过 methods 定义 vue 对象中的方法。
• 在 vue 对象中，通过 computed 定义计算属性，重复调用时会基于缓存直接返回之前的计算结果，提高效率。

<!-- 方法调用 -->
<button @click="quit"></button>       
<button @click="showLog('Hello')"></button>        

<!-- vue 对象 -->
<script>
    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      // 方法
      methods: {
        quit () {
          this.router.go(-1)
        },
        showLog (message) {
          this.message = message
          console.log(message)
        }
      },
      // 计算属性
      computed: {
      calc (data) {
        return this.num + data
      }
    });
</script>Copy to clipboardErrorCopied

• 在 vue 对象中，通过 created 定义方法，会在创建 vue 对象时自动调用。在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
• 在 vue 对象中，通过 mounted 定义方法，会在创建 vue 对象时自动调用。在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

<!-- 计算结果 -->    
<p>Word is {{ calc(50) }}</p>     

<!-- vue 对象 -->
<script>
  var app = new Vue({
    el: '#app',
    data: {
      num: ''
    },
    // 创建方法
    created () {
      this.num = 100
    },
    // 计算属性

  });
</script>Copy to clipboardErrorCopied

数据监听

在 vue 对象中，通过监听器 watch 可以在数据发生变化时触发指定的事件。

<input type="text" v-model="name"></p>

<!-- vue 对象 -->
<script>
  var app = new Vue({
    el: '#app',
    data: {
      name: 'MrJoker',
      num: {
        a: 1,
        b: 2,
        c: 3
      }
    },
    // 监听器
    watch: {
      // 监听一
      name (newName, oldName) {
        console.log(oldName + '>>' + newName)
      },
      // 监听二
      num: {
        handler(newNum, oldNum) {
          console.log('num changed');
        },
        immediate: true,                      // 创建数据时也会立即执行
        deep: true                            // 深度监听下属所有数据
      },
      // 监听三
      'num.a': {      
        handler(newName, oldName) {
          console.log('obj.a changed');
        }
      }
    } 
  })
</script>Copy to clipboardErrorCopied

数据过滤

在 vue 对象中，通过过滤器 filter 可以对要显示的数据进行修饰。

<!-- 使用过滤器 -->
<div>{{message | upper}}</div>                            <!-- 方式一 -->
<div v-bind:id="id | upper"></div>                        <!-- 方式二 -->
<div v-bind:id="id | upper2(2,'hello')"></div>            <!-- 使用过滤器并传递参数 -->

<!-- vue 对象 -->
<script>
  var app = new Vue({
    el: '#app',
    data: {
      name:'Vue',
      message: 'Hello Vue',
      data: []
    },
    // 过滤器
    filter:{
      upper: function(val){
        return val.charAt(0).toUpperCase() + val.slice(1)
      }
    }
  });
</script>

<!-- 全局过滤器 -->
<script>
  Vue.filter('upper2', function(val,arg1,arg2){
    console.log(arg2);
    return val.charAt(arg1).toUpperCase() + val.slice(arg1 + 1);
  })
</script>