19课 Vue第二节
事件修饰符
stop 禁止冒泡
once 单次事件
prevent 阻止默认事件
native 原生事件（组件）
keycode|name 筛选按键 组合键 ： @keydown.ctrl.enter
self
capture
--------------------------------------------------------------------------------
@click="fn()"
@click.stop="fn()"
--------------------------------------------------------------------------------
computed——计算属性
1.缓存——性能
2.方便
读、写
属性的形式
--------------------------------------------------------------------------------
watch——监听：
--------------------------------------------------------------------------------
vue-router
数据交互
组件
--------------------------------------------------------------------------------
vue-router
1.容器
<router-view></router-view>
2.路由表
let router=new VueRouter({
routes: [
{path, component},
{path, component},
{path, component},
...
]
});
component里面内容必须要有父标签
3.添加到vm对象
new Vue({
el, data, ...,
router: router
})
el不要挂载到html, body
--------------------------------------------------------------------------------
router-view 容器
router-link a标签
路由为什么加# 防止页面刷新 便于页面收藏、后退
--------------------------------------------------------------------------------
命名路由
$route：当前路由的信息
--------------------------------------------------------------------------------
<router-link to="/xxx/xxx">
<router-link :to="{name, params}">
命名路由
new VueRouter({
routes: [
{path, component},
{path, name, component},
]
})
routes 的children下path必须写相对路径，不能写绝对路径
--------------------------------------------------------------------------------
获取路由信息：$route
JS控制路由跳转：$router
this.$router.push(
string|object
);
--------------------------------------------------------------------------------
history是一个栈
--------------------------------------------------------------------------------
push(string|object) 入栈
replace(string|object) 替换最后一个历史纪录(当前)
go(int)
go(-1)
go(1)
--------------------------------------------------------------------------------
$route 当前路由信息
$router 操作路由
--------------------------------------------------------------------------------
监视路由：
1.watch——不推荐
简单——只能看不能干预
2."路由守卫"
也能控制
--------------------------------------------------------------------------------
多视图
npm install module_name -S 即 npm install module_name --save 写入dependencies
npm install module_name -D 即 npm install module_name --save-dev 写入devDependencies
cls 清屏
npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。
如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。
