在公司实习的时候，我需要学习vue进行前端渲染。在官网进行学习后，自己的第一个例子的时候就失败了。让我们来看看我傻乎乎的做法吧。
从官网复制下来的代码：
<div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>但是！！！但是！！！使用node.js的小朋友们注意啦，特别是Handlebars模板的哟！因为我们知道Handlebars渲染是{{}}的，与vue的{{}}冲突啦，所以官网的例子直接复制下来是失败的哟。。。所以我们一般的Handlebars模板中vue使用的是${}就可以啦，当然要设置一下呢。
成功替换代码：
<div id="app"> ${ message } </div> <script> new Vue({ el: '#app', delimiters: ['${', '}'], data: { message: 'Hello Vue!' } }) </script>上面就是最简单的一个Vue前端渲染的例子呢。当然Vue还有很多很多强大的功能。
条件判断If <div id="app"> <p v-if="seen">This is P.</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script> for 循环 <div id="app"> <ol> <li v-for="item in items"> ${ item.message } </li> </ol> </div> <script> new Vue({ el: '#app', delimiters: ['${', '}'], data: { items: [ { message: 'Yes,' }, { message: "I'm handsome boy " }, { message: 'nice' } ] } }) </script>这是不是很像c++11里面的容器遍历呢，哈哈哈哈的确很像哟。
事件监听 <div id="app-5"> <p>${ message }</p> <button v-on:click="reverseMessage">反转</button> </div> <script> new Vue({ el: '#app-5', delimiters:['${','}'], data: { message: 'Hello Girl!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> 双向绑定 <div id="app-6"> <p>${ message }</p> <input v-model="message"> </div> <script> new Vue({ el: '#app-6', delimiters: ['${', '}'], data: { message: 'Hello Boy!' } }) </script>其实Vue入门还是很简单的呢，但是一些高级用法等着我去挑战，nice~
