VUE - options属性 - 《前端学习手记》

[TOC]

创建一个vue实例，所有的数据和操作都要写在这个实例里面，options就是这个实例的属性

const vm = new Vue(options)

el和mount 两种挂载点的用法

挂载点: 要替换容器上的哪一块，通常在html上用id标识

el的使用方法

直接写在参数里,oldCode就是id名

const vm = new Vue({
   el:'#oldCode', 
  })
复制代码

mount的使用方法

//可以使用链式方法
  const vm = new Vue({
   el:'#oldCode', 
  }).$mount('#oldCode')
  //也可以在实例名后面
  vm.$mount('#oldCode')
复制代码

data 数据的两种写法

data是内部数据，建议使用函数写法

对象

const vm = new Vue({
   el:'#oldCode', 
   data:{
        n:0
   },
  })
复制代码

另一种方式是函数（推荐使用）

函数写法需要将数据写在return返回值里面

const vm = new Vue({
     el:'#oldCode', 
     data(){
          return{
          n:0
          }
    },
  })
复制代码

methods方法

add是方法名

const vm = new Vue({
     el:'#oldCode', 
     data(){
          return{
          n:0
          }
    },
    methods:{
      add(){
        this.n+=1
      }
  }
  })

组件的三种写法

方法一：新建一个文件，再将其引入（推荐使用）

新写一个.vue文件，文件名建议全小写

文件的内容有三大部分
用来写视图的 <template></template>,
除了视图外的其他选项 <script>export default { }</script>,
写样式的 <style scoped> </style>

<template>
<!-- 写视图 -->
    <div class="red">
        demo
    </div>
</template>
<script>
// 除了视图外的其他选项
export default {
    data(){
        return {
            n:0
        }
    },
    methods:{
        add(){
            this.n+=1
        }
    }
};
</script>

<style scoped>
.red{
    color:red;
}
</style>

在main.js中引入

导入文件

import 名字 from '文件路径'

import Demo from './demo.vue'

  const vm = new Vue({
  //告诉程序我要使用的组件是谁，和它对应的值
    components:{
      Demo:Demo
    },
     el:'#oldCode', 
     data(){
          return{
          n:0
          }
    },
  })

方法二：直接在main.js中创建并引用

使用component,第一个参数是组件名，第二个是模板

//新建的组件
+ Vue.component('Demo',{
+   template:`
+   <div>demo方式二</div>
+   `
+ })
const vm = new Vue({
    el:"#oldCode"
  data:{
    n:0
  },
  template:`
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
      <Frank/>
      //引入组件
+      <Demo />
    </div>
  `,
  methods:{
    add(){
      this.n+=1
    },
})

方法三: 就是将上面两种方法结合起来使用

components:{
    Demo3:{
    data(){
        return {n:0}
        }
    }，
    template:`
       <div>demo3方式三   {{n}}</div>
    `
  },
复制代码

四个钩子，生命周期

使用debugger调试方法，验证这几个周期需要配合这组件一起使用

created-实例出现在内存中
mounted-实例出现在页面中
updated-实例更新了

destroyed-实例消亡了

created(){
console.log('出现在内存中，没有出现在页面中')
},
mounted() {
debugger
console.log('我已经出现在页面中')
},
updated(){
console.log('数据更新时会出现')
}，
destroyed(){
console.log('实例消失时就出现')
}

props组件传参

在组件中传参，需要先创建一个组件，这里创建一个文件

使用{{}}在模板里占位，在props里声明传入的参数 ```javascript ```

在实例中引入并传参，此时传入的只是一个字符串

//引入组件
components:{Demo},

data:{
 visible:true
 n:0
},
template:`
   <div>
   //传入参数，参数名要和组件里的参数名一致
+      <Demo message="你好222" />
   </div>
`,

3.要想将实例中的数据变量传如组件中需要在参数名前面加：,此时传入的才是变量值

<Demo :message="n" />

传入函数

函数需要先在实例中定义好，在组件标签里写入参数=”函数名”，这里也要使用:fn就是传入的参数，add则是函数名
```
<Demo :message="n" :fn="add" />
复制代码
```

在组件中定义和声明

<template>
<div class="red">
  {{message}}
  //函数的参数名
    <button @click="fn">+1</button>
</div>
</template>
<script>
export default {
//声明参数
props:['message','fn']
}
</script>