button常用属性_Vue构造选项入门属性讲解

一、入门属性讲解

1、el ：挂载点 可以用$smount代替

new Vue({

el:"#app"
})

//等同于
new Vue({
    data:{}
}).$mount(elementOrSelector: '#app')

2、data: 内部函数 支持对象和函数，优先用函数，避免数据污染。（为什么要使用函数？为了确保组件每次调用的data都是一个新的data，而不是共用一个data）

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

3、methods: 方法 事件处理函数或者普通函数，每次更新都会触发重新渲染，影响性能，多用watch和computed来代替其功能

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

4、components: Vue组件，注意大小写，一般引入用小写，命名首字母大写，有三种引入方式，最好使用单文件引入方式。

第一种

推荐使用第一种，直接创建一个Vue组件（xxx.vue 文件）然后引入组件，通过componentes命名可在template里直接引用，建议componentes命名是保持一致（与引用时），既Dome：Demo，这样可以简写成一个Demo，方便使用。

第二种

//第三种
//这个叫组件
Vue.compotent(id:'Demo2' ,definition:{
 template: `
      <div>demo222</div>
`
})  
//definition里的选项和new Vue里的选项一样，其实就是把第一种引入的文件抽离出来


//这个叫实例
new Vue({
    el: "#app",
    template:`
    <div>
      {{n}}
      <Demo2/>
      <hr/>
    </div>
    `
})

5、hookes: 四个钩子

created //实例出现在内存中
mounted //实例出现在页面中
updated //实例更新
destroyed //实例从页面和内存中消亡了

代码演示

onst Vue = window.Vue

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

created( ){
console. log( '出现在内存中，没有出现在页面中)
},
mounted( ){
console. log( '出现在页面中' ) 
}，
updated( ){
console.log( '更新了' )
console. log( this.n)
}，
destroyed() {
console. log( '已经消亡了')
}，

template;'
 <div class="red">
   {{n}}
   <button @click="add">+1</button>
 <div/>
'
methods:{
  add(){
     this.n+=1
   }
}
}).$mount('#app')

6、props: 外部数据，或者称为属性（点击链接查看详情）

代码演示

被引用组件

< template>
    <div class=" red">
       {{message}}
     </ div>
</ template>

<script>
    export default {
    props: [ " message' ] //从外部接受一个message会自动绑定到this上
}
</ script>

引用组件（传递字符串）

const vue = window. Vue

import Demo from ' . /Demo. vue'

new Vue({
components: {Demo},//引用和命名一致方便使用

template:'
<div>
<Demo message="我是引用组件，这个是我给被引用组件传来的数据" />  
</ div>
',
} ). $mount( ' #frank')

引用组件（传递变量）

new Vue({
   components: {Demo},
    data:{
   n: 0
},
template:'
<div>
<Demo ：message="n"/>   //
'
若要变成数字0则加上冒号
<Demo ：message="0"/>

传递函数

import Demo from ' . /Demo. vue'

new Vue({
components: {Demo},
data: {
visible: true
},

template:'
<div>
{{n}}
<Demo :message="n" :fn="add"/>
</ div>
',

methods: {
add(）{this.n+=1},
toggle(){
this.visible = !this.visible
. } ). $mount( ' #frank')

=================================================================
< template>
    <div class=" red">
       {{message}}
    <button @click="fn" >call fn</button>
     </ div>
</ template>

<script>
    export default {
    props: [ " message"，"fn" ] //接受一个fn
}
</ script>

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

message="n"传入字符串

:message="n"传入data数据（或者说是变量）

:fn=" add"传入add函数

切记：加“：”多用于传入变量

谁引用组价谁负责传入外部变量，被应用组件负责接收。

message和fn（命名）是由被引用组件决定的不是固定的

下面可以不看下面可以不看下面可以不看下面可以不看

二、const vm=new Vue(options) options的五类属性

1、数据

data,
props,
propsData,
computed,
methods,
watch

2、Dom

el,
template,
render,
renderError

3、生命周期钩子

beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
activated,
deactivated,
beforeDestroy,
destroyed,
errorCaptured

4、资源

directives,
fileters,
components

5、组合

parent,
mixins,
extends,
provide,
inject

三、属性等级分类(对上面的分类，可不看)

1、初级属性-必学

el
data 
componentes
props
methonds
created 
mounted
updated
destroyed

2、高级属性-必学

computed
watch
activated
deactived
directives
mixins
extends
provide
inject 

3、通用属性：

propsData
render
renderError
beforeCreate
beforeMount
beforeUpdate
beforeDestroy

4、特殊属性：

template: 含有自定义方法
filters : 不推荐使用

5、不常用属性：

errorCaptured
parent
其他属性