01、el

1. 是根实例的特有属性,代表根元素
2. 提供一个页面上的DOM对象作为Vue实例的挂载目标.可以是选择器或者或DOM元素实例

02、data

1. data对象中的属性是响应式的，直接向vm实例设置属性不是响应式的
2. data的响应性可以被Object.freeze()打断
3. data属性的使用：
   Vue实例的函数中：使用this.prop调用(methods,computed的this自动绑定为vue实例)
   标签内：通过表达式{ {porp}}访问
   标签上：通过绑定调用:[prop]=“prop”

03、methods

1. 一般用于设置事件回调函数
2. 在表达式中可以通过调用方法,可以达到和调用computed中属性一样的显示效果
3. 与computed不同的是,methods不存在缓存,每次调用都编译执行函数代码

04、computed

1. 计算属性在引用时一定不要加()去调用，直接把它当作普通属性去使用就行
2. 当data中的数据发生变化时，就会重新进行计算，计算的结果将保存到一个新的属性中
3. 计算属性的结果会被缓存，方便下一次直接使用；只要计算属性方法中的数据没有发生变化，就不会重新计算
   4.计算属性方法中必须有一个return值
   例子

<div id="app">
	firstname：<input type="text" v-model="firstname" />
	lastname：<input type="text" v-model="lastname" />
	fullname：<input type="text" v-model="FullName" />
</div>
<script type="text/javascript">
	new Vue({
    
		el: '#app',
		data: {
    
			firstname: '',
			lastname: ''
		},
		computed: {
    
			FullName() {
      //FullName就是新生成的属性
				return this.firstname + '-' + this.lastname
			}
		}
	})
</script>

05、template

1.一个字符串模板，可以是选择器或包含html内容的字符串

06、watch

1. 主要用于监听vue实例已有属性的变化,对于不存在的属性无法起到监听作用
2. watch可以在参数列表拿到变化的前一个对象和变化之后的新对象
3. watch可以检测对象深层次属性的变化以及设置回调函数是否立即触发
   例子

<div id="app">
	firstname：<input type="text" v-model="firstname" />
	lastname：<input type="text" v-model="lastname" />
	fullname：<input type="text" v-model="FullName" />
</div>
<script type="text/javascript">
	new Vue({
    
		el: '#app',
		data: {
    
			firstname: '',
			lastname: '',
			FullName: ''
		},
		watch: {
    
			firstname(newVal, oldVal) {
    
				this.FullName = newVal + '-' + this.lastname
			},
			lastname(newVal, oldVal) {
    
				this.FullName = this.firstname + '-' + newVal
			}
		}
	})
</script>

07、vue实例的属性对象

Vue实例对外提供了一些有用的实例属性与方法,用前缀$+属性名/方法名表示,以便于和用户定义属性区分开

属性:

vm.$el:根实例的挂载DOM结点
vm.$parent:当前实例的父实例
vm.$children:当前实例的子实例
vm.$root:组件树的根实例,如果没有父实例,vm.$root指向自己
vm.$refs:注册过 ref 特性 的所有 DOM 元素和组件实例
vm.$data:指向实例的data属性
vm.$props:指向当前组件的props对象属性
vm.$watch:指向实例的watch方法
vm.$set:这个方法给实例设置的属性是响应式的.直接设置vm.prop不是响应式的
vm.$mount:这个方法等同于el属性,都是给vue实例挂载DOM结点，底层实现一样
vm.$nextTick:DOM完成更新后，自动执行，调用nextTick中的回调函数

实例：获取DOM元素

<div id="app">
	<h1 @click="showMessage" ref="h1">哈哈哈</h1>
</div>
<script type="text/javascript">
	new Vue({
    
		el: '#app',
		methods: {
    
			showMessage() {
    
				console.log(this.$refs.h1.innerHTML)
			}
		}
	})
</script>

08、beforeCreate

触发：在实例创建之前执行
作用：这个阶段主要做的事情是初始化事件和生命周期
范围：不能拿到data数据，不能拿到dom节点

09、created

触发：在实例创建完执行，常用于操作vue
作用: 主要做的事情就是数据观测，可以通过this拿到data数据，此处最早可发Ajax请求，通过修改属性做渲染
范围：可以获取data数据，无法获取挂载的dom节点，在此处修改数据不会触发beforeUpdate和updated钩子函数

10、beforeMount

触发：数据渲染之前触发，此时dom节点已经挂载，但是数据尚未渲染到html模板
作用：结束模板编译，准备数据渲染
范围：此时编译模板已经结束，可以拿到dom节点，可以修改data属性，但数据还没最终渲染到页面，不能拿到html最终渲染的结果

11、mounted

触发：dom节点挂载，且数据已经渲染到html模板上去，就是针对需要操作dom的方法，比如加载jQuery插件时，在这里面加载对应的函数
作用：将数据渲染到DOM节点
范围：可以访问和修改data属性，数据已经渲染到DOM节点，可以操作渲染后的DOM，可以触发beforeUpdate、updated钩子函数

new Vue({
    
	el: '#app',
	data: {
    
		name: 'onion'
	},
	created() {
    
		console.log(this.name)
	}
})

12、components

意思为引入组件，组件可以写在别的文件中，也可以写在本文件中，需要赋值给变量