vue 对象

举报
武师叔 发表于 2022/08/30 08:42:44 2022/08/30
【摘要】 vue 对象vue 对象是管理 vue 的基本单元,开发者可以在 JS 代码中创建 vue 对象。在 vue 对象中,必须通过 el 指定 vue 对象作用域。<script> var app = new Vue({ el: '#app', ... });</script>Copy to clipboardErrorCopied 数据显示在 vue 对象中,...

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>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。