Hello!

LearnVuejs-01.html

<h2 id="引入-vuejs">引入 Vue.js</h2>

<hr>



<h3 id="起因">起因</h3>

<ul>
<li>jQuery 的DOM操作与异步回调有天生的冲突</li>
<li>Vue.js 的MVVM设计模式十分易于前后端分离——只需要后端提供接口</li>
<li>Vue.js min + gzip后大小只有22kb，十分易于部</li>
</ul>



<h3 id="环境搭建">环境搭建</h3>

<blockquote>
  <p><a href="https://www.zhihu.com/people/cinwell/posts">用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)</a></p>
</blockquote>



<h3 id="学习">学习</h3>



<h4 id="hello-world">Hello World</h4>



<h5 id="text-interpolation-文本插入"><strong>Text Interpolation <em>文本插入</em> </strong></h5>



<pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"app"</span>&gt;</span>
  {{ message }}
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code></pre>



<pre class="prettyprint"><code class="language-js hljs "><span class="hljs-comment">//新的Vue实例</span>
<span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({
  el: <span class="hljs-string">'#app'</span>,
  data: {
    message: <span class="hljs-string">'Hello Vue.js!'</span>
  }
})</code></pre>

<blockquote>
  <div id="app" class="demo">   Hello Vue.js! </div>
</blockquote>

<p>DOM会自动响应数据变化，修改 <code>app.message</code> 可看到实例的更新</p>



<h5 id="using-directive-使用指令"><strong>Using Directive <em>使用指令</em> </strong></h5>



<pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"app-2"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">v-bind:id</span>=<span class="hljs-value">"id"</span>&gt;</span>Inspect me<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code></pre>



<pre class="prettyprint"><code class="language-js hljs "><span class="hljs-keyword">var</span> app2 = <span class="hljs-keyword">new</span> Vue({
  el: <span class="hljs-string">'#app-2'</span>,
  data: {
    id: <span class="hljs-string">'inspect-me'</span>
  }
})</code></pre>



<h4 id="title"> </h4>