1. 一个vue实例只能对应一个容器
❌代码：一个vue实例对应了两个容器
<div class="app">
</div>
<div class="app">
</div>
<script>
new Vue({
el: '.app'
})
</script>
❌代码：两个vue实例对应了同一个容器
<div id="app">
<h1>{
{name, age}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '123'
}
})
new Vue({
el: '#app',
data: {
age: 19
}
})
</script>
2. 容器（#app）里的代码被称为【vue模板】
3. 插值语法：用于解析标签体内容
4. 指令语法：用于解析标签（包括标签属性、标签体内容、绑定事件…）
5. 单向数据绑定（v-bind）：数据只能从vm.data流向页面
6. 双向数据绑定（v-model）：数据不仅能从vm.data流向页面，还能从页面流向vm.data
注意：v-model只能应用在表单类元素上
v-model:value可以简写为v-model，因为v-model默认收集的就是value值
7. el绑定容器的方式
第一种：
new Vue({
el: '#app',
data: {
name: '张三'
}
})
第二种：
vm.$mount(elementOrSelector)：手动挂载一个未挂载的实例。
let vm = new Vue({
data: {
name: '张三'
}
})
vm.$mount('#root')
8. 路由使用query参数传值的两种写法
第一种：字符串写法
<router-link :to="`/home/messages?id=${msg.id}&title=${msg.title}`"></router-link>
第二种：对象写法
<router-link :to="{
path: '/home/messages',
query: {
id: msg.id,
title: msg.title
}
}">
</router-link>
组件中接收路由query参数：
<div>
<h2>消息编号：{
{
$route.query.id}}</h2>
<h2>消息标题：{
{
$route.query.title}}</h2>
</div>
9. 路由使用params参数传值的两种写法
第一种：字符串写法
<router-link :to="`/home/news/${news.id}/${news.title}`">{
{news.title}}</router-link>
第二种写法：对象写法
<router-link :to="{
//注意这里只能配置name属性，不能配置path属性
name: 'news',
params: {
id: news.id,
title: news.title
}
}"></router-link>
组件中接收路由params参数：
<div>
<h2>消息编号：{
{
$route.params.id}}</h2>
<h2>消息标题：{
{
$route.params.title}}</h2>
</div>
index.js中的配置：
const routes = [
{
name: 'Home',
path: '/home',
component: Home,
children: [
{
name: 'news',
path: '/home/news/:id/:title',
component: News
}
]
}
]
10. 路由命名
作用：简化路由的跳转，当路径过长时，to属性不用配置path，配置name来实现路由的跳转
index.js：
const routes = [
{
path: '/home',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About
}
]
app.vue：
<template>
<div id="app">
<router-link :to="{name: 'Home'}">Home</router-link>
<router-link :to="{name: 'About'}">About</router-link>
<router-view></router-view>
</div>
</template>
11. 路由的props写法
第一种：值为对象，该对象中所有的key-value都会以props的形式传递给目标组件（News）。
index.js配置：
const routes = [
{
name: 'home',
path: '/home',
component: Home,
children: [
{
name: 'news',
path: 'news',
component: News,
props: {
a: 1,
b: 2
}
}
]
}
]
子组件接收props：
<script>
export default{
name: 'Child',
props: ['a', 'b']
}
</script>
第二种写法：值为布尔值。如布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给目标组件（News）。
index.js配置：
const routes = [
{
name: 'home',
path: '/home',
component: Home,
children: [
{
name: 'news',
path: 'news',
component: News,
props: true
}
]
}
]
父组件传递params：
<router-link :to="{
//注意这里只能配置name属性，不能配置path属性
name: 'news',
params: {
id: news.id,
title: news.title
}
}"></router-link>
子组件接收props：
<script>
export default{
name: 'Child',
props: ['id', 'title']
}
</script>
第三种写法：值为函数，接收$route参数
index.js配置：
const routes = [
{
name: 'home',
path: '/home',
component: Home,
children: [
{
name: 'news',
path: 'news',
component: News,
props($route){
return {
id: $route.query.id, title: $route.query.title}
}
}
]
}
]
子组件接收props：
<script>
export default{
name: 'Child',
props: ['id', 'title']
}
</script>
12. <router-link>的replace属性
用来改变操作浏览器历史记录的模式
<router-link to="/home" replace></router-link>
13. 编程式路由导航
this.$router.push(to)this.$router.replace(to)this.$router.back()this.$router.forward()this.$router.go()
14. 缓存路由组件
每次切换子组件到另一个子组件时，该子组件都会被销毁。如果我们想要在该子组件保存一些内容，再切换回来就看不到了。可以先把该子组件缓存下来。
include属性标明要缓存哪个组件，不写include，所有子组件都会被缓存
<keep-alive :include="['News', 'Messages']">
<router-view></router-view>
</keep-alive>
15. actiaved和deactiaved生命周期钩子，主要用于路由组件
activated和deactivated是配合keep-alive一起使用的activated和deactivated没有keep-alive的时候是不会被触发的- 在存在
keep-alive的时候可以将activated当作created进行使用deactivated是组件失活的时候触发
16. 全局前置路由守卫
初始化的时候，每次路由切换之前被调用，配置在/router/index.js
参数：
to：目标路由from：源路由（从哪去）next：调用next()才会放行
router.beforeEacg((to, from, next) => {
const name = localStorage.getItem('user')
if(name === 'root'){
next()
}else{
alert('您无权限查看！')
}
})
16. ref属性
通过 ref 这个 attribute 为子组件赋予一个 ID 引用。
作用一：用来访问子元素（DOM元素）
代码：
子元素（DOM元素），给按钮添加点击事件访问子元素
<h1 ref="h1">你好</h1>
<button @click="showDom()">点击查看dom</button>
点击事件方法：
methods: {
showDom () {
alert(this.$refs.h1.innerText)
}
}
作用二：用来访问子组件实例对象
代码：
子组件，给按钮添加点击事件访问子组件实例对象
<child-0 ref="child0"></child-0>
<button @click="showChild0">点击查看child0</button>
点击事件方法：
methods: {
showDom () {
console.log(this.$refs.child0)
}
}