mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
2217 lines
332 KiB
HTML
2217 lines
332 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Vue 2 备忘清单
|
||
& vue2 cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="Vue 2渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="vue2,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/vue2.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="vue-2-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
|
||
<path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z"></path>
|
||
<path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#vue-2-备忘清单"><span class="icon icon-link"></span></a>Vue 2 备忘清单</h1><div class="wrap-body">
|
||
<p>渐进式 JavaScript 框架 <a href="https://v2.cn.vuejs.org/">Vue 2</a> 备忘清单的快速参考列表，包含常用 API 和示例。</p>
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#快速创建-vue-项目">快速创建 Vue 项目</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#声明式渲染">声明式渲染</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基础例子">基础例子</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#绑定元素属性">绑定元素属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#条件">条件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#循环">循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#点击事件处理">点击事件处理</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#输入事件处理">输入事件处理</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#模板语法">模板语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#文本">文本</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#原始-html">原始 HTML</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#属性">属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#javascript-表达式">JavaScript 表达式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令">指令</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令参数">指令参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令动态参数-v26">指令动态参数 v2.6</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令修饰符">指令修饰符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令缩写">指令缩写</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#class-与-style-绑定">Class 与 Style 绑定</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对象语法">对象语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#与普通的-class-属性共存">与普通的 class 属性共存</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#绑定的数据对象不必内联定义在模板里">绑定的数据对象不必内联定义在模板里</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#三元表达式">三元表达式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组">数组</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组语法">数组语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内联样式">内联样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内联样式对象通常更好">内联样式对象通常更好</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内联样式数组语法">内联样式数组语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内联样式多重值">内联样式多重值</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#条件渲染">条件渲染</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-if">v-if</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-else-if">v-else-if</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-else">v-else</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#template-上使用-v-if-条件渲染分组"><template> 上使用 v-if 条件渲染分组</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#用-key-管理可复用的元素">用 key 管理可复用的元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-show">v-show</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#列表渲染">列表渲染</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-for">v-for</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-for-可选的第二个参数索引">v-for 可选的第二个参数(索引)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-for-使用对象">v-for 使用对象</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-forv-if">v-for/v-if</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组件上使用-v-for">组件上使用 v-for</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#事件处理">事件处理</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#监听事件">监听事件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件处理方法">事件处理方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内联处理器中的方法">内联处理器中的方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件修饰符">事件修饰符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件修饰符-passive">事件修饰符 passive</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#按键修饰符">按键修饰符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#exact-修饰符">.exact 修饰符</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#计算属性和侦听器">计算属性和侦听器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基础例子-1">基础例子</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#计算属性缓存-vs-方法">计算属性缓存 vs 方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#计算属性-vs-侦听属性">计算属性 vs 侦听属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#计算属性的-setter">计算属性的 setter</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#表单输入绑定">表单输入绑定</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#文本-1">文本</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#多行文本">多行文本</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#复选框">复选框</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#多个复选框">多个复选框</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单选按钮">单选按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选择框">选择框</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选择框数组">选择框(数组)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-for-渲染的动态选项">v-for 渲染的动态选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#值绑定">值绑定</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单选按钮-1">单选按钮</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#复选框-1">复选框</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#选择框的选项">选择框的选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#修饰符">修饰符</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#组件基础">组件基础</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单文件组件">单文件组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基本示例">基本示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单个根元素">单个根元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#向子组件传递数据">向子组件传递数据</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#data-必须是一个函数">data 必须是一个函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#监听子组件事件">监听子组件事件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#在组件上使用-v-model">在组件上使用 v-model</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#通过插槽分发内容">通过插槽分发内容</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动态组件示例">动态组件示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#解析-dom-模板时的注意事项">解析 DOM 模板时的注意事项</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#过渡--动画">过渡 & 动画</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#单元素组件的过渡">单元素/组件的过渡</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-过渡">CSS 过渡</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-动画">CSS 动画</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#过渡的类名">过渡的类名</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#自定义过渡的类名">自定义过渡的类名</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#显性的过渡持续时间">显性的过渡持续时间</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#初始渲染的过渡">初始渲染的过渡</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#javascript-钩子">JavaScript 钩子</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表的进入离开过渡">列表的进入/离开过渡</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#vue-2-api-参考">Vue 2 API 参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局配置">全局配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局-api">全局 API</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数据">数据</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#dom">DOM</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#生命周期钩子">生命周期钩子</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#资源">资源</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合">组合</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#其它">其它</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#实例方法--数据">实例方法 / 数据</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#实例-property">实例 property</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#实例方法--事件">实例方法 / 事件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#实例方法--生命周期">实例方法 / 生命周期</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#指令-1">指令</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#特殊-attribute">特殊 attribute</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置的组件">内置的组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-on-事件修饰符">v-on (事件)修饰符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-on-鼠标修饰符">v-on (鼠标)修饰符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#系统修饰键">系统修饰键</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#keyboard-按键修饰符">Keyboard 按键修饰符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#v-bind-修饰符">v-bind 修饰符</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<p>Vue 是一套用于构建用户界面的渐进式框架</p>
|
||
<ul class="style-round">
|
||
<li><a href="https://v2.cn.vuejs.org/">Vue 2.x 官方文档</a> <em>(v2.cn.vuejs.org)</em></li>
|
||
<li><a href="https://v3.router.vuejs.org/">Vue Router 3.x 官方文档</a> <em>(v3.router.vuejs.org)</em></li>
|
||
<li><a href="./vue.html">Vue 3 备忘清单</a></li>
|
||
</ul>
|
||
<!--rehype:className=style-round-->
|
||
<p>注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本</p>
|
||
<h4 id="快速创建-vue-项目"><a aria-hidden="true" tabindex="-1" href="#快速创建-vue-项目"><span class="icon icon-link"></span></a>快速创建 <strong>Vue</strong> 项目</h4>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">npx @vue/cli create hello-world
|
||
</span></code></pre>
|
||
<p>参考: <a href="https://cli.vuejs.org/zh/guide/creating-a-project.html">Vue CLI</a> 创建一个项目</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="声明式渲染"><a aria-hidden="true" tabindex="-1" href="#声明式渲染"><span class="icon icon-link"></span></a>声明式渲染</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ message }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello Vue!'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="基础例子"><a aria-hidden="true" tabindex="-1" href="#基础例子"><span class="icon icon-link"></span></a>基础例子</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>原始信息: "{{ message }}"<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 计算的反向信息: "{{ reversedMessage }}"
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 计算属性的 getter</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">reversedMessage</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// `this` 指向 vm 实例</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>结果</p>
|
||
<pre><code class="code-highlight"><span class="code-line">原始信息: "Hello"
|
||
</span><span class="code-line">计算的反向信息: "olleH"
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="绑定元素属性"><a aria-hidden="true" tabindex="-1" href="#绑定元素属性"><span class="icon icon-link"></span></a>绑定元素属性</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-2'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'页面加载于 '</span> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="条件"><a aria-hidden="true" tabindex="-1" href="#条件"><span class="icon icon-link"></span></a>条件</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>现在你看到我了<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-3'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">seen</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>控制切换一个元素是否显示</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="循环"><a aria-hidden="true" tabindex="-1" href="#循环"><span class="icon icon-link"></span></a>循环</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>todo in todos<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ todo.text }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app4 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-4'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">todos</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'学习 JavaScript'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'学习 Vue'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'整个牛项目'</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="点击事件处理"><a aria-hidden="true" tabindex="-1" href="#点击事件处理"><span class="icon icon-link"></span></a>点击事件处理</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reverseMessage<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 反转消息
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app5 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-5'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello Vue.js!'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">reverseMessage</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">message</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="输入事件处理"><a aria-hidden="true" tabindex="-1" href="#输入事件处理"><span class="icon icon-link"></span></a>输入事件处理</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>v-model</code> 指令，它能轻松实现表单输入和应用状态之间的双向绑定</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app6 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-6'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello Vue!'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="模板语法"><a aria-hidden="true" tabindex="-1" href="#模板语法"><span class="icon icon-link"></span></a>模板语法</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="文本"><a aria-hidden="true" tabindex="-1" href="#文本"><span class="icon icon-link"></span></a>文本</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Message: {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-once</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 这个将不会改变: {{ msg }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>使用 <code>v-once</code> 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="原始-html"><a aria-hidden="true" tabindex="-1" href="#原始-html"><span class="icon icon-link"></span></a>原始 HTML</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>解释为普通文本: {{ rawHtml }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 使用 v-html 指令:
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rawHtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>使用 <code>v-html</code> 指令，输出真正的 <code>HTML</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="属性"><a aria-hidden="true" tabindex="-1" href="#属性"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamicId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isDisabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> Button
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如果 <code>isDisabled</code> 的值是 null/undefined/false 则 <code>disabled</code> 不会被渲染出来</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="javascript-表达式"><a aria-hidden="true" tabindex="-1" href="#javascript-表达式"><span class="icon icon-link"></span></a>JavaScript 表达式</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>消息: {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>{{ msg + '这是字符串' }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>{{ isWorking ? '是':'否' }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>{{ msg.getDetials() }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>list-' + id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令"><a aria-hidden="true" tabindex="-1" href="#指令"><span class="icon icon-link"></span></a>指令</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 现在你看到我了
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>v-if</code> 指令将根据表达式 <code>seen</code> 的值的真假来插入/移除 <p> 元素</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令参数"><a aria-hidden="true" tabindex="-1" href="#指令参数"><span class="icon icon-link"></span></a>指令参数</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>v-bind</code> 指令将该元素 <code>href</code> 属性与表达式 <code>url</code> 的值绑定</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>v-on</code> 指令，用于监听 DOM 事件，oSomething 是事件名</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令动态参数-v26"><a aria-hidden="true" tabindex="-1" href="#指令动态参数-v26"><span class="icon icon-link"></span></a>指令动态参数 <strong>v2.6</strong></h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>[eventName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>当 <code>eventName</code> 的值为 <code>focus</code> 时，<code>v-on:[eventName]</code> 将等价于 <code>v-on:focus</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令修饰符"><a aria-hidden="true" tabindex="-1" href="#指令修饰符"><span class="icon icon-link"></span></a>指令修饰符</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name"><span class="token namespace">v-on:</span>submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSubmit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> ...
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>.prevent</code> 修饰符告诉 <code>v-on</code> 指令对于触发的事件调用 <code>event.preventDefault()</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令缩写"><a aria-hidden="true" tabindex="-1" href="#指令缩写"><span class="icon icon-link"></span></a>指令缩写</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 完整语法 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 缩写 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 动态参数的缩写 (2.6.0+) --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">:[key]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="class-与-style-绑定"><a aria-hidden="true" tabindex="-1" href="#class-与-style-绑定"><span class="icon icon-link"></span></a>Class 与 Style 绑定</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="对象语法"><a aria-hidden="true" tabindex="-1" href="#对象语法"><span class="icon icon-link"></span></a>对象语法</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ active: isActive }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>传给 <code>v-bind:class</code> 一个对象，以动态地切换 <code>class</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="与普通的-class-属性共存"><a aria-hidden="true" tabindex="-1" href="#与普通的-class-属性共存"><span class="icon icon-link"></span></a>与普通的 class 属性共存</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>static<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> active: isActive,
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> 'text-danger': hasError
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> }<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 data</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">isActive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">false</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>结果渲染为</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>static active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="绑定的数据对象不必内联定义在模板里"><a aria-hidden="true" tabindex="-1" href="#绑定的数据对象不必内联定义在模板里"><span class="icon icon-link"></span></a>绑定的数据对象不必内联定义在模板里</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>classObject<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 data</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">classObject</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'text-danger'</span><span class="token operator">:</span> <span class="token boolean">false</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>结果渲染为</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>static active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="三元表达式"><a aria-hidden="true" tabindex="-1" href="#三元表达式"><span class="icon icon-link"></span></a>三元表达式</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> isActive ? activeClass : ''
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组"><a aria-hidden="true" tabindex="-1" href="#数组"><span class="icon icon-link"></span></a>数组</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> { active: isActive }, errorClass
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组语法"><a aria-hidden="true" tabindex="-1" href="#数组语法"><span class="icon icon-link"></span></a>数组语法</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> activeClass, errorClass
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 data</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">activeClass</span><span class="token operator">:</span> <span class="token string">'active'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">errorClass</span><span class="token operator">:</span> <span class="token string">'text-danger'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>结果渲染为</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>active text-danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内联样式"><a aria-hidden="true" tabindex="-1" href="#内联样式"><span class="icon icon-link"></span></a>内联样式</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> color: activeColor,
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> fontSize: fontSize + 'px'
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 data</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">activeColor</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">30</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>结果渲染为</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内联样式对象通常更好"><a aria-hidden="true" tabindex="-1" href="#内联样式对象通常更好"><span class="icon icon-link"></span></a>内联样式对象通常更好</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styleObject<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 data</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">styleObject</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'13px'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>同样的，对象语法常常结合返回对象的计算属性使用</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内联样式数组语法"><a aria-hidden="true" tabindex="-1" href="#内联样式数组语法"><span class="icon icon-link"></span></a>内联样式数组语法</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> baseStyles, overridingStyles
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内联样式多重值"><a aria-hidden="true" tabindex="-1" href="#内联样式多重值"><span class="icon icon-link"></span></a>内联样式多重值</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> display: ['-webkit-box', 'flex']
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="条件渲染"><a aria-hidden="true" tabindex="-1" href="#条件渲染"><span class="icon icon-link"></span></a>条件渲染</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-if"><a aria-hidden="true" tabindex="-1" href="#v-if"><span class="icon icon-link"></span></a>v-if</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>awesome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Vue is awesome!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span>Oh no 😢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="v-else-if"><a aria-hidden="true" tabindex="-1" href="#v-else-if"><span class="icon icon-link"></span></a>v-else-if</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type === 'A'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type === 'B'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type === 'C'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> Not A/B/C
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>@2.1.0</code> 新增，必须紧跟在带 <code>v-if</code> 或者 <code>v-else-if</code> 的元素之后</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="v-else"><a aria-hidden="true" tabindex="-1" href="#v-else"><span class="icon icon-link"></span></a>v-else</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Math.random() > 0.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 现在你看到我了
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 现在你看不见我了
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>v-else</code> 元素必须紧跟在带 <code>v-if</code> 或者 <code>v-else-if</code> 的元素的后面</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="template-上使用-v-if-条件渲染分组"><a aria-hidden="true" tabindex="-1" href="#template-上使用-v-if-条件渲染分组"><span class="icon icon-link"></span></a><template> 上使用 v-if 条件渲染分组</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ok<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Paragraph 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="用-key-管理可复用的元素"><a aria-hidden="true" tabindex="-1" href="#用-key-管理可复用的元素"><span class="icon icon-link"></span></a>用 key 管理可复用的元素</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>loginType === 'username'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>输入用户名<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>输入邮箱<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email-input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-show"><a aria-hidden="true" tabindex="-1" href="#v-show"><span class="icon icon-link"></span></a>v-show</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ok<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> Hello!
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>带有 <code>v-show</code> 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 <code>CSS</code> 属性 <code>display</code></p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="列表渲染"><a aria-hidden="true" tabindex="-1" href="#列表渲染"><span class="icon icon-link"></span></a>列表渲染</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-for"><a aria-hidden="true" tabindex="-1" href="#v-for"><span class="icon icon-link"></span></a>v-for</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in items<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ item.message }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> example1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example-1'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Foo'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Bar'</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-for-可选的第二个参数索引"><a aria-hidden="true" tabindex="-1" href="#v-for-可选的第二个参数索引"><span class="icon icon-link"></span></a>v-for 可选的第二个参数(索引)</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(item, index) in items<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line highlight-line"> {{ index }}
|
||
</span><span class="code-line"> {{ item.message }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 <code>data</code></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Foo'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Bar'</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>也可以用 <code>of</code> 替代 <code>in</code> 作为分隔符</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item of items<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="v-for-使用对象"><a aria-hidden="true" tabindex="-1" href="#v-for-使用对象"><span class="icon icon-link"></span></a>v-for 使用对象</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value in object<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ value }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 data</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">object</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'How to do lists in Vue'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">author</span><span class="token operator">:</span> <span class="token string">'Jane Doe'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">publishedAt</span><span class="token operator">:</span> <span class="token string">'2016-04-10'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>渲染结果</p>
|
||
<pre><code class="code-highlight"><span class="code-line">How to do lists in Vue
|
||
</span><span class="code-line">Jane Doe
|
||
</span><span class="code-line">2016-04-10
|
||
</span></code></pre>
|
||
<p>提供第二个的参数为 property 名称 (也就是键名)</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(value, name) in object<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ name }}: {{ value }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>还可以用第三个参数作为索引</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(value,name,index) in object<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ index }}. {{ name }}: {{ value }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-forv-if"><a aria-hidden="true" tabindex="-1" href="#v-forv-if"><span class="icon icon-link"></span></a>v-for/v-if</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>todo in todos<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>!todo.isComplete<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ todo }}
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>只渲染未完成的 todo，下面加上 <code>v-else</code> 示例</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>todos.length<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>todo in todos<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ todo }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span>No todos left!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>注意: <code>v-for</code> 和 <code>v-if</code> 不推荐一起使用<a href="https://v2.cn.vuejs.org/v2/guide/conditional.html#v-if-%E4%B8%8E-v-for-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8">参考官方文档</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组件上使用-v-for"><a aria-hidden="true" tabindex="-1" href="#组件上使用-v-for"><span class="icon icon-link"></span></a>组件上使用 v-for</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>my-component</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(item, index) in items<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>my-component</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code>2.2.0+</code> 的版本里，当在组件上使用 <code>v-for</code> 时，<code>key</code> 现在是必须的</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="事件处理"><a aria-hidden="true" tabindex="-1" href="#事件处理"><span class="icon icon-link"></span></a>事件处理</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="监听事件"><a aria-hidden="true" tabindex="-1" href="#监听事件"><span class="icon icon-link"></span></a>监听事件</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>counter += 1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> +1
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>按钮已被点击 {{ counter }} 次。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> example1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example-1'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">counter</span><span class="token operator">:</span> <span class="token number">0</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="事件处理方法"><a aria-hidden="true" tabindex="-1" href="#事件处理方法"><span class="icon icon-link"></span></a>事件处理方法</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token comment"><!-- `greet` 是在下面定义的方法名 --></span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>greet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 你好
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> example2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example-2'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Vue.js'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 在 `methods` 对象中定义方法</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">greet</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// `this` 在方法里指向当前 Vue 实例</span>
|
||
</span><span class="code-line"> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">+</span> <span class="token string">'!'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token comment">// `event` 是原生 DOM 事件</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">alert</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">tagName</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>也可以用 JavaScript 直接调用方法</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">example2<span class="token punctuation">.</span><span class="token method function property-access">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// => 'Hello Vue.js!'</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="内联处理器中的方法"><a aria-hidden="true" tabindex="-1" href="#内联处理器中的方法"><span class="icon icon-link"></span></a>内联处理器中的方法</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>say('hi')<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 弹出 hi
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>say('what')<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 弹出 what
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example-3'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> <span class="token function-variable function">say</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">alert</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>访问原始的 DOM 事件，用特殊变量 $event</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>say('what', $event)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 提交
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">say</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">message<span class="token punctuation">,</span> event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 现在我们可以访问原生事件对象</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> event<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token function">alert</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="事件修饰符"><a aria-hidden="true" tabindex="-1" href="#事件修饰符"><span class="icon icon-link"></span></a>事件修饰符</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 阻止单击事件继续传播 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.stop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doThis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 提交事件不再重载页面 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name"><span class="token namespace">v-on:</span>submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 修饰符可以串联 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.stop.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doThat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 只有修饰符 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name"><span class="token namespace">v-on:</span>submit.prevent</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 添加事件监听器时使用事件捕获模式 --></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 即内部元素触发的事件先在此处理 --></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 然后交由内部元素进行处理 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.capture</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doThis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 当 event.target 是当前元素自身时触发 --></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 即事件不是从内部元素触发的 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.self</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doThat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 点击事件将只会触发一次 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.once</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doThis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="事件修饰符-passive"><a aria-hidden="true" tabindex="-1" href="#事件修饰符-passive"><span class="icon icon-link"></span></a>事件修饰符 passive</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 滚动事件的默认行为(即滚动行为)会立即触发 --></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 而不会等待 `onScroll` 完成 --></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 包含 event.preventDefault() 的情况 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name"><span class="token namespace">v-on:</span>scroll.passive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onScroll<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> ...
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>这个 <code>.passive</code> <a href="#v-on-%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">修饰符</a>尤其能够提升移动端的性能。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="按键修饰符"><a aria-hidden="true" tabindex="-1" href="#按键修饰符"><span class="icon icon-link"></span></a>按键修饰符</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 在 key 是 Enter 时调用 vm.submit() --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name"><span class="token namespace">v-on:</span>keyup.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 在 key 是 PageDown 时被调用 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name"><span class="token namespace">v-on:</span>keyup.page-down</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onPageDown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- Alt + C --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name"><span class="token namespace">v-on:</span>keyup.alt.67</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clear<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- Ctrl + Click --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.ctrl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="exact-修饰符"><a aria-hidden="true" tabindex="-1" href="#exact-修饰符"><span class="icon icon-link"></span></a>.exact 修饰符</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 即使 Alt 或 Shift 被一同按下时也会触发 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.ctrl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onClick<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 有且只有 Ctrl 被按下的时候才触发 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.ctrl.exact</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ctrlClick<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 没有任何系统修饰符被按下的时候才触发 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.exact</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onClick<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="计算属性和侦听器"><a aria-hidden="true" tabindex="-1" href="#计算属性和侦听器"><span class="icon icon-link"></span></a>计算属性和侦听器</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="基础例子-1"><a aria-hidden="true" tabindex="-1" href="#基础例子-1"><span class="icon icon-link"></span></a>基础例子</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Original message: "{{ message }}"<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 计算的反向消息： "{{ reversedMessage }}"
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 计算属性的 getter</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">reversedMessage</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// `this` 指向 vm 实例</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="计算属性缓存-vs-方法"><a aria-hidden="true" tabindex="-1" href="#计算属性缓存-vs-方法"><span class="icon icon-link"></span></a>计算属性缓存 vs 方法</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 计算的反向消息："{{ reversedMessage() }}"
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>在组件中，我们可以将同一函数定义为一个方法而不是一个计算属性</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">reversedMessage</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>两种方式的最终结果确实是完全相同的。然而，不同的是<strong>计算属性是基于它们的响应式依赖进行缓存的</strong>。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="计算属性-vs-侦听属性"><a aria-hidden="true" tabindex="-1" href="#计算属性-vs-侦听属性"><span class="icon icon-link"></span></a>计算属性 vs 侦听属性</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ fullName }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#demo'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'Bar'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fullName</span><span class="token operator">:</span> <span class="token string">'Foo Bar'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">firstName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">fullName</span> <span class="token operator">=</span>
|
||
</span><span class="code-line"> val <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">lastName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">fullName</span> <span class="token operator">=</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> val
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>上面代码是命令式且重复的。将它与计算属性的版本进行比较：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#demo'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'Bar'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">fullName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span>
|
||
</span><span class="code-line"> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="计算属性的-setter"><a aria-hidden="true" tabindex="-1" href="#计算属性的-setter"><span class="icon icon-link"></span></a>计算属性的 setter</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fullName</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// getter</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// setter</span>
|
||
</span><span class="code-line"> <span class="token keyword">var</span> names <span class="token operator">=</span> newValue<span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token operator">=</span> names<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span> <span class="token operator">=</span> names<span class="token punctuation">[</span>names<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="表单输入绑定"><a aria-hidden="true" tabindex="-1" href="#表单输入绑定"><span class="icon icon-link"></span></a>表单输入绑定</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="文本-1"><a aria-hidden="true" tabindex="-1" href="#文本-1"><span class="icon icon-link"></span></a>文本</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>msg<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>编辑我<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>msg is: {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="多行文本"><a aria-hidden="true" tabindex="-1" href="#多行文本"><span class="icon icon-link"></span></a>多行文本</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Multiline message is:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>添加多行<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="复选框"><a aria-hidden="true" tabindex="-1" href="#复选框"><span class="icon icon-link"></span></a>复选框</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ checked}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="多个复选框"><a aria-hidden="true" tabindex="-1" href="#多个复选框"><span class="icon icon-link"></span></a>多个复选框</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Jack<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkedNames<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>john<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>John<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkedNames<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>john<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>John<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mike<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mike<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkedNames<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mike<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mike<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Checked names: {{ checkedNames }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如下 data</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">checkedNames</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="单选按钮"><a aria-hidden="true" tabindex="-1" href="#单选按钮"><span class="icon icon-link"></span></a>单选按钮</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>One<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>picked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Two<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>picked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Picked: {{ picked }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example-4'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">picked</span><span class="token operator">:</span> <span class="token string">''</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选择框"><a aria-hidden="true" tabindex="-1" href="#选择框"><span class="icon icon-link"></span></a>选择框</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Selected: {{ selected }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token string">''</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选择框数组"><a aria-hidden="true" tabindex="-1" href="#选择框数组"><span class="icon icon-link"></span></a>选择框(数组)</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Selected: {{ selected }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="v-for-渲染的动态选项"><a aria-hidden="true" tabindex="-1" href="#v-for-渲染的动态选项"><span class="icon icon-link"></span></a>v-for 渲染的动态选项</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option in options<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option.value<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ option.text }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Selected: {{ selected }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'One'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Two'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Three'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="值绑定"><a aria-hidden="true" tabindex="-1" href="#值绑定"><span class="icon icon-link"></span></a>值绑定</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 当选中时，pc 为字符串 "a" --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pc<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"><!-- toggle 为 true 或 false --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toggle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 选中第一个选项时selected为字符串 abc --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>abc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ABC<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="单选按钮-1"><a aria-hidden="true" tabindex="-1" href="#单选按钮-1"><span class="icon icon-link"></span></a>单选按钮</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pick<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>当选中时</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">pick</span> <span class="token operator">===</span> vm<span class="token punctuation">.</span><span class="token property-access">a</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="复选框-1"><a aria-hidden="true" tabindex="-1" href="#复选框-1"><span class="icon icon-link"></span></a>复选框</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toggle<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">true-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yes<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">false-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// 当选中时</span>
|
||
</span><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">toggle</span> <span class="token operator">===</span> <span class="token string">'yes'</span>
|
||
</span><span class="code-line"><span class="token comment">// 当没有选中时</span>
|
||
</span><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">toggle</span> <span class="token operator">===</span> <span class="token string">'no'</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选择框的选项"><a aria-hidden="true" tabindex="-1" href="#选择框的选项"><span class="icon icon-link"></span></a>选择框的选项</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token comment"><!-- 内联对象字面量 --></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ number: 123 }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 123
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>当选中时</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">typeof</span> vm<span class="token punctuation">.</span><span class="token property-access">selected</span> <span class="token comment">// => 'object'</span>
|
||
</span><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token property-access">number</span> <span class="token comment">// => 123</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="修饰符"><a aria-hidden="true" tabindex="-1" href="#修饰符"><span class="icon icon-link"></span></a>修饰符</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- lazy:在“change”时而非“input”时更新 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model.lazy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>msg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"><!-- number:自动将用户的输入值转为数值类型 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model.number</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"><!-- trim:自动过滤用户输入的首尾空白字符 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>msg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="组件基础"><a aria-hidden="true" tabindex="-1" href="#组件基础"><span class="icon icon-link"></span></a>组件基础</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="单文件组件"><a aria-hidden="true" tabindex="-1" href="#单文件组件"><span class="icon icon-link"></span></a>单文件组件</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<ul class="style-timeline">
|
||
<li>
|
||
<p>将 <code>HTML</code>/<code>CSS</code>/<code>JS</code> 三部分存放到一个 <code>Hello.vue</code> 文件中</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ title }} World!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Hello'</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'Hello'</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">greeting</span><span class="token operator">:</span> <span class="token string">"Hello"</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">p</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">em</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p>使用 <code>Hello.vue</code> 组件</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Vue</span></span> <span class="token keyword module">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Hello</span></span> <span class="token keyword module">from</span> <span class="token string">"./Hello"</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Hello</span> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Hello</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>aaaa'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Hello</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</li>
|
||
</ul>
|
||
<!--rehype:className=style-timeline-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="基本示例"><a aria-hidden="true" tabindex="-1" href="#基本示例"><span class="icon icon-link"></span></a>基本示例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'button-counter'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <button v-on:click="count++">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> 你点击了我 {{ count }} 次
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </button>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>组件是可复用的 <code>Vue</code> 实例</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>components-demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#components-demo'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>组件的复用</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>components-demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="单个根元素"><a aria-hidden="true" tabindex="-1" href="#单个根元素"><span class="icon icon-link"></span></a>单个根元素</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'blog-post'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'post'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> <div class="blog-post">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <h3>{{ post.title }}</h3>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div v-html="post.content"></div>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </div>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post in posts<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post.id<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>post</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="向子组件传递数据"><a aria-hidden="true" tabindex="-1" href="#向子组件传递数据"><span class="icon icon-link"></span></a>向子组件传递数据</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'blog-post'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'title'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'<h3>{{ title }}</h3>'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>当值传递给一个 <code>prop</code> <code>attribute</code> 的时候，变成了组件实例的一个 <code>property</code></p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>写博客<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>如此有趣<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="data-必须是一个函数"><a aria-hidden="true" tabindex="-1" href="#data-必须是一个函数"><span class="icon icon-link"></span></a><code>data</code> 必须是一个函数</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>组件的 <code>data</code> 选项必须是一个函数</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="监听子组件事件"><a aria-hidden="true" tabindex="-1" href="#监听子组件事件"><span class="icon icon-link"></span></a>监听子组件事件</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'blog-post'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'post'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div class="blog-post">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <h3>{{ post.title }}</h3>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <button
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> v-on:click="$emit('enlarge-txt')"
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> >放大文字
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </button>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div v-html="post.content"></div>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </div>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">...</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enlarge-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>postFontSize += 0.1<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>可以使用 <code>$emit</code> 的第二个参数来提供这个值</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$emit('enlarge-text', 0.1)<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> Enlarge text
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>通过 <code>$event</code> 访问到被抛出的这个值</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">...</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enlarge-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>postFontSize += $event<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>如果这个事件处理函数是一个方法</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">...</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enlarge-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onEnlargeText<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>那么这个值将会作为第一个参数传入这个方法</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">onEnlargeText</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">enlargeAmount</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">postFontSize</span> <span class="token operator">+=</span> enlargeAmount
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="在组件上使用-v-model"><a aria-hidden="true" tabindex="-1" href="#在组件上使用-v-model"><span class="icon icon-link"></span></a>在组件上使用 v-model</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<p>自定义事件也可以用于创建支持 <code>v-model</code> 的自定义输入组件。</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>等价于</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText = $event.target.value<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>当用在组件上时，v-model 则会这样：</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>custom-input</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText = $event<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>custom-input</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>为了让它正常工作，这个组件内的 <input> 必须：</p>
|
||
<ul>
|
||
<li>将其 <code>value</code> attribute 绑定到一个名叫 <code>value</code> 的 <code>prop</code> 上</li>
|
||
<li>在其 <code>input</code> 事件被触发时，将新的值通过自定义的 <code>input</code> 事件抛出</li>
|
||
</ul>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'custom-input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'value'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <input
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> v-bind:value="value"
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> v-on:input="$emit('input', $event.target.value)"
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> >
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>现在 <code>v-model</code> 就应该可以在这个组件上完美地工作起来了</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>custom-input</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>custom-input</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="通过插槽分发内容"><a aria-hidden="true" tabindex="-1" href="#通过插槽分发内容"><span class="icon icon-link"></span></a>通过插槽分发内容</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert-box</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 发生了不好的事情。
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert-box</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'alert-box'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div class="demo-alert-box">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <strong>Error!</strong>
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> <slot></slot>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </div>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="动态组件示例"><a aria-hidden="true" tabindex="-1" href="#动态组件示例"><span class="icon icon-link"></span></a>动态组件示例</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-component-demo<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab in tabs<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['tab-button', { active: currentTab === tab }]<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentTab = tab<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ tab }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>component</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentTabComponent<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>component</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">"tab-home"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">"<div>Home component</div>"</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">"tab-posts"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">"<div>Posts component</div>"</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">"tab-archive"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">"<div>Archive component</div>"</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">"#dynamic-component-demo"</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">currentTab</span><span class="token operator">:</span> <span class="token string">"Home"</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">tabs</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Home"</span><span class="token punctuation">,</span> <span class="token string">"Posts"</span><span class="token punctuation">,</span> <span class="token string">"Archive"</span><span class="token punctuation">]</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">currentTabComponent</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token string">"tab-"</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">currentTab</span><span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="解析-dom-模板时的注意事项"><a aria-hidden="true" tabindex="-1" href="#解析-dom-模板时的注意事项"><span class="icon icon-link"></span></a>解析 DOM 模板时的注意事项</h3><div class="wrap-body">
|
||
<p>有些 HTML 元素，诸如 <code><ul></code>、<code><ol></code>、<code><table></code> 和 <code><select></code>，对于哪些元素可以出现在其内部是有严格限制的。有些元素，诸如 <code><li></code>、<code><tr></code> 和 <code><option></code>，只能出现在其它某些特定的元素内部</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post-row</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post-row</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p><code><blog-post-row></code> 会被作为无效的内容提升到外部</p>
|
||
<hr>
|
||
<p>如果我们从以下来源使用模板的话，这条限制是不存在的</p>
|
||
<ul class="style-round">
|
||
<li>字符串 (例如：<code>template: '...'</code>)</li>
|
||
<li>单文件组件 (<code>.vue</code>)</li>
|
||
<li><code><script type="text/x-template"></code></li>
|
||
</ul>
|
||
<!--rehype:className=style-round-->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="过渡--动画"><a aria-hidden="true" tabindex="-1" href="#过渡--动画"><span class="icon icon-link"></span></a>过渡 & 动画</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="单元素组件的过渡"><a aria-hidden="true" tabindex="-1" href="#单元素组件的过渡"><span class="icon icon-link"></span></a>单元素/组件的过渡</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show = !show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 切换
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fade<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.fade-enter-active</span><span class="token punctuation">,</span> <span class="token class">.fade-leave-active</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transition</span><span class="token punctuation">:</span> opacity <span class="token number">.5</span><span class="token unit">s</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token comment">/* .fade-leave-active 低于 2.1.8 版本 */</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.fade-enter</span><span class="token punctuation">,</span> <span class="token class">.fade-leave-to</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="css-过渡"><a aria-hidden="true" tabindex="-1" href="#css-过渡"><span class="icon icon-link"></span></a>CSS 过渡</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show = !show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 切换渲染
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slide-fade<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token comment">/* 可以设置不同的进入和离开动画 */</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token comment">/* 设置持续时间和动画函数 */</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.slide-fade-enter-active</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span><span class="token unit">s</span> ease<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.slide-fade-leave-active</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.8</span><span class="token unit">s</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token comment">/* .slide-fade-leave-active 用于 2.1.8 以下版本 */</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.slide-fade-enter</span><span class="token punctuation">,</span> <span class="token class">.slide-fade-leave-to</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="css-动画"><a aria-hidden="true" tabindex="-1" href="#css-动画"><span class="icon icon-link"></span></a>CSS 动画</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show = !show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换展示<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bounce<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>切换内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token selector"><span class="token class">.bounce-enter-active</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">animation</span><span class="token punctuation">:</span> bounce-in <span class="token number">.5</span><span class="token unit">s</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token selector"><span class="token class">.bounce-leave-active</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">animation</span><span class="token punctuation">:</span> bounce-in <span class="token number">.5</span><span class="token unit">s</span> reverse<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token atrule"><span class="token rule">@keyframes</span> bounce-in</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">0%</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">50%</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">1.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">100%</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"><span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="过渡的类名"><a aria-hidden="true" tabindex="-1" href="#过渡的类名"><span class="icon icon-link"></span></a>过渡的类名</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-enter</code></td><td align="left">定义进入过渡的开始状态 <a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>v-enter-active</code></td><td align="left">定义进入过渡生效时的状态 <a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>v-enter-to</code> <em>(2.1.8)</em></td><td align="left">定义进入过渡的结束状态 <a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>v-leave</code></td><td align="left">定义离开过渡的开始状态 <a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>v-leave-active</code></td><td align="left">定义离开过渡生效时的状态 <a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>v-leave-to</code> <em>(2.1.8)</em></td><td align="left">定义离开过渡的结束状态 <a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr></tbody></table>
|
||
<p>如果你使用了 <code><transition name="my-tran"></code>，那么 <code>v-enter</code> 会替换为 <code>my-tran-enter</code>。</p>
|
||
<h4 id="自定义过渡的类名"><a aria-hidden="true" tabindex="-1" href="#自定义过渡的类名"><span class="icon icon-link"></span></a>自定义过渡的类名</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>enter-class</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>enter-active-class</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>enter-to-class</code> <em>(2.1.8+)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>leave-class</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>leave-active-class</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr><tr><td align="left"><code>leave-to-class</code> <em>(2.1.8+)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">#</a></td></tr></tbody></table>
|
||
<hr>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-classes-transition<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">enter-active-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animated tada<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">leave-active-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>animated bounceOutRight<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>hello<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="显性的过渡持续时间"><a aria-hidden="true" tabindex="-1" href="#显性的过渡持续时间"><span class="icon icon-link"></span></a>显性的过渡持续时间</h3><div class="wrap-body">
|
||
<p><code><transition></code> 组件上的 <code>duration</code> prop 定制一个显性的过渡持续时间 (以毫秒计)：</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span> <span class="token attr-name">:duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> ...
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>你也可以定制进入和移出的持续时间：</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span> <span class="token attr-name">:duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> enter: 500,
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> leave: 800
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value">}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> ...
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="初始渲染的过渡"><a aria-hidden="true" tabindex="-1" href="#初始渲染的过渡"><span class="icon icon-link"></span></a>初始渲染的过渡</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>可以通过 <code>appear</code> attribute 设置节点在初始渲染的过渡</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span> <span class="token attr-name">appear</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token comment"><!-- ... --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">appear</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">appear-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-appear-class<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">appear-to-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-appear-to-class<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">appear-active-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-appear-active-class<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token comment"><!-- ... --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>自定义 JavaScript 钩子：</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">appear</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>before-appear</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>customBeforeAppearHook<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>appear</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>customAppearHook<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>after-appear</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>customAfterAppearHook<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>appear-cancelled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>customAppearCancelledHook<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token comment"><!-- ... --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>无论是 <code>appear</code> attribute 还是 <code>v-on:appear</code> 钩子都会生成初始渲染过渡</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="javascript-钩子"><a aria-hidden="true" tabindex="-1" href="#javascript-钩子"><span class="icon icon-link"></span></a>JavaScript 钩子</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>before-enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>beforeEnter<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>enter<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>after-enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>afterEnter<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enter-cancelled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>enterCancelled<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag">
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>before-leave</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>beforeLeave<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>leave</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leave<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>after-leave</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>afterLeave<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>leave-cancelled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leaveCancelled<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token comment"><!-- ... --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>钩子函数可以结合 CSS <code>transitions</code>/<code>animations</code> 使用，也可以单独使用</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="列表的进入离开过渡"><a aria-hidden="true" tabindex="-1" href="#列表的进入离开过渡"><span class="icon icon-link"></span></a>列表的进入/离开过渡</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>add<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>添加<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>remove<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>transition-group</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">tag</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>p<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in items<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> {{ item }}
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>transition-group</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">items</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">nextNum</span><span class="token operator">:</span> <span class="token number">10</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">randomIndex</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">floor</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">items</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">add</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">items</span><span class="token punctuation">.</span><span class="token method function property-access">splice</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">randomIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">nextNum</span><span class="token operator">++</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function-variable function">remove</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">items</span><span class="token punctuation">.</span><span class="token method function property-access">splice</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">randomIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.list-item</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.list-enter-active</span><span class="token punctuation">,</span> <span class="token class">.list-leave-active</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">1</span><span class="token unit">s</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token comment">/* .list-leave-active 适用于 2.1.8 以下版本 */</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.list-enter</span><span class="token punctuation">,</span> <span class="token class">.list-leave-to</span></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="vue-2-api-参考"><a aria-hidden="true" tabindex="-1" href="#vue-2-api-参考"><span class="icon icon-link"></span></a>Vue 2 API 参考</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="全局配置"><a aria-hidden="true" tabindex="-1" href="#全局配置"><span class="icon icon-link"></span></a>全局配置</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>silent</code></td><td align="left">取消所有的日志与警告 <a href="https://v2.cn.vuejs.org/v2/api/#silent">#</a></td></tr><tr><td align="left"><code>optionMergeStrategies</code></td><td align="left">自定义合并策略的选项 <a href="https://v2.cn.vuejs.org/v2/api/#optionMergeStrategies">#</a></td></tr><tr><td align="left"><code>devtools</code></td><td align="left">是否允许 <a href="https://github.com/vuejs/vue-devtools">devtools</a> 检查 <a href="https://v2.cn.vuejs.org/v2/api/#devtools">#</a></td></tr><tr><td align="left"><code>errorHandler</code></td><td align="left">未捕获错误的处理函数 <em>(开发模式生效)</em> <a href="https://v2.cn.vuejs.org/v2/api/#errorHandler">#</a></td></tr><tr><td align="left"><code>warnHandler</code> <em>(2.4.0)</em></td><td align="left">运行时警告处理函数 <a href="https://v2.cn.vuejs.org/v2/api/#warnHandler">#</a></td></tr><tr><td align="left"><code>ignoredElements</code></td><td align="left">忽略 Vue 之外的 <em>(自定义元素)</em> <a href="https://v2.cn.vuejs.org/v2/api/#ignoredElements">#</a></td></tr><tr><td align="left"><code>keyCodes</code></td><td align="left"><code>v-on</code> 自定义键位别名 <a href="https://v2.cn.vuejs.org/v2/api/#keyCodes">#</a></td></tr><tr><td align="left"><code>performance</code> <em>(2.2.0)</em></td><td align="left">性能追踪 <a href="https://v2.cn.vuejs.org/v2/api/#performance">#</a></td></tr><tr><td align="left"><code>productionTip</code> <em>(2.2.0)</em></td><td align="left">是否生成生产提示 <a href="https://v2.cn.vuejs.org/v2/api/#productionTip">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="全局-api"><a aria-hidden="true" tabindex="-1" href="#全局-api"><span class="icon icon-link"></span></a>全局 API</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>Vue.extend</code></td><td align="left">Vue 构造器，创建一个“子类” <a href="https://v2.cn.vuejs.org/v2/api/#Vue-extend">#</a></td></tr><tr><td align="left"><code>Vue.nextTick</code></td><td align="left">执行延迟回调 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-nextTick">#</a></td></tr><tr><td align="left"><code>Vue.set</code></td><td align="left">向响应式对象中添加一个属性 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-set">#</a></td></tr><tr><td align="left"><code>Vue.delete</code></td><td align="left">删除对象的 property <a href="https://v2.cn.vuejs.org/v2/api/#Vue-delete">#</a></td></tr><tr><td align="left"><code>Vue.directive</code></td><td align="left">注册或获取全局指令 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-directive">#</a></td></tr><tr><td align="left"><code>Vue.filter</code></td><td align="left">注册或获取全局过滤器 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-filter">#</a></td></tr><tr><td align="left"><code>Vue.component</code></td><td align="left">注册或获取全局组件 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-component">#</a></td></tr><tr><td align="left"><code>Vue.use</code></td><td align="left">安装 Vue.js 插件 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-use">#</a></td></tr><tr><td align="left"><code>Vue.mixin</code></td><td align="left">全局注册一个混入 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-mixin">#</a></td></tr><tr><td align="left"><code>Vue.compile</code></td><td align="left">将模板字符串编译成 render 函数 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-compile">#</a></td></tr><tr><td align="left"><code>Vue.observable</code> <em>(2.6.0)</em></td><td align="left">让一个对象可响应 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-observable">#</a></td></tr><tr><td align="left"><code>Vue.version</code></td><td align="left">Vue 安装版本号 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-version">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数据"><a aria-hidden="true" tabindex="-1" href="#数据"><span class="icon icon-link"></span></a>数据</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>data</code></td><td align="left">实例的数据对象 <a href="https://v2.cn.vuejs.org/v2/api/#data">#</a></td></tr><tr><td align="left"><code>props</code></td><td align="left">接收来自父组件的数据 <a href="https://v2.cn.vuejs.org/v2/api/#props">#</a></td></tr><tr><td align="left"><code>propsData</code></td><td align="left">创建实例时传递 props <a href="https://v2.cn.vuejs.org/v2/api/#propsData">#</a></td></tr><tr><td align="left"><code>computed</code></td><td align="left">计算属性将被混入到 Vue 实例中 <a href="https://v2.cn.vuejs.org/v2/api/#computed">#</a></td></tr><tr><td align="left"><code>methods</code></td><td align="left">将被混入到 Vue 实例中 <a href="https://v2.cn.vuejs.org/v2/api/#methods">#</a></td></tr><tr><td align="left"><code>watch</code></td><td align="left">对象键是观察的表达式，值是回调函数 <a href="https://v2.cn.vuejs.org/v2/api/#watch">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="dom"><a aria-hidden="true" tabindex="-1" href="#dom"><span class="icon icon-link"></span></a>DOM</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>el</code></td><td align="left">实例的挂载目标 <a href="https://v2.cn.vuejs.org/v2/api/#el">#</a></td></tr><tr><td align="left"><code>template</code></td><td align="left">字符串模板作为 Vue 实例的标识使用 <a href="https://v2.cn.vuejs.org/v2/api/#template">#</a></td></tr><tr><td align="left"><code>render</code></td><td align="left">字符串模板的代替方案 <a href="https://v2.cn.vuejs.org/v2/api/#render">#</a></td></tr><tr><td align="left"><code>renderError</code> <em>(2.2.0)</em></td><td align="left"><code>render</code>错误时提供另一种渲染 <a href="https://v2.cn.vuejs.org/v2/api/#renderError">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="生命周期钩子"><a aria-hidden="true" tabindex="-1" href="#生命周期钩子"><span class="icon icon-link"></span></a>生命周期钩子</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>beforeCreate</code></td><td align="left">实例初始化之后 <a href="https://v2.cn.vuejs.org/v2/api/#beforeCreate">#</a></td></tr><tr><td align="left"><code>created</code></td><td align="left">实例创建完成后被立即同步调用 <a href="https://v2.cn.vuejs.org/v2/api/#created">#</a></td></tr><tr><td align="left"><code>beforeMount</code></td><td align="left">在挂载开始之前被调用 <a href="https://v2.cn.vuejs.org/v2/api/#beforeMount">#</a></td></tr><tr><td align="left"><code>mounted</code></td><td align="left">实例被挂载后调用 <a href="https://v2.cn.vuejs.org/v2/api/#mounted">#</a></td></tr><tr><td align="left"><code>beforeUpdate</code></td><td align="left">数据改变后 DOM 更新之前调用 <a href="https://v2.cn.vuejs.org/v2/api/#beforeUpdate">#</a></td></tr><tr><td align="left"><code>updated</code></td><td align="left">数据更改更新完毕之后被调用 <a href="https://v2.cn.vuejs.org/v2/api/#updated">#</a></td></tr><tr><td align="left"><code>activated</code></td><td align="left">keep-alive 缓存组件激活时调用 <a href="https://v2.cn.vuejs.org/v2/api/#activated">#</a></td></tr><tr><td align="left"><code>deactivated</code></td><td align="left">keep-alive 缓存的组件失活时调用 <a href="https://v2.cn.vuejs.org/v2/api/#deactivated">#</a></td></tr><tr><td align="left"><code>beforeDestroy</code></td><td align="left">实例销毁之前调用 <a href="https://v2.cn.vuejs.org/v2/api/#beforeDestroy">#</a></td></tr><tr><td align="left"><code>destroyed</code></td><td align="left">实例销毁后调用 <a href="https://v2.cn.vuejs.org/v2/api/#destroyed">#</a></td></tr><tr><td align="left"><code>errorCaptured</code> <em>(2.5.0)</em></td><td align="left">来自后代组件的错误时被调用 <a href="https://v2.cn.vuejs.org/v2/api/#errorCaptured">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="资源"><a aria-hidden="true" tabindex="-1" href="#资源"><span class="icon icon-link"></span></a>资源</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>directives</code></td><td align="left">包含 Vue 实例可用指令的哈希表 <a href="https://v2.cn.vuejs.org/v2/api/#directives">#</a></td></tr><tr><td align="left"><code>filters</code></td><td align="left">包含 Vue 实例可用过滤器的哈希表 <a href="https://v2.cn.vuejs.org/v2/api/#filters">#</a></td></tr><tr><td align="left"><code>components</code></td><td align="left">包含 Vue 实例可用组件的哈希表 <a href="https://v2.cn.vuejs.org/v2/api/#components">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合"><a aria-hidden="true" tabindex="-1" href="#组合"><span class="icon icon-link"></span></a>组合</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>parent</code></td><td align="left">指定已创建的实例之父实例 <a href="https://v2.cn.vuejs.org/v2/api/#parent">#</a></td></tr><tr><td align="left"><code>mixins</code></td><td align="left">接收一个混入对象的数组 <a href="https://v2.cn.vuejs.org/v2/api/#mixins">#</a></td></tr><tr><td align="left"><code>extends</code></td><td align="left">声明扩展另一个组件 <a href="https://v2.cn.vuejs.org/v2/api/#extends">#</a></td></tr><tr><td align="left"><code>provide/inject</code> <em>(2.2.0)</em></td><td align="left">祖组件向所有子孙后代注入依赖 <a href="https://v2.cn.vuejs.org/v2/api/#provide-inject">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="其它"><a aria-hidden="true" tabindex="-1" href="#其它"><span class="icon icon-link"></span></a>其它</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>name</code></td><td align="left">允许组件模板递归地调用自身 <a href="https://v2.cn.vuejs.org/v2/api/#name">#</a></td></tr><tr><td align="left"><code>delimiters</code></td><td align="left">改变纯文本插入分隔符 <a href="https://v2.cn.vuejs.org/v2/api/#delimiters">#</a></td></tr><tr><td align="left"><code>functional</code></td><td align="left">使组件无状态和无实例 <a href="https://v2.cn.vuejs.org/v2/api/#functional">#</a></td></tr><tr><td align="left"><code>model</code> <em>(2.2.0)</em></td><td align="left">使用 v-model 时定制 prop 和 event <a href="https://v2.cn.vuejs.org/v2/api/#model">#</a></td></tr><tr><td align="left"><code>inheritAttrs</code> <em>(2.4.0)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#inheritAttrs">#</a></td></tr><tr><td align="left"><code>comments</code> <em>(2.4.0)</em></td><td align="left">是否保留模板中的<code>HTML</code>注释 <a href="https://v2.cn.vuejs.org/v2/api/#comments">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="实例方法--数据"><a aria-hidden="true" tabindex="-1" href="#实例方法--数据"><span class="icon icon-link"></span></a>实例方法 / 数据</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$watch</code></td><td align="left">观察 Vue 实例上的一个表达式<br>或者一个函数计算结果的变化 <a href="https://v2.cn.vuejs.org/v2/api/#vm-watch">#</a></td></tr><tr><td align="left"><code>vm.$set</code></td><td align="left">全局 <code>Vue.set</code> 的别名 <a href="https://v2.cn.vuejs.org/v2/api/#vm-set">#</a></td></tr><tr><td align="left"><code>vm.$delete</code></td><td align="left">全局 <code>Vue.delete</code> 的别名 <a href="https://v2.cn.vuejs.org/v2/api/#vm-delete">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="实例-property"><a aria-hidden="true" tabindex="-1" href="#实例-property"><span class="icon icon-link"></span></a>实例 property</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$data</code></td><td align="left">观察的数据对象 <a href="https://v2.cn.vuejs.org/v2/api/#vm-data">#</a></td></tr><tr><td align="left"><code>vm.$props</code> <em>(2.2.0)</em></td><td align="left">组件接收的 props 对象 <a href="https://v2.cn.vuejs.org/v2/api/#vm-props">#</a></td></tr><tr><td align="left"><code>vm.$el</code></td><td align="left">实例使用的根 DOM 元素 <a href="https://v2.cn.vuejs.org/v2/api/#vm-el">#</a></td></tr><tr><td align="left"><code>vm.$options</code></td><td align="left">实例的初始化选项 <a href="https://v2.cn.vuejs.org/v2/api/#vm-options">#</a></td></tr><tr><td align="left"><code>vm.$parent</code></td><td align="left">父实例 <a href="https://v2.cn.vuejs.org/v2/api/#vm-parent">#</a></td></tr><tr><td align="left"><code>vm.$root</code></td><td align="left">当前组件树的根实例 <a href="https://v2.cn.vuejs.org/v2/api/#vm-root">#</a></td></tr><tr><td align="left"><code>vm.$children</code></td><td align="left">当前实例的直接子组件 <a href="https://v2.cn.vuejs.org/v2/api/#vm-children">#</a></td></tr><tr><td align="left"><code>vm.$slots</code></td><td align="left">访问被插槽分发的内容 <a href="https://v2.cn.vuejs.org/v2/api/#vm-slots">#</a></td></tr><tr><td align="left"><code>vm.$scopedSlots</code> <em>(2.1.0)</em></td><td align="left">访问作用域插槽 <a href="https://v2.cn.vuejs.org/v2/api/#vm-scopedSlots">#</a></td></tr><tr><td align="left"><code>vm.$refs</code></td><td align="left">DOM 元素和组件实例 <a href="https://v2.cn.vuejs.org/v2/api/#vm-refs">#</a></td></tr><tr><td align="left"><code>vm.$isServer</code></td><td align="left">是否运行于服务器 <a href="https://v2.cn.vuejs.org/v2/api/#vm-isServer">#</a></td></tr><tr><td align="left"><code>vm.$attrs</code> <em>(2.4.0)</em></td><td align="left">包含父作用域中不作为 prop 被识别的属性绑定 ( <a href="https://v2.cn.vuejs.org/v2/api/#vm-attrs">#</a></td></tr><tr><td align="left"><code>vm.$listeners</code> <em>(2.4.0)</em></td><td align="left">包含了父作用域中的 (不含 .native 修饰器的) <code>v-on</code> 事件监听器 <a href="https://v2.cn.vuejs.org/v2/api/#vm-listeners">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="实例方法--事件"><a aria-hidden="true" tabindex="-1" href="#实例方法--事件"><span class="icon icon-link"></span></a>实例方法 / 事件</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$on</code></td><td align="left">监听当前实例上的自定义事件 <a href="https://v2.cn.vuejs.org/v2/api/#vm-on">#</a></td></tr><tr><td align="left"><code>vm.$once</code></td><td align="left">监听一个自定义事件，只触发一次 <a href="https://v2.cn.vuejs.org/v2/api/#vm-once">#</a></td></tr><tr><td align="left"><code>vm.$off</code></td><td align="left">移除自定义事件监听器 <a href="https://v2.cn.vuejs.org/v2/api/#vm-off">#</a></td></tr><tr><td align="left"><code>vm.$emit</code></td><td align="left">触发当前实例上的事 <a href="https://v2.cn.vuejs.org/v2/api/#vm-emit">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="实例方法--生命周期"><a aria-hidden="true" tabindex="-1" href="#实例方法--生命周期"><span class="icon icon-link"></span></a>实例方法 / 生命周期</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$mount</code></td><td align="left">手动地挂载一个未挂载的实例 <a href="https://v2.cn.vuejs.org/v2/api/#vm-mount">#</a></td></tr><tr><td align="left"><code>vm.$forceUpdate</code></td><td align="left">迫使 Vue 实例重新渲染 <a href="https://v2.cn.vuejs.org/v2/api/#vm-forceUpdate">#</a></td></tr><tr><td align="left"><code>vm.$nextTick</code></td><td align="left">回调延迟执行 <a href="https://v2.cn.vuejs.org/v2/api/#vm-nextTick">#</a></td></tr><tr><td align="left"><code>vm.$destroy</code></td><td align="left">完全销毁一个实例 <a href="https://v2.cn.vuejs.org/v2/api/#vm-destroy">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="指令-1"><a aria-hidden="true" tabindex="-1" href="#指令-1"><span class="icon icon-link"></span></a>指令</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-text</code></td><td align="left">更新元素的 <code>textContent</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-text">#</a></td></tr><tr><td align="left"><code>v-html</code></td><td align="left">更新元素的 <code>innerHTML</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-html">#</a></td></tr><tr><td align="left"><code>v-show</code></td><td align="left">切换元素的 <code>display</code> css 属性 <a href="https://v2.cn.vuejs.org/v2/api/#v-show">#</a></td></tr><tr><td align="left"><code>v-if</code></td><td align="left">有条件地渲染元素 <a href="https://v2.cn.vuejs.org/v2/api/#v-if">#</a></td></tr><tr><td align="left"><code>v-else</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-else">#</a></td></tr><tr><td align="left"><code>v-else-if</code> <em>(2.1.0)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-else-if">#</a></td></tr><tr><td align="left"><code>v-for</code></td><td align="left">多次渲染元素或模板块 <a href="https://v2.cn.vuejs.org/v2/api/#v-for">#</a></td></tr><tr><td align="left"><code>v-on</code></td><td align="left">绑定事件监听器 <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td></tr><tr><td align="left"><code>v-bind</code></td><td align="left">动态地绑定一个或多个属性 <a href="https://v2.cn.vuejs.org/v2/api/#v-bind">#</a></td></tr><tr><td align="left"><code>v-model</code></td><td align="left">创建双向绑定 <a href="https://v2.cn.vuejs.org/v2/api/#v-model">#</a></td></tr><tr><td align="left"><code>v-slot</code></td><td align="left">提供插槽或接收 prop 的插槽 <a href="https://v2.cn.vuejs.org/v2/api/#v-slot">#</a></td></tr><tr><td align="left"><code>v-pre</code></td><td align="left">跳过元素和它的子元素编译过程 <a href="https://v2.cn.vuejs.org/v2/api/#v-pre">#</a></td></tr><tr><td align="left"><code>v-cloak</code></td><td align="left">保持在元素上直到实例结束编译 <a href="https://v2.cn.vuejs.org/v2/api/#v-cloak">#</a></td></tr><tr><td align="left"><code>v-once</code></td><td align="left">只渲染元素和组件一次 <a href="https://v2.cn.vuejs.org/v2/api/#v-once">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="特殊-attribute"><a aria-hidden="true" tabindex="-1" href="#特殊-attribute"><span class="icon icon-link"></span></a>特殊 attribute</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>key</code></td><td align="left">用在 Vue 的虚拟 DOM 算法 <a href="https://v2.cn.vuejs.org/v2/api/#key">#</a></td></tr><tr><td align="left"><code>ref</code></td><td align="left">元素或子组件注册引用信息 <a href="https://v2.cn.vuejs.org/v2/api/#ref">#</a></td></tr><tr><td align="left"><code>is</code></td><td align="left">限制是否更新 <a href="https://v2.cn.vuejs.org/v2/api/#is">#</a></td></tr><tr><td align="left"><del><code>slot</code></del></td><td align="left">推荐 2.6.0 新增的 <code>v-slot</code> <a href="https://v2.cn.vuejs.org/v2/api/#slot-%E5%BA%9F%E5%BC%83">#</a></td></tr><tr><td align="left"><del><code>slot-scope</code></del></td><td align="left">推荐 2.6.0 新增的 <code>v-slot</code> <a href="https://v2.cn.vuejs.org/v2/api/#slot-scope-%E5%BA%9F%E5%BC%83">#</a></td></tr><tr><td align="left"><del><code>scope</code></del></td><td align="left"><code>2.5.0</code> 新增的 <code>slot-scope</code> 取代 <a href="https://v2.cn.vuejs.org/v2/api/#scope-%E7%A7%BB%E9%99%A4">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置的组件"><a aria-hidden="true" tabindex="-1" href="#内置的组件"><span class="icon icon-link"></span></a>内置的组件</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code><component></code></td><td align="left">渲染一个<code>元组件</code>为动态组件 <a href="https://v2.cn.vuejs.org/v2/api/#component">#</a></td></tr><tr><td align="left"><code><transition></code></td><td align="left">单个元素/组件的过渡效果 <a href="https://v2.cn.vuejs.org/v2/api/#transition">#</a></td></tr><tr><td align="left"><code><transition-group></code></td><td align="left">多个元素/组件的过渡效果 <a href="https://v2.cn.vuejs.org/v2/api/#transition-group">#</a></td></tr><tr><td align="left"><code><keep-alive></code></td><td align="left">不活动的实例缓存不销毁 <a href="https://v2.cn.vuejs.org/v2/api/#keep-alive">#</a></td></tr><tr><td align="left"><code><slot></code></td><td align="left">组件模板中的内容分发插槽 <a href="https://v2.cn.vuejs.org/v2/api/#slot">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="v-on-事件修饰符"><a aria-hidden="true" tabindex="-1" href="#v-on-事件修饰符"><span class="icon icon-link"></span></a>v-on (事件)修饰符</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-on:click.stop</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">调用 event.stopPropagation()。</td></tr><tr><td align="left"><code>v-on:click.prevent</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">调用 event.preventDefault()。</td></tr><tr><td align="left"><code>v-on:click.capture</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">添加事件侦听器时使用 capture 模式。</td></tr><tr><td align="left"><code>v-on:click.self</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">只当事件是从侦听器绑定的元素本身触发时才触发回调。</td></tr><tr><td align="left"><code>v-on:click.{keyCode|keyAlias}</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">只当事件是从特定键触发时才触发回调。</td></tr><tr><td align="left"><code>v-on:click.native</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">监听组件根元素的原生事件。</td></tr><tr><td align="left"><code>v-on:click.once</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">只触发一次回调。</td></tr><tr><td align="left"><code>v-on:click.passive</code> <em>(2.3.0)</em> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">以 { passive: true } 模式添加侦听器</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-on-鼠标修饰符"><a aria-hidden="true" tabindex="-1" href="#v-on-鼠标修饰符"><span class="icon icon-link"></span></a>v-on (鼠标)修饰符</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-on:click.left</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">只当点击鼠标左键时触发</td></tr><tr><td align="left"><code>v-on:click.right</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">只当点击鼠标右键时触发</td></tr><tr><td align="left"><code>v-on:click.middle</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td><td align="left">只当点击鼠标中键时触发</td></tr></tbody></table>
|
||
<p>在 <em>(2.2.0)</em> 中新增</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="系统修饰键"><a aria-hidden="true" tabindex="-1" href="#系统修饰键"><span class="icon icon-link"></span></a>系统修饰键</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-on:keyup.ctrl</code> <em>(2.1.0)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE">#</a></td></tr><tr><td align="left"><code>v-on:keyup.alt</code> <em>(2.1.0)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE">#</a></td></tr><tr><td align="left"><code>v-on:keyup.shift</code> <em>(2.1.0)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE">#</a></td></tr><tr><td align="left"><code>v-on:keyup.meta</code> <em>(2.1.0)</em></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="keyboard-按键修饰符"><a aria-hidden="true" tabindex="-1" href="#keyboard-按键修饰符"><span class="icon icon-link"></span></a>Keyboard 按键修饰符</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-on:keyup.enter</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.tab</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.delete</code></td><td align="left">捕获“删除”和“退格”键 <a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.esc</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.space</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.up</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.down</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.left</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr><tr><td align="left"><code>v-on:keyup.right</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="v-bind-修饰符"><a aria-hidden="true" tabindex="-1" href="#v-bind-修饰符"><span class="icon icon-link"></span></a>v-bind 修饰符</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-bind.prop</code> <a href="https://v2.cn.vuejs.org/v2/api/#v-bind">#</a></td><td align="left">作为一个 DOM property 绑定而不是作为 attribute 绑定。(<a href="https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028">差别在哪里？</a>)</td></tr><tr><td align="left"><code>v-bind.camel</code> <em>(2.1.0+)</em> <a href="https://v2.cn.vuejs.org/v2/api/#v-bind">#</a></td><td align="left">将 kebab-case attribute 名转换为 camelCase。</td></tr><tr><td align="left"><code>v-bind.sync</code> <em>(2.3.0+)</em> <a href="https://v2.cn.vuejs.org/v2/api/#v-bind">#</a></td><td align="left">语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf">Vue Essentials Cheat-Sheet.pdf</a> <em>(vuemastery.com)</em></li>
|
||
<li><a href="https://v2.cn.vuejs.org/">Vue 2 官方文档</a> <em>(vuejs.org)</em></li>
|
||
<li><a href="https://marozed.com/vue-cheatsheet#Instance-Methods-Events">Vue 2 实例方法事件</a> <em>(marozed.com)</em></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|