A brief analysis of watch listeners, calculated properties, Vue-cli and components in Vue

This article will take you to continue learning Vue and introduce in detail the watch listener, calculated properties, Vue-cli and Vue components in Vue essential knowledge for getting started. I hope it will be helpful to everyone!

1. Watch listener

(1) What is a watch listener

watch listener allows developers to monitor changes in data and perform specific operations on changes in data. (Learning video sharing: vue video tutorial)

The syntax format is as follows:

(2) Use watch to detect users Whether the name is available

Listen to changes in the username value, and use axios to initiate an Ajax request to check whether the currently entered username is available:

The code is demonstrated as follows:

watch: {
	// 监听 username 值的变化
	async username( newVal ) {
		if (newVal === '') return
		// 使用 axios 发起请求，判断用户名是否可用
		const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
		console.log(res)
	}
}

(3)immediate option

By default, the component will not call the watch listener after the initial loading. If you want the watch listener to be called immediately, you need to use the immediate option.

The code demonstration is as follows:

watch: {
	username: {
	// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
		handler: async function ( newVal ) {
			if (newVal === '') return
			const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
			console.log(res)
		},
		// 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
		immediate: true
	}
}

(4) deep option

If watch is listening to a Object, if the property value in the object changes, it cannot be monitored. You need to use the deep option at this time.

The code demonstration is as follows:

(5) Monitor changes in a single attribute of the object

If only wants to monitor Changes to a single property in an object can be defined as followswatch Listener:

The code is demonstrated as follows:

---

2. Computed properties

(1) What is a computed property

1️⃣ Computed properties refer to through a series of After the operation , a attribute value is finally obtained.

2️⃣ This dynamically calculated attribute value can be used by the template structure or methods method.

The code demonstration is as follows:

(2) Characteristics of computed properties

1️⃣ Although computed properties are declared when Defined as a method, but the essence of a calculated property is a property;

2️⃣ The calculated property will cache the calculated result, only the calculated propertyWhen the dependent data changes, the operation will be re-calculated;

---

3. vue-cli

(1) What It’s vue-cli

1️⃣ vue-cli is the standard tool for Vue.js development. It simplifies the process for programmers to create engineered Vue projects based on webpack.

2️⃣ Quoted from the vue-cli official website: Programmers can focus on writing applications instead of spending days worrying about webpack configuration issues;

3️⃣ Chinese official website: https://cli.vuejs.org/zh/

(2) Installation and use

1️⃣ vue-cli is on npm A global package, you can easily install it on your computer using the npm install command: npm install -g @vue/cli

2️⃣ Check Is the version correct? vue --version

3️⃣ Run the following command in the terminal to create a project with the specified name: vue create The name of the project

(3) The composition of the src directory in the vue project

• assets folder: Store static resource files used in the project, such as: css style sheets, image resources;
• components folder: All reusable components encapsulated by programmers must be placed in components directory;
• main.js is the entry file of the project. To run the entire project, main.js must be executed first;
• App.vue is the root component of the project;

(4) vue project The running process

In an engineering project, what vue has to do is very simple: render App.vue into the designated area of ​​index.html through main.js.

• App.vue is used to write the template structure to be rendered;
• index.html needs to reserve an el area;
• main.js renders App.vue into the area reserved by index.html;

---

4. Vue components

(1) What is component development

Component development refers to: based on the idea of ​​encapsulation, Encapsulate reusable UI structures on the page as components to facilitate project development and maintenance.

(2) Component development in vue

1️⃣ vue is a front-end framework that supports component development;

2️⃣ vue stipulates that the suffix name of the component is .vue. The App.vue file I came into contact with before is essentially a vue component;

(3) The three components of the vue component

each. vue components are composed of 3 parts, which are:

• template → template structure of the component
• script → The JavaScript behavior of the component
• style → The style of the component

where, Each component must contain a template template structure, while script behavior and style are optional components.

3.1 template

vue stipulates that the template structure corresponding to each component needs to be defined in the <template></template> node.

? Warm reminder?:

• template is the container tag provided by vue, which only plays the role of package. , it will not be rendered as a real DOM element;
• template can only contain the only root node;

3.2 script

1️⃣ vue regulations: Developers can encapsulate the JavaScript business logic of the component in the <script></script> node.

<script></script> The basic structure of the node is as follows:

2️⃣ vue regulations: .vue in the component data must be a function , cannot directly point to a data object .

Therefore, when defining the data node in the component, the following method is wrong:

3.3 style

vue stipulates: The <style></style> node within the component is optional, and developers can <style></style> nodesWrite styles to beautify the UI structure of the current component.

<script></script> The basic structure of the node is as follows:

##Add ## to the