Vue构造选项

Vue实例

new Vue (options)就是构造一个Vue的实例

  • 把Vue的实例命名为vm是尤雨溪的习惯,我们可以沿用
  • vm对象封装了对视图的所有操作,包括数据读写、事件绑定、DOM更新
  • vm的构造函数是Vue,按照ES6的说法,vm所属的类是Vue
  • options是new Vue的参数,一般称之为选项 或者构造选项

本文将研究第一个问号 即构造选项options

options里面有什么

Vue2文档

截屏2022-08-20 09.34.47.png
第一类属性:数据

data 数据
props 属性
computed 计算属性 //被计算出来的
methods 方法,用来定义方法的
watch 观察 //当data变化时做某些事情就用watch
propsData //很少用,单元测试会用

第二类属性:DOM

el 挂载点 //你要用你的模版替换页面上的哪一块,你的挂载点
template //你的HTML内容。着重讲语法v-if、v-for
render 渲染 //⚠️注意template和render只能二选一!
//template是给完整版用的,render是给非完整版用的。一起用必然有一个会失效!

生命周期钩子

生命周期:在vue的创建,挂载,使用,销毁过程中,会有许多事件,这些事件就被统称为生命周期函数,也叫作生命周期钩子。

beforeCreate 创建之前
created 创建之后
beforeMount
mounted 挂载之后
beforeUpdate
updated 更新之后
activated
deactivated
beforeDestroy
destroyed 失败之后
errorCaptured

lifecycle.png
第四类属性:资源

directives 指令
filters 过滤器 //尽量不去用,用methods代替
components 组件
//如果要在一个文件引用另一个Vue的文件就用组建。Demo.vue就叫组件,英文名叫components。

第五类属性:组合

parent
mixins 混入
extends 扩展
provide 提供
inject 注入

入门属性

el —挂载点 与$mount有替代关系
new Vue({
    el: '#app',//挂载在app这个元素上
    render: h => h(Demo)
})

等价于

const vm = new Vue({
    render: h => h(Demo)
})
vm.$mount('#app')
data —外部数据 支持对象和函数 优先使用函数

假设如果有两个组件共用内部数据data,当其中一个改变时另一个也会变,因为它们引用的是同一个data。函数会阻止两个组件共用data的问题。

methods — 事件处理函数或者普通函数

事件处理函数: 写到一个@click或keypress或者任何事件作为它的处理函数

//HTML里有个button
<button @click="add">+1</button><!--写在页面里的视图-->
------------
methods: {
   add() {
       this.n += 1
   }
}

methods代替 filter

const vm = new Vue({
    data() {
        return {
            array: [1, 2, 3, 4, 5, 6, 7, 8]
        }
    },
    template: `
      <div>
      {{ filter(array) }}<!--求数组的偶数-->
      </div>
    `,
    methods: {
        filter(array) {
            return array.filter(i => i % 2 === 0)
        }
    }
})

或者:

const vm = new Vue({
    data() {
        return {
            array: [1, 2, 3, 4, 5, 6, 7, 8]
        }
    },
    template: `
      <div>
      {{ filter() }}<!--求数组的偶数-->
      </div>
    `,
    methods: {
        filter() {
            return this.array.filter(i => i % 2 === 0)
        }
    }
})
components —组件

方法一:

import Demo from './Demo.vue'
//引入组件

const vm = new Vue({
    components:{
        Origami : Demo // 取一个名字 后面是组件
    },

    template: `
      <div>
      <Origami/> //在模版中加入这个组件
      </div>
    `,
}

方法二:

Vue.component('Demo2', {
    template:`
    <div>demo2</div>   
    `
})
const vm = new Vue({
    template: `
      <div>
      <Demo2/> //在模版中加入这个组件
      </div>
    `,
}
四个钩子

1.created 实例出现在内存中
2.mounted 实例出现在页面中
3.updated 实例更新了
4.destroyed 实例消亡了

const vm = new Vue({
  data() {
    return {
      n: 0
    }
  },
    template:`
<div class="red">
  {{ n }}
  <button @click="add">+1</button><!--写在页面里的视图-->
</div>
    `
  created() {
    console.log('出现在内存中,没有出现在页面中')
  },
  mounted() {
    console.log('我已出现在页面中')
  },
  updated() {
    console.log('更新了')
    console.log(this.n)
  },

  methods: {
    add() {
      this.n += 1
    },
  },
}
})

destroyed需要格外注意:

要在外部引入一个组件:

import Demo2 from './Demo2.vue'

new Vue({
    data: {
        visible: true
    },
    components: {Demo2},
    template: `
      <div>
      <button @click="toggle">toggle</button>
      <hr>
      <Demo2 v-if="visible===true"/>
      </div>
    `,
    methods: {
        toggle() {
            this.visible = !this.visible
        }
    },
    // render: h => h(Demo2)
}).$mount('#app')

写出实例消失在页面的办法

在被引入的组件中补充destroyed

  destroyed() {
console.log('从页面中消失了')
  },
props --外部属性
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • 构造选项 V2 options文档[https://cn.vuejs.org/v2/api/#%E9%80%89%...
    珍惜时间小李阅读 275评论 0 0
  • vue实例jq选择元素,得到一个jq实例就是对象,封装了jq的操作 这就是构造vue的实例,实例会根据选项得出一个...
    饥人谷_小霾阅读 484评论 0 0
  • vue 构造选项 const vm = new Vue(options) //构造一个vue的实例,根据你所给的...
    siyuetian阅读 275评论 0 0
  • 什么是vue实例 ①const vm = new Vue(options)②new Vue(options)以上两...
    卢卢2020阅读 266评论 0 0
  • options五类属性 数据:data数据、props属性、propsData(propsValue)、compu...
    Shigure_Rain阅读 243评论 0 0