当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    Vue实例的对象参数options的几个常用选项详解

    栏目:代码类 时间:2019-11-08 12:06

    一. 新建一个Vue实例可以有下列两种方式:

    1.new一个实例

    var app= new Vue({
     el:'#todo-app', // 挂载元素
     data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式
      items:['item 1','item 2','item 3'],
      todo:''
     },
     methods:{ // 方法成员
      rm:function(i){
       this.items.splice(i,1)
      }
     }
    })
    // 之后再
    
    export default app // 默认输出,可在其他组件引用
    

    2. 直接

    export default {
     name: '',
     components: {},
     data: () {}, // data函数成员
     watch: {}, // watch监视成员
     computed: {}, // computed计算成员
     created: function () {},
     methods: {}, // methods对象成员
     actions: {}
    }

    二. Vue实例,我参数options。它是一个对象。可以选择如下选项:

    data函数成员

    methods对象成员

    模板template

    挂载元素el

    生命周期钩子

    props属性声明

    computed计算成员

    watch监视成员

    选项:watch监视

    watch监视是一个对象,键是需要观察的表达式,值可以是

    1.回调函数,

    2.值也可以是方法名,

    3.或者包含选项的对象。

    ps:表达式暂时可以理解为一个可以得到值的式子

    Ⅰ回调函数,来监视一个值的变化(监视data函数体的变量)

    如:

     data () {
      return {
       replaceList: []
      }
     },
     watch: {
      replaceList: function (val, oldVal) {
       console.log('replaceList changed')
      }
     }

    Ⅱ第2种形式:”值也可以是方法名“,可以把watch的函数移到methods内。

    则上面的形式可以改为:

     data () {
      return {
       replaceList: []
      }
     },
     watch: {
      replaceList: 'changed'
     },
     methods: {
      changed: function (val, oldVal) {
       console.log('replaceList changed')
      }
     }

    Ⅲ包含选项的对象

    如:上面两种就等同于

     data () {
      rerurn {
       replaceList: 1
      }
     },
     mounted: function () {
      this.$watch('replaceList',function(val, oldVal){
        console.log('replaceList changed')
      })
     },
     methods: {
     
     }

    选项:computed计算成员

    虽然在Mustache语法内可以使用表达式,即{{}}。比如为数字前加入¥符号,可以使用表达式:

    {{‘¥'+money}}

    可以,但不推荐。这种情形应尽量用计算成员:

    在vue-cli脚手架的.vue组件中

    实现RMB前加上美元符号

    <template>
     <input v-model="money"> // 响应式的
     <span>{{RMB}}</span> // {{}}中可以是变量,也可以是方法名
    </template>
     
    <script>
     data () {
      rerurn {}
     },
     computed: {
      RMB: function () {
       return '¥'+ this.money
      }
     }
    </script>

    引入了计算成员RMB来做长表达式的计算,而在HTML内保持清晰的字段引用即可。这样做依然可以享有响应式编程的好处:当money值改变时,引用RMB的标签值也会被自动更新。

    以上这篇Vue实例的对象参数options的几个常用选项详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持IIS7站长之家。

    下一篇:没有了