Properties and methods in the Vue instance object---kalrry

01、the

1. is a unique attribute of the root instance, representing the root element
2. Provides a DOM object on the page as the mount target of the Vue instance. Can be a selector or a DOM element instance

02、data

1. The properties in the data object are responsive, and setting properties directly to the vm instance is not responsive
2. The responsiveness of data can be interrupted by Object.freeze()
3. The use of the data attribute:
   In the function of the Vue instance: use this.prop to call (methods, computed's this is automatically bound to the vue instance)
   Inside the label: Access via the expression { {porp}}
   On the label: Call via binding: [ prop] = "prop"

03、methods

1. Generally used to set the event callback function
2. In the expression, you can call the method to achieve the same display effect as calling the computed property.
3. Unlike computed, methods do not have a cache, and the function code is compiled and executed each time it is called.

04、computed

1. Computed properties must not be called with () when they are referenced, just use them as ordinary properties.
2. When the data in data changes, the calculation will be re-calculated, and the calculation result will be saved to a new attribute
3. The result of the computed property will be cached for direct use next time; as long as the data in the computed property method has not changed, it will not be recalculated
   4. There must be a return value
   example in the computed property method

<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. A string template, which can be a selector or a string containing html content

06、watch

1. It is mainly used to monitor the changes of the existing properties of the vue instance, and it cannot monitor the properties that do not exist.
2. watch can get the previous object of the change and the new object after the change in the parameter list
3. watch can detect changes in the object's deep properties and set whether the callback function is triggered immediately
   example

<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. Attribute object of vue instance

The Vue instance provides some useful instance properties and methods to the outside world, which are represented by the prefix $+ property name/method name to distinguish it from user-defined properties

Attributes:

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中的回调函数

Example: Get DOM element

<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

Trigger: Execute before instance creation
Function: The main thing to do in this stage is to initialize events and life cycle
Scope: Can't get data data, can't get dom node

09、created

Trigger: After the instance is created and executed, it is often used to operate the vue
function: the main thing is data observation, you can get the data data through this, where the earliest Ajax request can be sent, and the rendering
range can be done by modifying the attributes: you can get the data data, Unable to get the mounted dom node, modifying data here will not trigger the beforeUpdate and updated hook functions

10、beforeMount

Trigger: Triggered before data rendering, when the dom node has been mounted, but the data has not been rendered to the html template
Function: End template compilation, prepare data rendering
range: At this time, the compilation template has been completed, the dom node can be obtained, and the data attribute can be modified , but the data has not been finally rendered to the page, and the final rendering result of html cannot be obtained

11、mounted

Trigger: The DOM node is mounted, and the data has been rendered to the html template, which is for the method that needs to operate the DOM, such as when loading the jQuery plug-in, load the corresponding function in it
Function: Render the data to the DOM node
range: can access and Modify the data attribute, the data has been rendered to the DOM node, the rendered DOM can be manipulated, and the beforeUpdate and updated hook functions can be triggered

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

12、components

It means to introduce components. Components can be written in other files or in this file. They need to be assigned to variables.