Vue路由???Vue指令/？？？？

路由
一个路由就是一组映射关系(key - value)，key 为路径， value 可能是function或componen

理解：value 是 component ，用于展示顽面内容
工作过程：当浏览器的路径改变时，对应的组件就会显示
vue-router 是 vue 的一个插件库，专门用来实现SPA应用。

编写 router 配置项：

import VueRouter from . vue-router            // 引入VueRouter
import About from '../ components/About'      // 引入组件
import Home from'../ components /Home'        // 路由组件

注意事项
1.路由组件通常存放在 pages 文件夹，-般组件通常存放在 components 文件夹。
比如上一节的案例就可以修改为

2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的 $route 属性，里面存储着自己的路由信息
4.整个应用只有一个 router，可以通过组件的 $router 属性获取到

插值语法
功能：用于解析标签内容。
写法：

<div id="app"> {{aaa}} </div>
1
阻止VUE在启动时产生的提示：

Vue.config.productionTip = false;
1
绑定容器
绑定容器的2种方式
1.el绑定 : " 容器 id 或 class 等 "
2.Vue实例.$mount( " 容器 id 或 class 等 " )，注：一定写在最后

el:'#app', //第一种绑定方法
app.$mount("#app") //第二种绑定方法
1
2
data用于给容器添加值

data: {
    app: 'Hello Vue!',
}
1
2
3
整体写法

//第一种
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
})
//第二种
var app = new Vue({
    data: {
        message: 'Hello Vue!',
    }
})
app.$mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
v-i f和 v-show 区别
1.相同的：都可以进行显示隐藏
2.不同点：v-if存在或不存在，v-show展示或不展示
3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗多次的显示隐藏推荐使用v-show