美文网首页
Vue构造选项

Vue构造选项

作者: 卢卢2020 | 来源:发表于2021-02-26 00:06 被阅读0次

什么是vue实例


①const vm = new Vue(options)  

②new Vue(options)

以上两种方法就是vue实例,第一种方法根据你得到的options实例得出一个对象,这个对象我们把它命名为vm

options里面有什么


红色:好学 必学; 黄色:高级属性  ;  紫色:比较特殊,重点讲  蓝色:可学可不学  灰色:不常用 自己看文档

Vue入门属性


1.el——挂载点 (可以用$mount代替)

两种方法++++上代码:

①:new Vue({
        el:"#app", //这个名字看index文件里面的div的id名

        render(h){ 

             return h(demo) //demo为需要引入的文件名
        }
})

②:new Vue({
        render:h=>h(demo) 
}).$mount("#frank")

2.data——内部数据(可以是一个对象  也可以是一个函数)

    支持函数和对象,优先用函数    

①为变量是写法:

data:{

    n:0

}

②为函数时写法 

data(){  //data() 为data:function(){}缩写

    return{
        n:0
    }
}

PS:组件里面的data必须是函数 (为了避免两个data公用一个函数的问题 如果data写成函数每次调用data得到一个全新的data)

3.methods ——方法

      事件处理函数或者普通含数 

如下图 methods有一个bug 每次渲染都会执行——就算执行是毫无意义的

4.components

使用Vue组件,注意大小写

也就是说 你是入口那么你就是实例  你是被人家引用的 那么你就叫组件

5.四个钩子

created ——实例出现在内存中

mounted ——实例出现在页面中

updated ——实例更新了

destoryed ——实例消亡了

消失比较复杂 用到了点击出现的例子

5.props ——外部属性

相关文章

  • render函数的一些小知识

    Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指...

  • vue:构造选项

    vue实例jq选择元素,得到一个jq实例就是对象,封装了jq的操作 这就是构造vue的实例,实例会根据选项得出一个...

  • Vue 构造选项

    Vue 构造选项 Options 数据: data、props、methods、computed、watch DO...

  • Vue构造选项

    什么是vue实例 ①const vm = new Vue(options)②new Vue(options)以上两...

  • Vue构造选项

    Vue实例 new Vue (options)就是构造一个Vue的实例 把Vue的实例命名为vm是尤雨溪的习惯,我...

  • Vue2学习笔记:vue实例

    一、实例化vue 二、添加实例化选项 三、扩展vue构造器 四、属性与方法 五、vue实例选项与原生js的关系 六...

  • Vue.extend扩展实例构造器

    Vue.extend Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器...

  • 说说 Vue.js 实例及数据绑定能力

    1 创建实例 通过 Vue() 构造函数就可以创建一个 Vue 的根实例: 1.1 el 选项 el 选项用于绑定...

  • Vue 概览

    构造器 每个 Vue 程序的开始都是由构造函数 Vue 创建实例: 选项包含数据、模板、挂载元素、方法、生命周期钩...

  • Vue.extend构造器的延伸(10)

    一、Vue.extendVue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造...

网友评论

      本文标题:Vue构造选项

      本文链接:https://www.haomeiwen.com/subject/vufufltx.html