Vue实例

OQQ
1,058 阅读5分钟

如何构造一个vue的实例：

const vm = new Vue(options)
//一般Vue实例都叫vm
//有时候 const vm = 可以不写
//options是Vue的参数，一般称为 选项 或 构造选项（←构造函数后面的选项）

vm的构造函数是Vue（vm所属的类是Vue）。

vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新（不包括Ajax！）。

回忆一下原型：

  1. 对象 .__ proto __ === 其构造函数.prototype

  2. 所有函数都是由Function构造的

所以可以得出：

  1. vm.__ proto __ === Vue.prototype
  2. Vue.__ proto __ === Function.prototype

options里面有什么

在文档里搜索“选项”可以看见五个大类

可以看见五个大类，分别是： ———————————————————————————————————————

数据：data（内部数据）、props（属性）、propsData（属性值）、computed（被计算出来的）、methods（方法）、watch（观察）

DOM：el（挂载点）、template（模板）、render（渲染）、renderError

生命周期钩子：beforeCreate（创建前）、created（创建）、beforeMount（挂载前）、mounted（挂载）、beforeUpdate（更新前）、Updated（更新）、activated（激活）、deactivated、beforeDestory、destoryed、errorCaptured（错误捕获）

资源：directives（指令）、filters（过滤）、components（组件）

组合：parent、mixins（混入）、extends（扩展）、provide、inject（注入）

———————————————————————————————————————

插播一个小知识 函数和方法的区别:

  1. 函数是一个数学概念，方法是面向对象的概念
  2. 两者指的是同一个东西：function（参数）｛return 一个值｝，这个东西在数学里叫函数在面向对象里叫方法
  3. 在面向对象中，方法一定是依附一个对象的，一般是 对象.方法，比如obj.sayHi()，这个既是一个函数也是一个方法

入门属性：

1.el-挂载点

el表示这个属性或实例的挂载点。

在el里写想要挂载到的节点，然后这么这个节点的内容将被替换。

index.html

<div id="app">测试</div>

main.js

//vue.runtime.min.js
import Demo from './Demo.vue'
new Vue({
    el:'#app',
    render:h=>h(Demo)
})
//或者可以不用el，用.$mount()。两者效果一样。写成：
new Vue({
    render:h=>h(Demo)
}).$mount('#app')

以上例子是将id为app的div的内容“测试”替换成组件Demo的内容

2.data-内部数据

data可以写成对象的形式，也可以写成函数的形式，推荐每次都使用函数形式的data写法！

因为如果把一个data同时传给多个Vue组件，那么这些组件就共用这个data，如果其中一个组件修改了data，那么另外一个组件引用的data也会同时改变。 写成函数形式可以防止这个问题。写成函数形式，则在每次调用data时，会先调用一下这个组件的函数形式的data，从而得到组件真正的data，第二次调用同理，所以每次执行data函数都可以得到一个全新的对象，这样就可以避免多个组件共用data的问题。

index.html

<div id="app">测试</div>

main.js

//vue.min.js
//**函数形式**的data写法：
new Vue({
    data() {
        return{
            n: 0
        }
    },
    template: `
        <div class = "red">
            {{n}}
            <button @click="add"> +1 </button>
        </div>
    `,
    methods: {
        add(){
            this.n += 1
        }
    }
}).$mount('#app')

//对象形式的data写法：
new Vue({
    data:{
        n: 0
    },
    ……
}).$mount('#app')

这样就可以实现点一下“+1”按钮则显示的数字加一的功能

3. methods-方法

methods有两种用法：

  1. 第一种是写在一个@click或者@keypress或者任何事件的后面作为事件处理函数（见上面+1的例子）
  2. 第二种是用作普通函数，比如可以用methods代替filters。
  3. methods在每次渲染的时候都会执行一次

main.js

//vue.min.js
new Vue({
    data() {
        return{
            n: 0,
            array:[1,2,3,4,5,6,7,8,9,10]
        }
    },
    template: `
        <div class="red">
            {{n}}
            <button @click="add"> +1 </button>
            <hr>
            {{filter(array)}}
            <!--第二种写法：{{filter()}}-->
        </div>
    `,
    methods: {
        add(){
            this.n += 1
        }
        filter(array){
            console.log("执行一次filter函数")
            return array.filter(i=>i%2===0)
        }
        //第二种写法：
        //filter(){
        //    console.log("执行一次filter函数")
        //    return this.array.filter(i=>i%2===0)
        //}
    }
}).$mount('#app')

methods有个特性就是每次渲染都会执行一次，所以在每次点+1按钮时methods都会重新执行一次，所以多次按+1就会多次打印出"执行一次filter函数"

4. components-组件

我们之前涉及的所有new出来的东西，其实都是vm，是Vue的实例或者Vue的对象。 如果我们直接new一个Vue，那么这个就叫实例，如果是使用Vue.component或者使用了其他vue文件，那么我们就把其他的vue文件叫做组件。 components有三种写法，优先使用第二种（直接引入其他.vue）！

//components的第一种写法,不引入其他.vue文件直接写
Vue.component("Demo",{
    template:`
        <div>第1个demo</div>
    `
})
//Vue.componen函数是全局声明的，第二个参数接收的东西和Vue实例一模一样
const vm = new Vue({
    data(){...}
    template:`  
        ...
        <Demo/>
        ...
    `,
    methods:{...}
})

//components的第二种写法,引入其他.vue文件
import Demo2 from "./demo2.vue"

const vm = new Vue({
    components:{
        Demo2:Demo2 
        //意思是给Demo2组件取个名字，叫Demo2
        //前后名字一样时可以缩写成components:{Demo2}，一般都写成这种形式
    }
    data(){...}
    template:`  
        ...
        <Demo2/>
        ...
    `,
    methods:{...}
})

//components的第三种写法,结合前两种方法
const vm = new Vue({
    components:{
        Demo3:{
        template:`
            <div>第3个demo</div>
        `
        }
    },
    data(){...}
    template:`  
        ...
        <Demo3/>
        ...
    `,
    methods:{...}
})

几点关于components的建议：

  1. 组件名用大写开头，如Demo、Button等
  2. 文件名最好全部小写（win10文件名分不清大小写）

5. 四个钩子

  • created- 实例出现在内存中，没有出现在页面中
created(){}
  • mounted- 实例出现在页面中
mounted(){}
  • updated- 实例更新了
updated(){}
  • destoryed- 实例消亡了
destoryed(){}

6. props-外部属性

avatar
文章
阅读
粉丝