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

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

Logo

前往低代码交流专区

更多推荐