本文已参与「新人创作礼」活动，一起开启掘金创作之路。

01、el

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

02、data

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

03、methods

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

04、computed

计算属性在引用时一定不要加()去调用，直接把它当作普通属性去使用就行
当data中的数据发生变化时，就会重新进行计算，计算的结果将保存到一个新的属性中
计算属性的结果会被缓存，方便下一次直接使用；只要计算属性方法中的数据没有发生变化，就不会重新计算 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

主要用于监听vue实例已有属性的变化,对于不存在的属性无法起到监听作用
watch可以在参数列表拿到变化的前一个对象和变化之后的新对象
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

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

Vue实例对象中的属性与方法---kalrry