options 的属性

数据	DOM	生命周期钩子	资源	组合	其他
data	el	beforeCreate	directives	parent	name
proops	template	created	filters	mixins	delimiter
propsData	render	beforeMount	components	extends	functional
computed	renderError	mounted		provide	model
methods		beforeUpdate		inject	inheritAttrs
watch		updated			comments
		beforeDestroy
		desttroyed
		activated
		deactivated
		errorCaptured

数据

data

data 可接受对象或者函数。最好只用函数。

如果 data 在 .vue 文件中或通过 import 方式引入vue 时，如：import Demo from './demo.vue'。只接受函数，避免 data 被共用。

import Demo from './demo.vue'
new Vue({
    data: function(){
        return {
            n: 0
        }
    },
    render: h=>h(X, [h(Demo), h(Demo)]) 
})

props

用于接收来自父组件的数据

语法：props: ['message']

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

传送方式：<组件 :key="value"/>

new Vue({
  template: `
  <div>
    <Demo :message="你好,props"/>
  </div>
  `
})

在传送时注意有三种方式，

<Demo message="你好,props"/>：" "内只能传字符串
<Demo :message="你好,props"/>：加上 : 那么可以传值,方法等
<Demo :message=" '你好,props' "/>：有:且想传字符串就在" "中加 ' ' （单引号）。也就是和不加冒号相同

举例：（代码文件：vue.props）

文件 demo.vue 中

<template>
  <div class="red">
    这里是demo内部
    {{ this.message }}
    <button @click="fn">call fn</button>
  </div>
</template>

//会从外部接受一个message，会自动绑定到this上
// vue允许省略这个 this.

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

<style scoped>
.red{
  color:red;
  border :1px solid red;
}
</style>

文件 main.js 中

const Vue = window.Vue
Vue.config.productionTip = false

import Demo from './demo.vue'

new Vue({
  components: { Demo },
  template: `
  <div>
    {{n}}
    <Demo :message="n" :fn="add"/>
  </div>
  `,
  data() {
    return {
      n: 0
    }
  },
  methods: {
    add() {
      this.n += 1
    }
  }
}).$mount('#app')

结果展示：点击组件demo的按钮, 外部的n+1, 更新的n用 :message再传进去内部组件，于是内部组件的n也同步更新

当我们点击按钮 call fn 后，数字会发生变化。

DOM

el

挂载点
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
只在用 new 创建实例时生效。
可以用vm.$mount()代替

new Vue({
  el:"#app"，
  add(){}
})

或者

new Vue({
  add(){}
}).$mount("#app")

template

一个字符串模板
作为 Vue 实例的标识使用。

new Vue({
  template: `
  <div>
    {{n}}
  </div>
  `,
})

render

通常用来代替 template 使用

例如当使用Vue非完整版时，视图无法写在HTML和 template 中，可以用 render （函数）来写

// 需要编译器(完整版中) 
new Vue({  
template: '<div>{{ hi }}</div>'  
})

// 不需要编译器（非完整版中）
new Vue({  
render (h) {  
return h('div', this.hi)  
}  
})

生命周期中的四个钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

created：实例出现在内存中。在实例创建完成后被立即同步调用。
mounted：实例出现在页面中。实例被挂载后调用
updated：实例更新了。在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
destroyed：实例消亡了。实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

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

示例：体现四个钩子的作用

（文件: vue-gouzi）

//demo.vue 文件中

<template>
  <div>
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default{
  data() {
    return {
      n: 0
    }
  },
 
  methods: {
    add() {
      this.n += 1
    }
  },
  created() {
    console.log('出现在内存中')
  },
  mounted() {
    console.log('出现在页面里')
  },
  updated() {
    console.log('更新了')
  },
  destroyed() {
    console.log('已经消亡了')
    console.log(this.n)
  }
}
</script>

<style></style>

//在 main.js 文件中

const Vue = window.Vue
Vue.config.productionTip = false

import Demo from './demo.vue'

new Vue({
  components: { Demo },
  data() {
    return {
      visible: true
    }
  },
  template: `
    <div>
      <button @click="toggle">toggle</button>
      <hr>
      <Demo v-if="visible===true"/>
    </div>
  `,
  methods: {
    toggle() {
      this.visible = !this.visible
    }
  }
}).$mount('#app')

使用四个钩子，运行后在控制台看到显示出现在内存中和出现在页面里

两个都在，如何确定出现在内存中确实只在内存没在页面呢？

可以用 debugger。打debugger在created（）{...}中发现页面什么都没有，打在mounted(){...}中页面正常显示。说明created阶段确实没被挂载到页面。

点击+1按钮会显示更新了

代码中做了一个简单的toggle组件，点击按钮, div组件就消失，再点击就出现。

在操作中发现，当点击toggle使其消失再出现后，产生的是全新的div组件,不是原来那个。

资源

filters

过滤器

// 选出数组中的偶数

new Vue({
  data () {
    return {
      array: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  },
  template: `
      {{filter()}}
  `,
    filter() {
      return this.array.filter(i => i % 2 === 0)
    }
  }
})

components

组件

有三种方式创建组件：

优先选择第一种，符合模块化思想

方式一：（import引入 + new Vue({component ， template}) ）

import Demo from './demo.vue'

new Vue({
  components: {
    CK: Demo
  },
  template: `
      <CK/>
  `,
})

方式二：（全局声明， Vue.component( template) + new Vue({ template }) ）

Vue.component('demo2', {
  template: `
  <div>demo222</div>
  `
})

new Vue({
  template: `
      <demo2/>
  `,
})

//Vue.component() 中第二个参数内容可以和 new Vue({...})的内容是一样的

方式三：（方式一二结合：new Vue({component{template} ， template}) ）

new Vue({
  components: {
    CK2: {
      template: `
        <div>demo3</div>
      `
    }
  },
  template: `
      <CK2/>
  `,
})

Vue2 - options（选项）