Vue.js第一篇：入门

0. 安装

检测电脑是否已经安装Vue.js：vue --version;
如果没有安装，通过npm安装：npm install -g @vue/cli;

1. 新建

方式1 命令行

新建：vue create test;（default）
运行：npm run serve;
访问：localhost:8080;

方式2 UI界面

打开VueUI界面：vue ui；
选择create/选择位置/键入项目名；
自动进入项目dashboard以后，选择Tasks/serve，Run task可以查看项目运行的信息；
Tasks/serve的右上角选择 Open App 进入如方式一建立的项目地址。

---

2. 文件结构

Vue.js是单页面应用，在public文件夹中的index.html是app的页面，其中引入了

<div id="app"></div>

在src文件夹中的main.js中进行#app的渲染。这两个文件我们不用动，主要看.vue文件。

⚠️App.vue文件中主要有三个部分：
template —— html、{{变量}}、子组件/component等
script —— name、引入子组件/component、props{}、data(){}等
style —— scoped、css

其中，基本点：

3. data

data是一个方法，返回一个对象，引用时形式是{{msg}}

export default {
	name: 'app',
	data(){
		return {
			msg: 'Hello, Nana!'
		}
	}
}

4. 父子组件传参

v-bind可用于父组件向子组件传递props，子组件中通过props取值
父组件

<Todos v-bind:todos="todos" />

子组件

export default {
	props: ['todos']
}

5. v-for循环（v-bind:key）

<div v-bind:key="todo.id" v-for="todo in todos">
	<h1>{{todo.title}}</h1>
</div>

⚠️这里数组循环用in

6. class

<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">

⚠️
1、对比React的className；
2、父组件的同一属性高于子组件的优先级；
3、多个class写法注意？

7. on / method

<div v-on:change="markComplete">

export default {
	methods: {
		markComplete() {
			this.todo.completed = !this.todo.completed;
		}
	}
}

⚠️methods是对象，data是函数
【思考】相当于改了props？

8. 子组件调用父组件方法（依旧麻烦）

需要一层一层传递
子孙组件

<button @click="$emit('del-todo', todo.id)">delete</button>

中间组件

<Todo v-on:del-todo="$emit('del-todo', todo.id)" />

父组件

<Todos v-on:del-todo="deleteItem" />

export default {
	methods: {
		deleteItem(id){
			this.todos = this.todos.filter(todo => { todo.id !== id});
		}
	}
}

⚠️
0、注意传递方式和$emit写法；
1、methods中获取data使用this.xxx；
2、v-on:click可简写成@click；
3、filter函数注意返回值。

9. v-model

我理解相当于v-bind:value.

<input type="text" v-model="title" />

10. created

从jsonplaceholder中读取数据：https://jsonplaceholder.typicode.com/
这个网站中可以得到模拟数据
安装插件：npm i axios

created相当于React中的componentDidMount

import axios from 'axios';
export default {
	data() {
		return {
			todos: []
		}
	}
	created() {
		axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
			.then(res => this.todos = res.data)
			.catch(err => consolr.log(err));
	}
}

11. route

⚠️添加路由组件的时候，会重写App.vue，需要提前做好备份！！！

学习油管视频：https://www.youtube.com/watch?v=Wy9q22isx3U