Vue2-构造选项options

买米当卡思思酱

已于 2024-03-22 03:09:11 修改

阅读量537

点赞数 3

文章标签： vue.js javascript 前端

于 2024-03-20 03:27:11 首次发布

本文链接：https://blog.csdn.net/yulingpan123/article/details/136841022

版权

本文详细介绍了Vue.js中实例的创建、构造函数的作用、组件的定义与挂载、数据绑定（data和methods）、组件间的通信（props）以及生命周期钩子的使用。重点讲解了如何避免数据共享问题和组件的命名规范。

摘要由CSDN通过智能技术生成

1.Vue实例与Vue构造函数内存图

注：#101 vm实例对象，#202 Vue构造函数对象，#419 Vue.prototype原型对象

2.构造选项options

new Vue(选项/构造选项options)文档： API — Vue.js

#el组件实例挂载点
new Vue({
   el:"#frank"
})

new Vue({
   ...
}).$mount("#frank")

#data内部数据,对象或函数
new Vue({
   data:{
     n:0
   }
})

new Vue({
   data:function(){
     return {
        n:0
     }
   }
})

#组件data定义只用function：
import Demo from "./Demo.vue";
const object = Demo;
/* .vue组件 或 components，实际上是一个对象*/

#为了组件的复用，使用每份组件都有一份data的拷贝，防止不同组件修改数据时被相互覆盖
#只调用一次data不会出错，多次调用data会造成数据共用

#methods方法
new Vue({
   methods: {
    /* 事件处理函数 <button @click="add">+1</button> */
    add() {
      this.n += 1;
    },

    /* 普通函数方法 {{ filterArray() }} */
    filterArray() {
      return this.array.filter((i) => i % 2 == 0);
    },
  }
})

#methods:每次渲染都会执行
#当只调用add()改变n，但是不改变过滤后的array时，filterArray()也会被重新调用
#methods-bug执行的结果数据不改变也会重新执行

#components组件
/* 引入.vue文件作为组件，在components中引入组件名 */
import Demo from "./Demo.vue";
new Vue({
 components: {
   /* 标签名：组件名 (一般使用相同的组件名，相同时可以简写为一个 Demo: Demo <=> Demo) */
   Frank: Demo
  },
 template: `
   <div>
      <Frank/>
   </div>
 `,
})

/* JS创建组件，第二个参数与new Vue()参数相同 */
Vue.component("Demo", {
  template: `
    <div>Hi,I'm Demo!</div>
  `,
});
new Vue({
 template: `
   <div>
      <Demo/>
   </div>
 `,
})

/* 在components中定义组件 */
new Vue({
  components: {
    Frank: {
      data() {
        return {
          n: 0,
        };
      },
      template: `
      <div>Frank's n: {{n}}</div>
      `,
    },
  },
  template: `
    <div>
      <Frank/>
    </div>
  `
})

#组件与实例区别：
#const vm=new Vue({...})      /* Vue实例/Vue对象 */
#new Vue({components:...})    /* 组件是Vue实例中的实例，被引入调用 */

命名规范：

文件名最好使用小写（有些操作系统不能区分大小写），组件名Xxxx（全小写可能与html标签名冲突）

阮一峰文件名小写：为什么文件名要小写？ - 阮一峰的网络日志

#生命周期钩子
new Vue({
 data: {
    n: 0
 },
 template: `
    <div>
      {{n}}
      <button @click="add">+1</button>
    </div>
 `,
 created() {
    console.log("实例出现在内存中");
 },
 mounted() {
    /* debugger 通过断点证明实例状态*/
    console.log("实例出现在页面中");
 },
 updated() {
    console.log("实例更新了");
    console.log(this.n);
 },
 destroyed() {
    console.log("实例从页面和内存中消亡了");
 },
}).$mount("#frank");

#props外部数据

#传入String   <Demo props-key="value"/>,value=string
/* main.js外部文件 */
import Demo from "./Demo.vue";
new Vue({
  components: { Demo },
  template: `
     <div>
        /* key: value 传入props(传string) */
        <Demo message="hi,我是外部数据message"/>
     </div>
  `,
})

/* Demo.vue */
<template>
  <div>
    {{ this.message }}
  </div>
</template>

<script>
export default {
  props:["message"]
};
</script>


##传入JS代码 <Demo :props-key="value"/>,value=Js代码
/* main.js外部文件 */
import Demo from "./Demo.vue";
new Vue({
  components: { Demo },
  template: `
     <div>
       /* :key: value 传入props(传变量和方法) */
       /* 传入add方法,回传n变量值 */
      {{ "main.js: "+ n }}
      <Demo :message="n" :fn="add"/>
    </div>
  `,
})

/* Demo.vue */
<template>
  <div>
    /* this.message <=> message */
    {{ message }}
    <button @click="fn">call fn</button>
  </div>
</template>

<script>
export default {
  props:["message","fn"]
};
</script>