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 文件。
19课 Vue第二节的更多相关文章
- 学习Vue第二节,v-cloak,v-text,v-html,v-bind,v-on使用
v-cloak,v-text,v-html,v-bind,v-on使用 <!DOCTYPE html> <html> <head> <meta charset ...
- 18课 Vue第一节
Q1: url-loader必须搭载file-loader?Q2: 图片的打包问题,如果直接写在img标签里用src引用图片,该如何打包?Q3: 如何根据不同的页面html模板打包与之对应的css/j ...
- centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab :启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /dev/tty(0,6) 模拟终端 /dev/pts/# grub-md5-crypt 给grub加密码 initrd 第二节课
centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab :启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /d ...
- VUE2.0实现购物车和地址选配功能学习第二节
第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
- android内部培训视频_第二节 布局基础
第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
- seajs第二节,seajs各模块依赖关系
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 第二节 安装CentOS
Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...
- 源码讲解 node+mongodb 建站攻略(一期)第二节
源码讲解 node+mongodb 建站攻略(一期)第二节 上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...
随机推荐
- 洛谷P2294 [HNOI2005]狡猾的商人
P2294 [HNOI2005]狡猾的商人 题目描述 输入输出格式 输入格式: 从文件input.txt中读入数据,文件第一行为一个正整数w,其中w < 100,表示有w组数据,即w个账本,需要 ...
- Mac安装vue
Mac安装vue 一.安装brew 打开终端运行以下命令: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com ...
- 为CentOS下的Docker安装配置python3【转】
* 安装python3以及docker yum install docker docker pull centos service docker start systemctl enable dock ...
- 迎接仪式 dp
题目描述 LHX教主要来X市指导OI学习工作了.为了迎接教主,在一条道路旁,一群Orz教主er穿着文化衫站在道路两旁迎接教主,每件文化衫上都印着大字.一旁的Orzer依次摆出“欢迎欢迎欢迎欢迎……”的 ...
- AddDemo教学演示
- JS模块
本文主要内容翻译自<Exploring ES6-upgrade to the next version of javascript> 模块系统 定义模块接口,通过接口 隐藏模块的内部实现, ...
- angularJS处理table中checkbox的选中状态
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- little w and Sum(思维)
链接:https://ac.nowcoder.com/acm/contest/297/B 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...
- Java 内存模型(一)
打算花比较长的篇幅来描述下自己理解的JVM,尽量描述的清晰易懂一些,从简单慢慢到慢慢深入,一方面自己也复习一下,一方面也供大家参考,少走些弯路.鉴于本人水平有限,如有错误的地方,欢迎指出,感谢. 一段 ...
- java多线程基础(二)--java多线程的基本使用
java多线程的基本使用 在java中使用多线程,是通过继承Thread这个类或者实现Runnable这个接口或者实现Callable接口来完成多线程的. 下面是很简单的例子代码: package c ...