vue基础（1）：深入理解vue（基础）

作者：小小林熬夜学编程 | 2024-02-19 12:31:13

踩

深入理解vue

文章目录

一、Vue起步
二、深入理解vue（基础）

一、Vue起步

1. MVVM模式是什么

传统的mvp模式

m层指的是数据层（model）
v层指的是视图层（view）
p层指的是控制器

该编码方式一般用于普通操作dom方式，改变视图后通过控制器，进行大量dom操作，调用数据或者操作视图，核心是在p层

mvvm模式

m层指的是数据层（model）
v层指的是视图层（view）
vm层指的是vue自带的层（viewmodel）

也就是说使用vue进行前端开发，我们只需要关心view层和Model层就行，操作dom就由vue来实现。在vm层中的实现主要使用了es5的object.definproperties和虚拟dom的机制。
在这里插入图片描述

2. 创建一个vue实例

new一个Vue实例（也就是根实例）
初始化Vue实例的配置项参数：
- el （Vue实例接管dom元素，也就是说使用vue，就无需使用js的dom操作了），
- data（数据），
{ {}}输出数据，只有被Vue实例接管的dom节点才能输出。
$data 是 data的别名

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>第一个vue实例</title>
		<!-- vue2.5.17 -->
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<div id="app">{
  {content}}</div>
		<script type="text/javascript">
			var app = new Vue({
    
				el: '#app',			实例接管的dom
				data: {
    
					content: 'hello world!',
				}
			});
			
			2秒后，修改显示内容
			setTimeout(()=>{
    app.$data.content='hello poorpenguin!'},2000);
		</script>
	</body>
	</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3. v-model v-on v-for

v-model 对表单和变量进行双向绑定（哪一方的值改变，另一方也随之改变）v-model="变量名"
v-on （v-on:简写@）监听dom事件 v-on:事件="方法名"或者@事件="方法名"
v-for 列表渲染v-for="item in items"或者v-for="(item, index) in items（index为数组项下标）"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
	<div id="todolist">
		<input type="text" v-model="inputValue"/>
		<button @click="add">添加</button>
		<ul>
			<li v-for="item in list">{
  {item}}</li>
		</ul>
	</div>
	<script type="text/javascript">
		var todolist = new Vue({
    
			el: '#todolist',
			data: {
    
				list: [],
				inputValue: '',
			},
			methods: {
    
				add(){
    
					this.list.push(this.inputValue);
					this.inputValue = '';
				},
			}
		});
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

4.组件基础

通过Vue实例接管的dom元素，我们就可以看成是一个组件。相对于全局注册和局部注册的组件来说，Vue实例就是父组件。

每一个组件就是一个vue实例。

4.1 局部组件

局部组件是在局部注册的。
使用一个普通的js对象定义组件，再在Vue实例中注册components:{}。

	<div id="todolist">
		<input type="text" v-model="inputValue"/>
		<button @click="add">添加</button>
		<ul>
			<to-do-list :content="item" :index="index" v-for="(item, index) in list"></to-do-list>
		</ul>
	</div>
	<script type="text/javascript">
		var ToDoList = {
    
			props: ['content','index'],
			template: '<li>{
    {index}}.{
    {content}}</li>',
		};
		var todolist = new Vue({
    
			el: '#todolist',
			components: {
    
				ToDoList: ToDoList,	//可以ES6简写 ToDoList,
									//或者'to-do-list': ToDoList,
			},
			data: {
    
				list: [],
				inputValue: '',
			},
			methods: {
    
				add(){
    
					this.list.push(this.inputValue);
					this.inputValue = '';
				},
			}
		});
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

4.2 全局组件

通过 Vue.component 来创建组件，就是全局注册的组件。

	<div id="todolist">
		<input type="text" v-model="inputValue"/>
		<button @click="add">添加</button>
		<ul>
			<to-do-list :content="item" :index="index" v-for="(item, index) in list"></to-do-list1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/114719