事件修饰符

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第二节的更多相关文章

  1. 学习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 ...

  2. 18课 Vue第一节

    Q1: url-loader必须搭载file-loader?Q2: 图片的打包问题,如果直接写在img标签里用src引用图片,该如何打包?Q3: 如何根据不同的页面html模板打包与之对应的css/j ...

  3. 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 ...

  4. VUE2.0实现购物车和地址选配功能学习第二节

    第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...

  5. android内部培训视频_第二节 布局基础

    第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...

  6. seajs第二节,seajs各模块依赖关系

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  7. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  8. 第二节 安装CentOS

    Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...

  9. 源码讲解 node+mongodb 建站攻略(一期)第二节

    源码讲解 node+mongodb 建站攻略(一期)第二节 上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...

随机推荐

  1. bzoj4514: [Sdoi2016]数字配对(费用流)

    传送门 ps:费用流增广的时候费用和流量打反了……调了一个多小时 每个数只能参与一次配对,那么这就是一个匹配嘛 我们先把每个数分解质因数,记质因子总个数为$cnt_i$,那如果$a_i/a_j$是质数 ...

  2. Hadoop集群配置免密SSH登录方法

    Hadoop集群包含1个主节点和3个从节点,需要实现各节点之间的免密码登录,下面介绍具体的实现方法. 一.Hadoop集群环境 二.免密登录原理 每台主机authorized_keys文件里面包含的主 ...

  3. PyCharm专业版安装(2018年Windows版)

    友情提示: 本教程仅供学习交流使用,如需商业用途,强烈建议使用官方正式版.(官网正式链接为:https://www.jetbrains.com/pycharm/) 当然网上有很多其他激活教程,我看到的 ...

  4. 今天实现一个T-sql的小编程,分享给大家,看看就好~(列值赋值)

    介绍:将一个表的某列值插入到另一个表的列里,暂定为表aa和表nn DECLARE @a int set @a=1 while @a<nn.列1.length    --(注:语法不对你可以用查询 ...

  5. giihub上的关于js的43道题目

    参考 https://github.com/lydiahallie/javascript-questions

  6. input 上传文件的判断

    <html> <head> <meta charset='utf-8'> <meta name="viewport" content=&q ...

  7. jmeter 正则获取参数集合和ForEach控制器结合使用(转)

    怎么把第一个请求获取的返回的多个id,在第二个请求中逐个以单个id作为请求参数来请求? 为了解决这个问题,模拟下该场景 1.请求www.163.com 主页,获取响应中的所有数字,这个获取的数字集合暂 ...

  8. df 参数说明

    df -h 由 df 命令显示出的各列信息的含义分别是: Filesystem:表示该文件系统位于哪个分区,因此该列显示的是设备名称: 1K-blocks:此列表示文件系统的总大小,默认以 KB 为单 ...

  9. t.call is not a function

    js 写错了... 代码: $("form").each({$(this).submit(function(){return false;})}); 丢了一个 function() ...

  10. 华东交通大学2017年ACM“双基”程序设计竞赛 1009

    Problem Description MDD随机生成了n(n<le5)个随机数x(x<=1e9),这n个随机数排成一个序列,MDD有q(q<=le5)个询问,每个询问给你一个a,问 ...