路由
一个路由就是一组映射关系(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