Vue小试牛刀

在公司实习的时候，我需要学习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~

猜你喜欢