Vue的构造选项-入门属性

一、options里有什么

options的五类属性

1. 数据：data,props,propsData,computed,methods,,watch

DOM：el,template,rander,randerError

2. 生命周期钩子：beforeCreate,created,

                       beforeMount,mounted,

                       beforeUpdate,updeted

                       activated,deactivated,

                       beforeDestroy,destroyed

                       errorCaptured

3. 资源：diractivated,filters,components

4. 组合: parent,mixins,extends.provide,inject

5. 其他

入门属性

el挂载点

与$mount有替换关系

new Vue({  el:'#app1',  render: h=>h(App)})

也可以写为

new Vue({  render: h => h(App)}).$mount("#app1");

data -内部数据

支持对象和函数，优先用函数,防止数据被被两个或以上组件引用时互相修改产生影响，写为函数的好处就是，在引用时会先调用函数再得到函数的data对象，每一次调用都得到全新的data对象，不会出现共用的情况。

对象写法

new Vue({  data :{    n:0  }}).$mount("#app");

函数写法

new Vue({  data :function(){    n:0  }}).$mount("#app");

缩写new Vue({ data(){   n:0 
 }
}).$mount("#app")

methods -方法

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

new Vue({  data (){    return{     n:0,     array:[1,2,3,4,5,6,7,8,9]  }     },  template:`  <div class ='red'>{{n}}  <button @click='add'>+1</button>  </hr>  {{ filter() }}  </div>  `,  methods:{    add(){      this.n += 1;    },    filter(){    return this.array.filter(i=>i%2===0)    }  }}).$mount("#app");

components -组件

使用Vue组件注意大小写‘

下面为引入一个为demo的组件（全局声明）和内部声明，组件有多种写法，组件里的data一定要用函数

Vue.component(id:'demo',{template:`
    <div>demo22222</div>
`})

import demo from './demo.vue'
new Vue({
componens:{
    demo:demo;
}
})

四个钩子

1. created -实例出现在内存中

2. mounted -实例出现在页面中

3. updated - 实例更新了

4. destroyed -实例消亡了  

props -外部属性

在demo中

<template>  <div id="app">   {{message}}  </div></template><script>export default { props:['message']};</script>

main.js中

import Vue from "vue";import demo from "./App.vue";Vue.config.productionTip = false;new Vue({  components:{demo},  data:{     n:0  },  template:`  <div>   <demo :message ="n"/>//加:表示传的是data的值
  <demo :fn ="add"/>//加:表示传的是一个add函数,可以给被传的组件调用
  </div>  `,
methods:{
add(){
this.n +=1;
}
}}).$mount("#app");