Vue实例步骤

Akiode

于 2018-07-24 22:40:41 发布

阅读量430

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42553164/article/details/81163869

版权

本文详细介绍了Vue.js中创建实例的过程，包括绑定DOM、定义数据属性、方法、计算属性和监听属性等核心概念。同时，讲解了如何使用V-for进行数组循环，并强调了在循环中正确使用参数的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一开始要创建Vue实例

//创建实例的大体结构
var vm = new Vue({
    el:" #app ",                //绑定的DOM，在哪里挂载
    
    data:{
               //定义要用到的属性
   },
    methods:{          //定义函数,可以通过 return 来返回函数值
        函数名: function(){
                            //函数内容        
               }
       },
    computed:{          //计算属性，用于计算的函数

     },
    watch:{            //监听属性，监听的数据一变化就会触发函数方法
        监听函数的名字:function(){
                        
                }
        },
    created:function( ){          //生命周期钩子，值是一个函数并不是对象,created钩子代表的是在Vue实例创建之后触发的函数
                         
     }
  })

计算属性可以直接调用名字来用，但methods要加上括号( )

V-for循环要注意的事项

v-for="(value,key,index) in object"         // object是你要循环的数组的名字，value是参数，要使用就要声明
{{ value }}
new Vue({
    el:' ',
    data:{
           object:{
             key:'value',
             key:'value'
                       }
            }
})