一、使用.的方式调用对象的属性

格式：对象名.属性名（不带双引号）

//定义对象
var a = {name:'33',age:'77'}
//调用对象name属性
a.name

二、使用[ ]的方式调用对象的属性

格式：对象名[ ' 属性名 ' ]

//定义对象
var a = {name:'33',age:'77'}
//调用对象name属性
a.['name']

如果是访问变量是不需要加引号的,如：

//定义对象
var a = {name:'33',age:'77'}
var param = 'name'
//调用name属性
a[param]

 三、两者的区别

1、中括号当中的属性名可以是数字，而点后面则不可以是数字。

2、当在为一个对象动态的添加属性时，不可以使用点，必须使用[  ]

3、如果属性名称带“-”,不可以使用点，必须使用[  ]

如属性名为data-dict时，使用对象.属性调用，直接报错

但是可以使用[  ]调用

el

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

data

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

methods

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

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>

template

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

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>

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>

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

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

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

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

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

components

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