<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的演说 - @演说.io</title>
<meta name="keywords" content="演说，yanshuo, yanshuo.io, 演说.io, 空中演说, 展示文稿, HTML 展示文稿, Web 展示文稿" />
<meta name="description" content="创作真正跨平台的 HTML5 展示文稿，让你的分享到达世界的任何一个角落" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Reveal base style -->
<link rel="stylesheet" href="https://yanshuo.io/assets/player/css/reveal.min.css">
<!-- Yanshuo.io seed style -->
<link rel="stylesheet" href="https://yanshuo.io/assets/player/atcss/at-block.min.css">
<link rel="stylesheet" href="https://yanshuo.io/assets/player/atcss/at-hljs-theme-bundler.min.css">
<link rel="stylesheet" href="https://yanshuo.io/assets/player/atcss/at-reveal-theme-bundler.min.css">
<!-- Source Sans Web Fonts -->
<link rel="stylesheet" href="https://yanshuo.io/assets/player/lib/font/source-sans-pro/source-sans-pro.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'https://yanshuo.io/assets/player//css/print/pdf.css' : '';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<!-- style for "critical path" -->
<style>
</style>
</head>
<body>
<!-- TODO: a lightweighted loading -->
<!-- main slides -->
<div id="YS" class="at-code-lh-NaN" style="width:100%;height:100%;" data-reveal-theme="league" data-highlight-theme="github" data-ys-title="我的演说" data-ys-user="劳卜" data-ys-transition="slide" data-ys-backgroundTransition="concave" data-ys-transitionSpeed="default"><div class="reveal"><div class="slides"><section data-notes="" data-background-video-loop="true" data-background-video-muted="true" data-background-color="" data-transition="slide-in slide-out"><div style="left:-134px;top:257px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><h1>前端开发</h1><p> </p></article></div><div style="left:326px;top:274px;width:796px;height:auto;" class="at-block at-block--pure"><article class="at-block-content"><h2><span style="font-size:72px">走进 </span> <span style="color:#B0BC00"><em><strong>ue.js</strong></em></span></h2></article></div><div style="width:149px;height:149px;left:665px;top:203px;" class="at-block at-block--pure"><article class="at-block-content"><img src=http://cn.vuejs.org/images/logo.png /></article></div><div style="left:94px;top:296px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><p>@</p></article></div><div style="left:91.98460396957893px;top:491.3782229641996px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><p><span style="font-size:22px">劳卜原创</span></p></article></div></section><section data-notes="" data-background-video-loop="true" data-background-video-muted="true" data-background-color="" data-transition="slide-in slide-out"><div style="left:79px;top:100px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><h1>Vue.js简介</h1><p> </p></article></div><div style="left:89px;top:350px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><ul><li>Vue.js是一个构建<span style="color:#E27300">数据驱动</span>的 web 界面的框架</li><li>Vue.js 的目标是实现响应的<span style="color:#E27300">数据绑定</span>和组合的<span style="color:#E27300">视图组件</span></li><li>Vue.js 的核心是一个响应的<span style="color:#E27300">数据绑定系统</span></li></ul></article></div></section><section data-notes="" data-background-video-loop="true" data-background-video-muted="true" data-background-color="" data-transition="slide-in slide-out"><div style="width:898.9056730446458px;height:477.5436388049681px;left:38.77139979859013px;top:104.17883517959046px;" class="at-block at-block--pure"><article class="at-block-content"><img src=http://cn.vuejs.org/images/mvvm.png /></article></div></section><section data-notes="" data-background-video-loop="true" data-background-video-muted="true" data-background-color="" data-transition="slide-in slide-out"><div style="left:79px;top:60px;width:800px;height:600px;" class="at-block at-block--pure"><article class="at-block-content"><iframe src='http://cn.vuejs.org/' data-prevent-swipe allowfullscreen></iframe></article></div></section><section data-notes="" data-background-video-loop="true" data-background-video-muted="true" data-background-color="" data-transition="slide-in slide-out"><div style="left:79px;top:100px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><h1>Vue实例</h1></article></div><div style="left:101.07382674828418px;top:315.15674271934705px;width:800px;height:500px;" class="at-block at-block--pure"><article class="at-block-content MarkdownBlock"><pre class="hljs"><code class="lang-javascript">var <span class="hljs-keyword">vm</span> = <span class="hljs-keyword">new</span> Vue({
<span class="hljs-keyword">e</span><span class="hljs-variable">l:</span> <span class="hljs-string">'#demo'</span>,
dat<span class="hljs-variable">a:</span> {
<span class="hljs-variable">a:</span> <span class="hljs-number">1</span>,
<span class="hljs-variable">b:</span> <span class="hljs-number">2</span>
},
created: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
// `this` 指向 <span class="hljs-keyword">vm</span> 实例
console.<span class="hljs-built_in">log</span>(<span class="hljs-string">'a is: '</span> + this.<span class="hljs-keyword">a</span>)
}
})
</code></pre>
</article></div><div style="left:103.67074754219996px;top:244.67074754219996px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><p><span style="font-size:26px">包含数据、模板、挂载元素、方法、生命周期钩子等选项</span></p></article></div></section><section data-notes="" data-background-video-loop="true" data-background-video-muted="true" data-background-color="" data-transition="slide-in slide-out"><div style="left:85.19384158783157px;top:15.600074197736966px;width:800px;" class="at-block at-block--pure"><article class="at-block-content"><h1>Vue常用指令</h1></article></div><div style="left:91.68614357262103px;top:143.7599703209052px;width:800px;height:550.6399554813579px;" class="at-block at-block--pure"><article class="at-block-content MarkdownBlock"><pre class="hljs"><code class="lang-html"> <<span class="hljs-selector-tag">div</span> id=<span class="hljs-string">"demo"</span>>
<<span class="hljs-selector-tag">p</span> v-text=<span class="hljs-string">"p1"</span>></p>
<<span class="hljs-selector-tag">p</span> v-html=<span class="hljs-string">"p2"</span>></p>
<<span class="hljs-selector-tag">p</span> v-<span class="hljs-keyword">if</span>=<span class="hljs-string">"p3"</span>></p>
<<span class="hljs-selector-tag">p</span> v-<span class="hljs-keyword">else</span>></p>
<<span class="hljs-selector-tag">p</span> v-show=<span class="hljs-string">"p5"</span>></p>
<<span class="hljs-selector-tag">p</span> v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"p in p6"</span>>{{ <span class="hljs-selector-tag">p</span> }}&
